2

i am using a slider in my template, and depending on if the user filled out values in the craft matrix (slides can have up to 4 rows) i want to have twig compile only the necessary code. I am not sure if my attempt is way too long and it could be archived much easier. thanks a lot for the help

  <div id="slider-with-blocks-1" class="royalSlider rsMinW">
    {% for block in entry.slideitemtop %}
    {% set Bild = block.ImageSlideTop.first() %}
    {% if block.textCSlideTop is empty and block.textBSlideTop is empty and block.textASlideTop is empty and block.headlineSlideTop is empty %}
    <div class="rsContent slide3">
      <a class="rsImg" href="{{ Bild.url }}"></a>
    </div>
    {% elseif block.textCSlideTop is empty and block.textBSlideTop is empty and block.textASlideTop is empty %}
    <div class="rsContent slide3">
      <a class="rsImg" href="{{ Bild.url }}"></a>
      <div class="bContainer">
        <strong data-move-effect="none" class="rsABlock txtCent blockSubHeadline">{{ block.headlineSlideTop }}</strong>
      </div>
    </div>
    {% elseif block.textCSlideTop is empty and block.textBSlideTop is empty %}
    <div class="rsContent slide4">
      <a class="rsImg" href="{{ Bild.url }}"></a>
      <div class="bContainer">
        <strong data-move-effect="none" class="rsABlock txtCent blockSubHeadline">{{ block.headlineSlideTop }}</strong>
        <span data-move-effect="top" class="rsABlock txtCent">{{ block.textASlideTop }}</span>
      </div>
    </div>
    {% elseif block.textCSlideTop is empty %}
    <div class="rsContent slide1">
      <a class="rsImg" href="{{ Bild.url }}"></a>
      <div class="bContainer">
        <strong data-move-effect="none" class="rsABlock txtCent blockSubHeadline">{{ block.headlineSlideTop }}</strong>
        <span data-move-effect="top" class="rsABlock txtCent">{{ block.textASlideTop }}</span>
        <span data-move-effect="bottom" class="rsABlock txtCent">{{ block.textBSlideTop }}</span>
      </div>
    </div>
    {% else %}
    <div class="rsContent slide1">
      <a class="rsImg" href="{{ Bild.url }}"></a>
      <div class="bContainer">
        <strong data-move-effect="none" class="rsABlock txtCent blockSubHeadline">{{ block.headlineSlideTop }}</strong>
        <span data-move-effect="top" class="rsABlock txtCent">{{ block.textASlideTop }}</span>
        <span data-move-effect="bottom" class="rsABlock txtCent">{{ block.textBSlideTop }}</span>
        <span data-move-effect="left" class="rsABlock txtCent">{{ block.textCSlideTop }}</span>
      </div>
    </div>
    {% endif %}
    {% endfor %}
  </div>
5

There is certainly a lot of repeated code here so we can definitely improve on that! There are so many ways you could handle your Twig templates but this is how I would do it:

<div id="slider-with-blocks-1" class="royalSlider rsMinW">
    {% for block in entry.slideitemtop %}
        {% set Bild = block.ImageSlideTop.first() %}

        <div class="rsContent slide{{ loop.index }}">
            <a class="rsImg" href="{{ Bild.url }}"></a>
            <div class="bContainer">
                {% if block.headlineSlideTop|length %}
                    <strong data-move-effect="none" class="rsABlock txtCent blockSubHeadline">{{ block.headlineSlideTop }}</strong>
                {% endif %}
                {% if block.textASlideTop|length %}
                    <span data-move-effect="top" class="rsABlock txtCent">{{ block.textASlideTop }}</span>
                {% endif %}
                {% if block.textBSlideTop|length %}
                    <span data-move-effect="bottom" class="rsABlock txtCent">{{ block.textBSlideTop }}</span>
                {% endif %}
                {% if block.textCSlideTop|length %}
                    <span data-move-effect="left" class="rsABlock txtCent">{{ block.textCSlideTop }}</span>
                {% endif %}
            </div>
        </div>

    {% endfor %}
</div>

All we are doing here is using the same template code for each slide, but for each loop through we are checking if the 4 fields have any content or not.

I also noticed a slide1 class. You can also automatically increment the number at the end of the class for each loop using {{ loop.index }}.

0

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.