2

Been playing with a hero matrix field and can't seem to get this working correctly when all block types are not used.

I have four possible block types for this hero matrix field. Image, Heading, Sub Heading, and CTA. If I use each block type it will display fine, if I don't use all of the block types the rest of the page content ends up in my container for the headings and cta of the hero image.

Example I create a hero but don't add a cta button so I only used 3 of the 4 types.

Pretty sure this has something to do with my if statement.

Here is my code.

{% for block in entry.hero %}<!-- For each hero matrix field -->
    {% if block.type == "image" %}
        {% set image = block.heroimage.first() %}
        <div class="hero" style="background: url('{{ image.url }}') no-repeat scroll 50% 50% / 100% auto rgba(0, 0, 0, 0);">
            <div class="container" style="color:white;">
                {% elseif block.type == "heading" %}
                    <h1>{{ block.heading }}</h1>
                {% elseif block.type == "subHeading" %}
                    <h2>{{ block.heading }}</h2>
                {% elseif block.type == "cta" %}
                    {% set ctaURL = block.ctaURL.first() %}
                    {% set ctaText = block.ctaText %}
                    {% if ctaURL %}
                        <a href="{{ ctaURL.url }}" class="button">{{ ctaText }}</a>   
                    {% endif %}
            </div>
        </div>
    {% endif %}  
{% endfor %}

Here is a screenshot of my matrix config. enter image description here

  • Looks to me like you are reassigning the entry variable in the block.type == "cta" conditional. What happens if you rename that to something else? – Steve Rowling Apr 25 '15 at 13:26
  • Also, it might be worth using a switch statement rather than repetitive if conditionals to make the code a bit cleaner. See details here: buildwithcraft.com/docs/templating/switch – Steve Rowling Apr 25 '15 at 13:29
  • Updated my code and renamed that... still having the same results though. Another example, if I use heading, subheading it works correctly. If I use heading and CTA, it breaks the container and throws the rest of the page content in that container. Can I not use a nested if statement for the matrix to determine if a field exists before attempting to show it like I am trying to do? – Bowenac Apr 25 '15 at 14:36
4

The problem is that the if statements are not nested properly. If your matrix does not contain the cta block for example then the 2 closing div tags will never be output, which obviously destroys the layout.

The bigger question for me is why you would want to separate the fields into different blockTypes at all. An easier approach would be to create one blockType (called 'imageHero' for example) with all 5 fields in it ('image', 'heading', 'subHeading', 'ctaEntry', 'ctaText'), which you could access directly. In this way, the blockTypes could be used for different 'types' of hero, rather than for separating out a single hero's fields.

{% for block in entry.hero %}

    {% if blocktype == 'imageHero'%}

        {% set image = block.heroimage.first() %}
        {% if image %}
            <div class="hero" style="background: url('{{ image.url }}') no-repeat scroll 50% 50% / 100% auto rgba(0, 0, 0, 0);">
                <div class="container" style="color:white;">
                    {% if block.heading %}
                        <h1>{{ block.heading }}</h1>
                    {% endif %}
                    {% if block.subHeading %}
                        <h2>{{ block.heading }}</h2>
                    {% endif %}
                    {% if block.ctaEntry and block.ctaText %}
                        <a href="{{ block.ctaEntry.first.url }}" class="button">{{ block.ctaText }}</a>
                    {% endif %}
                </div>
            </div>
        {% endif %}

    {% endif %}

{% endfor %}
| improve this answer | |
  • Awesome thanks, I went with your suggestion of combining them into one block, this also makes sense so they don't sort the fields etc. This is working great. – Bowenac Apr 25 '15 at 15:25

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.