Using the Matrix field to output content in a slideshow

Question

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>

Answer 1

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 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.