The issue arises from inline three buttons (Viewer, Video, Photo) via CSS.

The idea was to make the buttons more responsive for example if I want to display just one button than stretch to 100% width within the parent. Two buttons (50% each) and three buttons (33.33% each).

I guess if I setup radio field and the values are displayOne, displayTwo and displayThree.

{% for option in entry.viewerOption %}

{% if option in entry.viewerOption.value.selected(displayOne) %}
<a class=”single” href="#">Viewer</a>
{% else %}
<a class=”single” href="#">Photo</a>
{% else %}
<a class=”single” href="#">Video</a>
{% endif %}

{% else %}

{% if option in entry.viewerOption.value.selected(displayTwo) %}
<a class=”duel” href="#">Viewer</a>
<a class=”duel” href="#">Photo</a>
<a class=”duel” href="#">Video</a>
{% endif %}

{% else %}

{% if option in entry.viewerOption.value.selected(displayThree) %}
<a class=”triple” href="#">Viewer</a>
<a class=”triple” href="#">Photo</a>
<a class=”triple” href="#">Video</a>
{% endif %}
{% endfor %}

I am not sure what is the best method to dynamically single, duel or triple buttons base on selected radio value.


I'm not sure I totally get what you're trying to do, but if you want to cut down a bit of the code duplication in here a good start would be to use a Twig macro.

So you'd set up your macro like this:

{% macro input(cssClass) %}
    <a class=”{{ cssClass }}” href="#">Viewer</a>
    <a class=”{{ cssClass }}” href="#">Photo</a>
    <a class=”{{ cssClass }}” href="#">Video</a>
{% endmacro %}

{% from _self import input %}

Then you'd call it like this:

{{ input('dual') }}

If you don't need the value of the radio buttons for anything else, you could always give them the value of your CSS class; that way you don't need to convert them from one thing to another. If you did it this way then you could just call your macro like this:

{% set cssClass = entry.viewerOption %}
{{ input(cssClass) }}

Make sure you've set a default option for your radio button when you've added it in the Control Panel.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.