Bootstrap Carousel in Mezzanine

Question

I would like to have bootstrap carousel of mezzanine galleries. Basically; I am pulling in all the images and I want to have a single row of three images carouse ling. Here is a working snippet of code that I really hate; I would really like to make it work for an unlimited number of images.

    {% if page.docpage.gallery %}
        <script src="{% static "mezzanine/js/magnific-popup.js" %}"></script>
        <link rel="stylesheet" href="{% static "mezzanine/css/magnific-popup.css" %}">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
          <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
          </ol>
            {% with page.docpage.gallery.gallery.images.all as images %}
          <!-- Wrapper for slides -->
          <div class="carousel-inner" role="listbox">
            {% for image in images %}
                {% cycle '<div class="item active">' '' '' '<div class="item">' '' '' '<div class="item">' '' ''%}
                {% cycle '<div class="gallery row"><div class="col-xs-12 col-sm-12">' '' ''%}
                                <a class="thumbnail" rel="#image-{{ image.id }}" title="{{ image.description }}" href="{{ image.file.url }}">
                                <img class="img-responsive" src="{{ MEDIA_URL }}{% thumbnail image.file 200 200 %}"></a>
                {% cycle '' '' '</div></div></div>'%}
            {% endfor %}

                </div>
          </div>
          {% endwith %}
      {% endif %}

I am basically cycling through images and adding other nested tags as required. I've also played around with tracking the loop through forloop.counter|divisibleby:3, but I found that the closing divs were not being applies correctly.

Does anyone have any ideas on how to make this work in jinja/django/mezzanine?

Otherwise I can whip up some javascript to get the job done.

Thanks

To clarify - you only want to display the first three images from the gallery? — solarissmoke, Oct 03 '15 at 02:52
I would like to display all the images,.but in groups of three per carousel slide. — nick_v1, Oct 03 '15 at 03:06

score 1 · Accepted Answer · answered Oct 03 '15 at 03:37

Trying to perform this logic in the template isn't ideal, as you have discovered. I would suggest you do it in the view function. Something along these lines:

# Handy function to split a list into equal sized groups,
# See http://stackoverflow.com/a/434328/3955830
def chunker(seq, size):
    return (seq[pos:pos + size] for pos in xrange(0, len(seq), size))

# Split images into groups of three
image_groups = chunker(images, 3)

# Pass image_groups to your template context.
# If in a class based view then you can do this in the
# get_context_data() method.

Then in the template, things are much simpler:

{% for group in image_groups %}
    <div class="item {% if forloop.first %}active{% endif %}">
        <div class="gallery row">
            <div class="col-xs-12 col-sm-12">
            {% for image in group %}
                <a class="thumbnail" rel="#image-{{ image.id }}" title="{{ image.description }}" href="{{ image.file.url }}">
                <img class="img-responsive" src="{{ MEDIA_URL }}{% thumbnail image.file 200 200 %}"></a>
            {% endfor %}
            </div>
        </div>
    </div>
{% endfor %}

Bootstrap Carousel in Mezzanine

1 Answers1