Answers.Body: <p>The problem is that the <code>if</code> statements are not nested properly. If your matrix does not contain the cta block for example then the 2 closing <code>div</code> tags will never be output, which obviously destroys the layout.</p>
  
  <p>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.</p>
  
  <pre><code>{% for block in entry.hero %}
  
      {% if blocktype == 'imageHero'%}
  
          {% set image = block.heroimage.first() %}
          {% if image %}
              &lt;div class="hero" style="background: url('{{ image.url }}') no-repeat scroll 50% 50% / 100% auto rgba(0, 0, 0, 0);"&gt;
                  &lt;div class="container" style="color:white;"&gt;
                      {% if block.heading %}
                          &lt;h1&gt;{{ block.heading }}&lt;/h1&gt;
                      {% endif %}
                      {% if block.subHeading %}
                          &lt;h2&gt;{{ block.heading }}&lt;/h2&gt;
                      {% endif %}
                      {% if block.ctaEntry and block.ctaText %}
                          &lt;a href="{{ block.ctaEntry.first.url }}" class="button"&gt;{{ block.ctaText }}&lt;/a&gt;
                      {% endif %}
                  &lt;/div&gt;
              &lt;/div&gt;
          {% endif %}
  
      {% endif %}
  
  {% endfor %}
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-04-25T15:25:24.987Z
Answers.Text: 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.
Answers.UserDisplayName: Bowenac
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2015-04-25T15:04:46.387Z
Answers.LastActivityDate: 2015-04-28T15:37:10.483Z
Answers.LastEditDate: 2015-04-28T15:37:10.483Z
Answers.UserDisplayName: Douglas McDonald
Body: <p>Been playing with a hero matrix field and can't seem to get this working correctly when all block types are not used.</p>
  
  <p>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. </p>
  
  <p>Example I create a hero but don't add a cta button so I only used 3 of the 4 types.</p>
  
  <p>Pretty sure this has something to do with my if statement.</p>
  
  <p>Here is my code.</p>
  
  <pre><code>{% for block in entry.hero %}&lt;!-- For each hero matrix field --&gt;
      {% if block.type == "image" %}
          {% set image = block.heroimage.first() %}
          &lt;div class="hero" style="background: url('{{ image.url }}') no-repeat scroll 50% 50% / 100% auto rgba(0, 0, 0, 0);"&gt;
              &lt;div class="container" style="color:white;"&gt;
                  {% elseif block.type == "heading" %}
                      &lt;h1&gt;{{ block.heading }}&lt;/h1&gt;
                  {% elseif block.type == "subHeading" %}
                      &lt;h2&gt;{{ block.heading }}&lt;/h2&gt;
                  {% elseif block.type == "cta" %}
                      {% set ctaURL = block.ctaURL.first() %}
                      {% set ctaText = block.ctaText %}
                      {% if ctaURL %}
                          &lt;a href="{{ ctaURL.url }}" class="button"&gt;{{ ctaText }}&lt;/a&gt;   
                      {% endif %}
              &lt;/div&gt;
          &lt;/div&gt;
      {% endif %}  
  {% endfor %}
  </code></pre>
  
  <p>Here is a screenshot of my matrix config.
  <img src="https://i.sstatic.net/9Gy0n.png" alt="enter image description here"></p>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2015-04-25T13:26:16.747Z
Comments.Text: 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?
Comments.UserDisplayName: Steve Rowling
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2015-04-25T13:29:23.387Z
Comments.Text: Also, it might be worth using a `switch` statement rather than repetitive `if` conditionals to make the code a bit cleaner. See details here: http://buildwithcraft.com/docs/templating/switch
Comments.UserDisplayName: Steve Rowling
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2015-04-25T14:36:59.557Z
Comments.Text: 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?
Comments.UserDisplayName: Bowenac
Tags: <templating><matrix>
Title: Problem with matrix if statement for hero image other content ends up in my div
ThreadText: # Problem with matrix if statement for hero image other content ends up in my div
  
  (Asked by: username_0 on 2015-04-25)
  
  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](https://i.sstatic.net/9Gy0n.png)
  
  **Tags:** templating, matrix
  
  > **Comments:**
  > **username_1**: 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?  
  > **username_1**: Also, it might be worth using a `switch` statement rather than repetitive `if` conditionals to make the code a bit cleaner. See details here: http://buildwithcraft.com/docs/templating/switch  
  > **username_0**: 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?  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_2 on 2015-04-25. Score: 4 | Accepted answer
  
  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 %}
  
  ```
  
  > **Comments:**
  > **username_0**: 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.  
  
  ---
  
  