4

I have a loop to go through my products which go in batches because they need to show detail info every third entry. When the Website is viewed from a mobile device, Tablet or Mobile I want it to loop in Batches of 2 instead of 3.

All I get when I make an "if" statement is errors about the for loop not closing.

    {% if craft.request.isMobileBrowser %}
        {% for batch in craft.entries.section('afval')|batch(2) %}
    {% else %}
        {% for batch in craft.entries.section('afval')|batch(3) %}
    {% endif %}
    lots of content here...
    {% endfor %}

So how can I get the loop to go in 2 entries per batch instead of 3 when reached "col-sm"(bootstrap) or atleast when a mobile device is detected.

6

You should close your for-tag pair within the {% if ... %}.

So:

{% if craft.request.isMobileBrowser %}
    {% for batch in craft.entries.section('afval')|batch(2) %}
        ...
    {% endfor %}
{% else %}
    {% for batch in craft.entries.section('afval')|batch(3) %}
        ...
    {% endfor %}
{% endif %}

Or, even better:

{% set batch = craft.request.isMobileBrowser ? 2 : 3 %}

{% for batch in craft.entries.section('afval') | batch(batch) %}
    ...
{% endfor %}
1
  • The last was code did it! Thank you so much! Aug 31 '15 at 11:14
3

I wouldn't use Craft's isMobileBrowser detection here. It's the viewport width you are actually interested in and not whether the visitors is viewing your site from a mobile, tablet or desktop device.

So what I'd do instead is to add a css class to the last item in each row and hide that item for the viewport widths in question with css.

{% for batch in craft.entries.section('afval')|batch(3) %}
    <div class="row">
        {% for item in batch %}
            {% set lastItemClass = loop.last ? 'col-xs-hidden' %}

            <div class="col-xs-6 col-md-4 {{ lastItemClass }}">
            </div>
        {% endfor %}
    </div>
{% endfor %}
.col-xs-hidden {display: none;}

@media (min-width: @screen-md-min) {
  .col-xs-hidden {display: block;}
}
3
  • This seems to be a very good solution but the problem is that I actually do need to show it in batches of 2 on mobile / tablet not on any sort of desktop device so Paul's solution fits more for my problem. Thank you for the answer though really appreciate it :D Aug 31 '15 at 12:34
  • Hmm... that's exactly what the code does. It shows it in batches of 2, and on all browser with a viewport widths with 992px and above you have batches of 3.
    – carlcs
    Aug 31 '15 at 12:42
  • There might be huge tablets that Craft classifies as mobile devices and tiny laptops or people having their browser windows very narrow that you're serving the 3 items per row because Craft cannot know about the width. And don't you use Bootstraps breakpoints for other things and want to have this batches detail play nicely with those?
    – carlcs
    Aug 31 '15 at 12:47

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.