Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-05-23T13:44:24.953Z
Answers.LastActivityDate: 2016-05-23T13:44:24.953Z
Answers.UserDisplayName: Luke Pearce
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-05-23T12:46:43.757Z
Answers.Text: 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?
Answers.UserDisplayName: Büşra Başaran
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-05-23T12:15:58.877Z
Answers.LastActivityDate: 2016-05-23T14:53:37.947Z
Answers.LastEditDate: 2016-05-23T14:53:37.947Z
Answers.UserDisplayName: KSPR
Body: <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>
  
Tags: <matrix><block-types>
Title: Using the Matrix field to output content in a slideshow
ThreadText: # 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 `<div>` for each block type. How can I output two block types in the same `<div>`?
  
  ```
  <div id="da-slider" class="da-slider">
    {% for block in entry.homepageSlider %}
      <div class="da-slide">
        {% if block.type == "sliderText" %}
          <h2>{{ block.sliderHead }}</h2>
          <p>{{ block.sliderText }}</p>
          <a href="#" class="da-link">{{ block.sliderButton }}</a>
        {% endif %}
  
        {% if block.type == "sliderImage" %}
          {% set image = block.image.first() %}
          {% if image %}
            <div class="da-img"><img src="{{ image.getUrl('') }}" width="{{ image.getWidth('') }}" height="{{ image.getHeight('') }}" align="{{ block.position }}" alt="image01">
            </div>
          {% endif %}
        {% endif %}
      </div>
    {% endfor %}
    <nav class="da-arrows">
      <span class="da-arrows-prev"></span>
      <span class="da-arrows-next"></span>
    </nav>
  </div>
  
  ```
  
  **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.
  
  ```
  <div id="da-slider" class="da-slider">
    {% for block in entry.homepageSlider %}
      <div class="da-slide">
        // An example of a conditional checking for a completed field inside a content block.
        {% if block.slideHead|length %}
          <h2>{{ block.slideHead }}</h2>
        {% endif %}
        <p>{{ block.slideText }}</p>
        <a href="#" class="da-link">{{ block.slideButton }}</a>
  
        {% set image = block.image.first() %}
        {% if image %}
          <div class="da-img">
            <img src="{{ image.getUrl('') }}" width="{{ image.getWidth('') }}" height="{{ image.getHeight('') }}" align="{{ block.position }}" alt="image01">
          </div>
        {% endif %}
      </div>
    {% endfor %}
    <nav class="da-arrows">
      <span class="da-arrows-prev"></span>
      <span class="da-arrows-next"></span>
    </nav>
  </div>
  
  ```
  
  
  ---
  
  ### 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 %}
      <div class="da-slide">
         {% if block.type == "sliderText" %}
           <div class="div-for-sliderText">{# content of first block #}</div>
         {% elseif block.type == "sliderImage" %}
           <div class="div-for-sliderImage">{# content of second block #}</div>
          {% endif %}
       </div>
   {% 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 %}
      <div class="da-slide">
       <div class="all-blocks-in-one-single-div">
         {% if block.type == "sliderText" %}
           {# content of first block #}
         {% elseif block.type == "sliderImage" %}
           {# content of second block #}
          {% endif %}
       </div>
      </div>
   {% 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?  
  
  ---
  
  