Ημερήσια αρχεία: 18 Δεκεμβρίου 2017


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) (184 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:

[poll id=”1″]

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.