An attempt to use images in WP-Polls


Recently we needed to make a poll with images in WordPress.
On our system we only had WP-Polls installed and we decided to go along with it despite its drawbacks.

Drawbacks of using WP-Polls:

  • Does not support polls with images directly.
  • Does not allow you to configure ‘Poll Options’ per poll.
    For example, either all polls are logged by username or none is.

WP-Polls

In any case, we only needed one poll for a very specific task so we decided to ignore those limitations and see what we could do with the current vanilla code of WP-Polls ( WP-Polls 2.73.8 (retrieved on 2017 Dec 18) (77 downloads) ).

What we did was the following:

A: We configured the system to only allow registered users to vote and set the vote logging to be per username

B: We modified the templates below to receive the poll answers as URIs for images.

Voting Form Body:

<li><input type="%POLL_CHECKBOX_RADIO%" id="poll-answer-%POLL_ANSWER_ID%" name="poll_%POLL_ID%" value="%POLL_ANSWER_ID%" /> <label for="poll-answer-%POLL_ANSWER_ID%"><img src="%POLL_ANSWER%" />%POLL_ANSWER%</label></li>

Result Body:
Displayed When The User HAS NOT Voted

<li><img src="%POLL_ANSWER%" />%POLL_ANSWER% <small>(%POLL_ANSWER_PERCENTAGE%%, %POLL_ANSWER_VOTES% Votes)</small><div class="pollbar" style="width: %POLL_ANSWER_IMAGEWIDTH%%" title="%POLL_ANSWER_TEXT% (%POLL_ANSWER_PERCENTAGE%% | %POLL_ANSWER_VOTES% Votes)"></div></li>

Result Body:
Displayed When The User HAS Voted

<li><img src="%POLL_ANSWER%" /><strong><i>%POLL_ANSWER% <small>(%POLL_ANSWER_PERCENTAGE%%, %POLL_ANSWER_VOTES% Votes)</small></i></strong><div class="pollbar" style="width: %POLL_ANSWER_IMAGEWIDTH%%" title="You Have Voted For This Choice - %POLL_ANSWER_TEXT% (%POLL_ANSWER_PERCENTAGE%% | %POLL_ANSWER_VOTES% Votes)"></div></li>

These two changes produced the following result:

Vote for the best filter

  • http://bytefreaks.net/wp-content/uploads/2017/06/Wooden-Spoon-Carving-With-Mat-Holloway-14.jpg (36%, 23 Votes)
  • http://bytefreaks.net/wp-content/uploads/2017/06/Wooden-Spoon-Carving-With-Mat-Holloway-11.jpg (30%, 19 Votes)
  • http://bytefreaks.net/wp-content/uploads/2017/06/Wooden-Spoon-Carving-With-Mat-Holloway-15.jpg (23%, 15 Votes)
  • http://bytefreaks.net/wp-content/uploads/2017/06/Wooden-Spoon-Carving-With-Mat-Holloway-10.jpg (8%, 5 Votes)
  • http://bytefreaks.net/wp-content/uploads/2017/06/Wooden-Spoon-Carving-With-Mat-Holloway-13.jpg (2%, 1 Votes)
  • http://bytefreaks.net/wp-content/uploads/2017/06/Wooden-Spoon-Carving-With-Mat-Holloway-08.jpg (2%, 1 Votes)
  • http://bytefreaks.net/wp-content/uploads/2017/06/Wooden-Spoon-Carving-With-Mat-Holloway-12.jpg (0%, 0 Votes)
  • http://bytefreaks.net/wp-content/uploads/2017/06/Wooden-Spoon-Carving-With-Mat-Holloway-09.jpg (0%, 0 Votes)

Total Voters: 64

Loading ... Loading ...

We did not fiddle with the CCS of the site to make the polls look better or anything as it was OK for the scenario that we cared about.

This post is also available in: Greek

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.