Bootstrap Carousel in Mezzanine

Question

Я хотел бы иметь автозагрузку из мезонинных галерей. В основном; Я занимаюсь всеми изображениями, и я хочу иметь один ряд из трех изображений carouse ling. Вот рабочий фрагмент кода, который я действительно ненавижу; Я бы очень хотел, чтобы он работал для неограниченного количества изображений.

{% 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 %} 

Я в основном езжу на велосипеде по изображениям и добавляю другие вложенные теги по мере необходимости. Я также играл с отслеживанием цикла через forloop.counter | divisibleby: 3, но я обнаружил, что закрывающие divs не применяются правильно.

Есть ли у кого-нибудь идеи о том, как сделать эту работу в jinja/django/mezzanine?

В противном случае я могу взломать некоторый javascript, чтобы выполнить работу.

Благодаря

Answer 1

Попытки выполнить эту логику в шаблоне не является идеальным, как вы открыли. Я предлагаю вам сделать это в функции просмотра. Что-то вдоль этих линий:

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

Затем в шаблоне, все гораздо проще:

{% 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 %}