Templating Matrix Block

Question

It's my first website using Craft. I'm trying to figure out how to loop Matrix. I have created a field called bannerMatrix with a block type called banner that has 3 fields:

1. Image (assets)
2. Heading (plain text)
3. Subheading (plain text)

This is what I have so far:

{% for block in entry.bannerMatrix %}
    {% if block.type == "banner" %}
        <div>
            <img src="{{ block.image }}" alt="{{ image.title }}">
            <div class="hero_msg">
                <h3>{{ block.heading }}</h3>
                <h4>{{ block.subheading }}</h4>
            </div>
        </div>
    {% endif %}
{% endfor %}

Anything will be helpful. Thanks!

---

UPDATE

@JamieWade, thanks a lot for the super fast answer! Unfortunately, the code above still doesnt work for me :(

{% for block in entry.bannerMatrix %}
    <div>
        <img src="{{ block.image.first().title }}" alt="">
        <div class="hero_msg">
            <h3>{{ block.heading }}</h3>
            <h4>{{ block.subheading }}</h4>
        </div>
    </div>
{% endfor %}

I also tried this :

{% set image = block.image.first() %}
{% if image %}
    <img src="{{ image.getUrl('image') }}">
{% endif %}

And I dont get anything as well :(

I wonder if my structure is correct. So I attached a screenshot.

@Alec, yes there is content in the entry(I attached a screenshot). Now I'm even more curious, what's missing here. I also added the path to subfolder in the Field Setting.

Answer 1

From your last update it looks like you simply need to get the entry that contains that matrix block, the error Variable "entry" doesn't exist simply means nothing is assigned to entry in your templates. There are a couple of ways you can solve this:

Option 1 - Tell Craft which template to load for this entry

If you go into your section settings, there will be a field called Entry template which if, for example, you put about in this craft would look for either about.html or about/index.html in your craft/templates folder and would automatically assign a variable entry to your template when you visit the /about url.

There is also an option This is for the homepage in the settings which, if checked, will assign the entry to index.html in your templates (but i don't think this will show if there is already a section checked elsewhere)

You can see more about this in the craft docs: http://buildwithcraft.com/docs/templating-overview

Option 2 - Fetch the entry in your template using twig tags

There are numerous ways to do this, but given you are using a single you should just be able to use this:

{% set entry = craft.entries.section('homePageBanner').first() %}

You might need to adjust the homePageBanner part if that isn't the handle of your section, but this will then give you an entry variable to work with in your template and hopefully you'll find you will get the matrix content back :)

If you need some more details on how craft.entries works then the docs are a great place to find out more: http://buildwithcraft.com/docs/templating/craft.entries

Answer 2

Hi Sylvia and welcome to Craft. You are almost there with your markup, there are only 2 little things I can spot straight away:

Line 4 you are calling {{ image.title }} however the image variable doesn't exist anywhere from what I can see in your code. In Line 1 you are looping through your Matrix field with a block variable: {% for block in ... %}, so this means each time you reference a field you will need to start it with {{ block. }}

If you change Line 4 to {{ block.image.first().title }} then you will get what you are trying to achieve.

Also if your Matrix field only has one block type, there is no need to check that block type when looping through it. You can remove {% if block.type == "banner" %} and everything will still work like before.

Answer 3

I would try this:

{% for block in entry.bannerMatrix %}
  <div>
    {% set blockImage = block.image.first %}
    {% if blockImage %}
      <img src="{{ blockImage.getUrl() }}" alt="{{ blockImage.filename }}">
    {% endif %}
    <div class="hero_msg">
      <h3>{{ block.heading }}</h3>
      <h4>{{ block.subheading }}</h4>
    </div>
  </div>
{% endfor %}

• You loop over all the blocks :{% for block in entry.bannerMatrix %}.
• block.image will be an ElementCriteriaModel, which is not an asset, but a way to get an asset.
• Set blockImage to the first (and only) asset if it exists, and otherwise null: {% set blockImage = block.image.first %}.
• Only try to use the image if it exists: {% if blockImage %}.
• Assets don't have a title, so {{ blockImage.title }} won't work. You can use {{ blockImage.filename }}, or you could assign another field in the asset's Field Layout, and then use that: {{ blockImage.altText }} for example.

Answer 4

thanks a lot for all the answers!

I finally got my entries to show up! What I did was move that entry to Homepage section(like what Alec Ritson suggested) together with other entry I already have in Homepage and wrapped the block code with {% for entry in craft.entries.section('homepage') %}

So the full code is:

{% for entry in craft.entries.section('homepage') %}
    {% for block in entry.bannerMatrix %}
        <div>
            {% set blockImage = block.image.first() %}

            {% if blockImage %}
                <img src="{{ blockImage.getUrl() }}" alt="{{ block.heading }}" title="{{ block.heading }}">
            {% endif %}

            <div class="hero_msg">
                <div class="caption_top"></div>
                <div class="caption">
                    <h3>{{ block.heading }}</h3>

                    <h4>
                        <span class="rsep"></span>
                        {{ block.subheading }}
                        <span class="lsep"></span>
                    </h4>

                </div>
                <div class="caption_bot"></div>
            </div>
        </div>
    {% endfor %}
{% endfor %}