3

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

| improve this answer | |
  • 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 May 23 '16 at 12:46

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.