<p>I think you'd be better off with your Matrix field, <code>entry.homepageSlider</code> having only one block type called <code>Slide</code>. This block type would then contain the fields for each slide such as <code>slideHead</code>, <code>slideText</code> and <code>slideImage</code>.</p>

<p>You would then loop through each block (slide) to output fields within the same slide. If certain fields are not required you would wrap them in conditionals.</p>

<pre><code>&lt;div id="da-slider" class="da-slider"&gt;
  {% for block in entry.homepageSlider %}
    &lt;div class="da-slide"&gt;
      // An example of a conditional checking for a completed field inside a content block.
      {% if block.slideHead|length %}
        &lt;h2&gt;{{ block.slideHead }}&lt;/h2&gt;
      {% endif %}
      &lt;p&gt;{{ block.slideText }}&lt;/p&gt;
      &lt;a href="#" class="da-link"&gt;{{ block.slideButton }}&lt;/a&gt;

      {% set image = block.image.first() %}
      {% if image %}
        &lt;div class="da-img"&gt;
          &lt;img src="{{ image.getUrl('') }}" width="{{ image.getWidth('') }}" height="{{ image.getHeight('') }}" align="{{ block.position }}" alt="image01"&gt;
        &lt;/div&gt;
      {% endif %}
    &lt;/div&gt;
  {% endfor %}
  &lt;nav class="da-arrows"&gt;
    &lt;span class="da-arrows-prev"&gt;&lt;/span&gt;
    &lt;span class="da-arrows-next"&gt;&lt;/span&gt;
  &lt;/nav&gt;
&lt;/div&gt;
</code></pre>

CC BY-SA 3.0
2016-05-23T13:44:24.953Z
2016-05-23T13:44:24.953Z
Luke Pearce
<p>I reduced your code a little: You can use <code>elseif</code> to cycle trough each block so you don't have to write each if statement. Now where do you want your div?</p>

<p>If you want each block with one separate div you write them inside the if statement (As I did in this example).</p>

<pre><code> {% for block in entry.homepageSlider %}
    &lt;div class="da-slide"&gt;
       {% if block.type == "sliderText" %}
         &lt;div class="div-for-sliderText"&gt;{# content of first block #}&lt;/div&gt;
       {% elseif block.type == "sliderImage" %}
         &lt;div class="div-for-sliderImage"&gt;{# content of second block #}&lt;/div&gt;
        {% endif %}
     &lt;/div&gt;
 {% endfor %}
</code></pre>

<p>If you want to add the content of both blocks into one single div it would look like this:</p>

<pre><code> {% for block in entry.homepageSlider %}
    &lt;div class="da-slide"&gt;
     &lt;div class="all-blocks-in-one-single-div"&gt;
       {% if block.type == "sliderText" %}
         {# content of first block #}
       {% elseif block.type == "sliderImage" %}
         {# content of second block #}
        {% endif %}
     &lt;/div&gt;
    &lt;/div&gt;
 {% endfor %}
</code></pre>

<p>But this is basically what you already did. So I'm not sure If I understand what you are trying to accomplish.</p>

CC BY-SA 3.0
2016-05-23T12:46:43.757Z
Yes, I tried, but I want to let the text and image together. But it seems the text on the first slide and the image on the second slide. How to seems together?
Büşra Başaran
CC BY-SA 3.0
2016-05-23T12:15:58.877Z
2016-05-23T14:53:37.947Z
2016-05-23T14:53:37.947Z
KSPR
<p>I want to use two block types in one Matrix field. These blocks will be output in a div. At the moment my code adds a new <code>&lt;div&gt;</code> for each block type. How can I output two block types in the same <code>&lt;div&gt;</code>?</p>

<pre><code>&lt;div id="da-slider" class="da-slider"&gt;
  {% for block in entry.homepageSlider %}
    &lt;div class="da-slide"&gt;
      {% if block.type == "sliderText" %}
        &lt;h2&gt;{{ block.sliderHead }}&lt;/h2&gt;
        &lt;p&gt;{{ block.sliderText }}&lt;/p&gt;
        &lt;a href="#" class="da-link"&gt;{{ block.sliderButton }}&lt;/a&gt;
      {% endif %}

      {% if block.type == "sliderImage" %}
        {% set image = block.image.first() %}
        {% if image %}
          &lt;div class="da-img"&gt;&lt;img src="{{ image.getUrl('') }}" width="{{ image.getWidth('') }}" height="{{ image.getHeight('') }}" align="{{ block.position }}" alt="image01"&gt;
          &lt;/div&gt;
        {% endif %}
      {% endif %}
    &lt;/div&gt;
  {% endfor %}
  &lt;nav class="da-arrows"&gt;
    &lt;span class="da-arrows-prev"&gt;&lt;/span&gt;
    &lt;span class="da-arrows-next"&gt;&lt;/span&gt;
  &lt;/nav&gt;
&lt;/div&gt;
</code></pre>

<matrix><block-types>
Using the Matrix field to output content in a slideshow
# Using the Matrix field to output content in a slideshow

(Asked by: username_0 on 2016-05-23)

I want to use two block types in one Matrix field. These blocks will be output in a div. At the moment my code adds a new  for each block type. How can I output two block types in the same ?

  {% for block in entry.homepageSlider %}
    
      {% if block.type == "sliderText" %}
        {{ block.sliderHead }}
        {{ block.sliderText }}
        {{ block.sliderButton }}
      {% endif %}

      {% if block.type == "sliderImage" %}
        {% set image = block.image.first() %}
        {% if image %}
          
          
        {% endif %}
      {% endif %}
    
  {% endfor %}

**Tags:** matrix, block-types

---

## 2 answers

### Answer by username_1 on 2016-05-23. Score: 2

I think you'd be better off with your Matrix field, entry.homepageSlider having only one block type called Slide. This block type would then contain the fields for each slide such as slideHead, slideText and slideImage.
You would then loop through each block (slide) to output fields within the same slide. If certain fields are not required you would wrap them in conditionals.

  {% for block in entry.homepageSlider %}
    
      // An example of a conditional checking for a completed field inside a content block.
      {% if block.slideHead|length %}
        {{ block.slideHead }}
      {% endif %}
      {{ block.slideText }}
      {{ block.slideButton }}

      {% set image = block.image.first() %}
      {% if image %}
        
          
        
      {% endif %}
    
  {% endfor %}


---

### Answer by username_2 on 2016-05-23. Score: 2

I reduced your code a little: You can use elseif to cycle trough each block so you don't have to write each if statement. Now where do you want your div?
If you want each block with one separate div you write them inside the if statement (As I did in this example).
 {% for block in entry.homepageSlider %}
    
       {% if block.type == "sliderText" %}
         {# content of first block #}
       {% elseif block.type == "sliderImage" %}
         {# content of second block #}
        {% endif %}
     
 {% endfor %}

If you want to add the content of both blocks into one single div it would look like this:
 {% for block in entry.homepageSlider %}
    
     
       {% if block.type == "sliderText" %}
         {# content of first block #}
       {% elseif block.type == "sliderImage" %}
         {# content of second block #}
        {% endif %}
     
    
 {% endfor %}

But this is basically what you already did. So I'm not sure If I understand what you are trying to accomplish.

> **Comments:**
> **username_0**: Yes, I tried, but I want to let the text and image together. But it seems the text on the first slide and the image on the second slide. How to seems together?  

---

