Array to string conversion Template Error

Question

I have 2 bits of code that should be about identical with the exception of one being in a Matrix and one not. The bit that is not looks like this:

<ul>
    {% for point in entry.keyPoints %}
        <li>
            <div class="a-ico">
                <i class="fa fa-{{ point.icon }}"></i>
            </div>
            <div class="a-info">
                <h4>{{ point.heading }}</h4>
                {{ point.text }}
            </div>
        </li>
    {% endfor %}
</ul>

This works exactly as intended. and uses the "ICON" 3rd-party field type which essentially is a dropdown that allows me to pick which icon I want to use.

The code that i'm having trouble with is:

{% for block in entry.articleBody %}
    {% if block.type == "text" %}
         Some stuff here
    {% elseif block.type =="iconSection" %}
        {% if block.getPrev() %}
            {% if block.getPrev().type != "iconSection" %}
                <ul>
            {% endif %}
        {% else %}
            <ul>
        {% endif %}
        <li>
            <div class="a-ico">
                <i class="fa fa-{{ block.icon }}"></i>
            </div>
            <div class="a-info">
                <h4>{{ block.heading }}</h4>
                {{ block.text }}
            </div>
        </li>
        {% if block.getNext() %}
            {% if block.getNext().type != "iconSection" %}
                </ul>
            {% endif %}
        {% else %}
            </ul>
        {% endif %}
    {% elseif block.type =="video" %}
        some stuff here
    {% endif %}
{% endfor %}

It is saying Template Error (Array to String Conversion) with this bit highlighted:

<i class="fa fa-{{ block.icon }}"></i>

As you can see the code is almost identical except it is BLOCK instead of POINT, and the block one is in a matrix where as the point item is not. What might be causing this and how might I resolve it?

Answer 1

According to the docs for the Icons plugin, icon is actually an object. Try this instead...

<i class="fa {{ block.icon.class }}"></i>

In both scenarios, I'd take another look at your rendered HTML... your first example may actually be rendering the word Array instead of the class name that you are looking for. You can also leave off the leading fa-, since that will be automatically included in the class name.

Where you have called icon in both examples, you're simply referring to the field itself. You actually want to be referring to the values of the field.

To output the HTML you're looking for, either of these two options will work:

1. {{ block.icon.icon }}
2. <i class="fa {{ block.icon.class }}"></i>

And for your non-matrix example, just replace block with point.