Reactions Work v1.2.6
Add Facebook/linked style reactions to your Craft CMS content
More Craft plugins

Twig hands-on snippets

Here you will find some hands on snippets for reactions in Twig.


Show 'Lilly Morissette, Ayla Gutkowski and 1 other user.'

        {% set reactions_work = craft.reactions_work %}
        {# reactions_work \twentyfourhoursmedia\reactionswork\services\ReactionsWorkFacade #}
        {% set reactions = reactions_work.reactions(entry) %}

        {# show 'Lilly Morissette, Ayla Gutkowski and 1 other user.' #}
        {% with %}
            {% set userIds = reactions.allUserIds %}
            {% set numUsers = userIds | length %}
            {% set usersToShow = 2 %}
            {% set users = reactions_work.usersFromIds(reactions.allUserIds | slice(0,usersToShow)) %}
            {% set remaining = max(0, numUsers - (users | length)) %}
            {% for user in users %}
                {{ user.name }}{% if not loop.last %}, {% endif %}
            {% endfor %}
            {% if remaining > 0 %}
                and {{ remaining }} other {{ remaining == 1 ? 'user' : 'users' }}.
            {% endif %}
        {% endwith %}

Show all reactions and counts for an entry

TIP: use a macro to show reaction icons


    {% import '_macros/reactions-macros.twig' as macros %}
    {% set reactions_work = craft.reactions_work %}
    {# reactions_work \twentyfourhoursmedia\reactionswork\services\ReactionsWorkFacade #}
    {% set reactions = reactions_work.reactions(entry) %}

    {% for handle in reactions_work.reactionHandles %}
        <span title="{{ reactions.countReactions(handle) }} reactions">
        {{ macros.reactionIcon(handle) }}
        </span>        
    {% endfor %}
_macros/reactions-macros.twig
{%- macro reactionIcon(handle, opts = {} ) %}
    {# link https://emojipedia.org/ #}
    {% set dimmed = opts.dimmed ?? false %}
    {% set class = "emoji" %}

    {% if dimmed %}
        {% set class = class ~ " emoji-dimmed" %}
    {% endif %}

    {% switch handle %}
    {% case 'like' %}
        <i class="{{ class }}">Insert your utf8 emoji here</i>
    {% case 'love' %}
        <i class="{{ class }}">Insert your utf8 emoji here</i>
    {% case 'haha' %}
        <i class="{{ class }}">Insert your utf8 emoji here</i>
    {% case 'wow' %}
        <i class="{{ class }}">Insert your utf8 emoji here</i>
    {% case 'sad' %}
        <i class="{{ class }}">Insert your utf8 emoji here</i>
    {% case 'angry' %}
        <i class="{{ class }}">Insert your utf8 emoji here</i>
    {% case 'dollar' %}
        <i class="{{ class }}">Insert your utf8 emoji here</i>
    {% case 'cash' %}
        <i class="{{ class }}">Insert your utf8 emoji here</i>
    {% case 'bull' %}
        <i class="{{ class }}">Insert your utf8 emoji here</i>
    {% case 'bear' %}
        <i class="{{ class }}">Insert your utf8 emoji here</i>

        {# add your icons for custom handles here.. #}
        {# .. #}
        {# fallback #}
    {% default %}
        <i class="{{ class }}"></i>

    {% endswitch %}

{% endmacro -%}

Show a react form with redirect

        {% set reactions_work = craft.reactions_work %}
        {# reactions_work \twentyfourhoursmedia\reactionswork\services\ReactionsWorkFacade #}
        {% set reactions = reactions_work.reactions(entry) %}

        {% set canReact = reactions_work.reactable(currentUser, element) %}
        {% set disabledAttr = canReact ? '' : 'disabled="disabled"' %}

        <form method="post" action="{{ reactions_work.formUrl(element, currentUser) }}">
            {{ csrfInput() }}
            {{ redirectInput(craft.app.request.url) }}
            <input type="hidden" name="react" value="set"/>
            {% for handle in reactions_work.reactionHandles %}
                {% if not canReact or reactions.canRegister(handle, currentUser) %}
                    <button name="reaction" {{ disabledAttr }} type="submit" class="btn btn-info" value="{{ handle }}">{{ handle }}</button>
                {% endif %}

                {% if reactions.canDeregister(handle, currentUser) %}
                    <button name="reaction" {{ disabledAttr }} type="submit" class="btn btn-danger" value="{{ handle }}">{{ handle }}</button>
                {% endif %}
            {% endfor %}
        </form>