2

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?

3

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.

| improve this answer | |
  • This worked, any idea why it worked without that in one instance and required it in another? – Christopher Healey Aug 12 '14 at 6:32
  • Are you sure the point instance was generating the right HTML code? (Was the icon actually showing up?) According to the plugin docs, that code snippet shouldn't have worked. – Lindsey D Aug 12 '14 at 6:34
  • Yep, showed up and worked EXACTLY as intended. – Christopher Healey Aug 12 '14 at 8:03

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.