Use Twig result as dynamic content in Icon

[TiDs]

I’m trying to dynamically set the FA icon in a looper using the result of some Twig statements. If I put the {{looper.item}} in the Icon element’s regular text field, it’s fine and shows the correct string (ie ‘instagram’) but if I use it in the icon field with breakout mode it doesn’t set the icon as I was hoping. It works as expected if I set it up as an element parameter so there must be something about the Twig output and the icon field that I don’t quite understand.

Twig code:

{% set social = {‘facebook’:‘facebook-f’,‘instagram’:’’} %}
{% for key,value in social %}
{% if key in looper.item %}
{% set icon = value?:key %}
{{ icon }}{% endif %}{% endfor %}

[ruenel]

Hey @TiDs,

Thanks for posting in! The issue could be caused by your incorrect quotes. You can try this:

{% set social = {
    'facebook': 'facebook-f',
    'instagram': ''
} %}

{% for key, value in social %}
    {% if key in looper.item %}
        {% set icon = value ?: key %}
        {{ icon }}
    {% endif %}
{% endfor %}

Be advised that custom coding is beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

Best Regards.

[TiDs]

No, unfortunately that didn’t work. You can see here on the frontend I’m successfully pulling each dynamic string (with capitalize filter) into the text part of the button, but the icon remains null like the glyph isn’t being found or set in the Cornerstone single template

[Ismael]

We may need to access the CS builder to properly understand the issue. Please provide the login details in the secure note.

[TiDs]

Thanks, login credentials above, the working template is the Artist single post type layout. I did find a workaround using the icon unicode values in the CSS (temporarily commented out) but it would be nice to use Twig so I can eventually run a little function that pulls the domain root from each looper item (ie “instagram”) to use as the default icon string value and then only have to set custom key:Value pairs for FA brand icons with values that don’t literally match their respective domains

[Ismael]

Thank you for the update. We tested it for a while, but it seems the value generated by the param or dynamic content is not accepted in the icon field when in breakout mode. It works when we manually enter the icon string or name (e.g., “facebook” or “instagram”), but for some reason, it doesn’t accept the same value when it comes from dynamic content. You may need to use your workaround for now.