Utilizing the Bootstrap Carousel Feature within Mezzanine

Seeking to implement a bootstrap carousel of mezzanine galleries, I aim to display all images in a single row carousel. Below is a code snippet that I've been struggling with and would like to modify it to handle an infinite 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 cycling through images and adding nested tags as needed but facing issues with closing divs. Any suggestions on how to improve this setup using jinja/django/mezzanine?

If not, I might resort to utilizing JavaScript to achieve the desired functionality.

Thank you

javascriptdjangotwitter-bootstrapmezzanine

Answer №1

Implementing this logic directly in the template may not be the best approach, as you've noticed. It would be more efficient to handle it within the view function. Here's how you can do it:

# Function to divide a list into equal groups
def chunker(seq, size):
    return (seq[pos:pos + size] for pos in range(0, len(seq), size)

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

# Add image_groups to your template context
# If you're using a class-based view, you can do this in the
# get_context_data() method.

Then, your template will be 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 %}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring the isolate scope within a compiled directive

I successfully managed to compile a directive using this piece of code: let element, $injector, $compile, link, scope; element = angular.element(document.getElementById(#whatever)); $injector = element.injector(); $compile = $injector.get('$compile& ...

javascriptangularjs

Exploring the differences: Bootstrap-Vue versus Bootstrap 4

After utilizing Vuejs to develop my frontend, I am now faced with the task of styling it. In my research, I stumbled upon Bootstrap-vue. I am wondering which option would be more beneficial - using Bootstrap 4 or Bootstrap-vue. Are they essentially the s ...

twitter-bootstrapvue.jsbootstrap-4bootstrap-vue

Highcharts Maps - Circular zoom controls

Currently implementing the Highcharts API for a special project. All features are functioning well except for one issue. I am looking to make the zoom in/out buttons appear rounded. I have attempted using border-radius with 50%, as well as modifying the r ...

javascripthighcharts

Unable to find the import "@mui/x-charts/PieChart" in the file "src/components/Pie/Pie.jsx". Could the file be missing or spelled incorrectly?

I utilized the PieChart component in my pie.jsx file pie.jsx import { PieChart } from '@mui/x-charts/PieChart'; const Pie = () => { return ( <div> <PieChart series={[ { data: [ ...

javascriptreactjsinstallationmaterial-uipie-chart

How to convert two arrays into JSON strings and store them in variables using JavaScript

After receiving an ajax response in JSON format, my JavaScript code (within the ajax response success function) stringifies two arrays. Now, I need to assign the data from one curly bracket to two variables, and the data from the other curly bracket to ano ...

javascriptphpjqueryjsonajax

Can we pause and resume the progress bar using Javascript in conjunction with animationPlayState?

Looking for a way to control a progress bar script that runs for 180 seconds and then redirects the browser? Check out the code snippet below. I've added an onclick event to test pausing the progress bar. My goal is to pause, reset, and adjust the dur ...

javascripthtml

Updating the Navigation Bar and Theme in CRM Dynamics 2013 to Reflect Your Organization's Branding

In my CRM Dynamics 2013 setup, I am faced with a unique challenge. I need to customize the Organization navigation bar based on which organization is currently loaded. Specifically, I have two organizations - QA and PROD. When a user switches to the QA org ...

javascriptcssdynamics-crm-2013

Trouble with ScrollTo animation on div with adjustable offset top feature - seeking assistance

Having trouble navigating to the correct slide when clicking the right button on the navigation menu. Clicking the menu button displays a list of links. Clicking on a link for the first time will take you to the correct slide, but if you try clicking a dif ...

javascriptjqueryanimationvarscrolltop

The issue of memory leakage with ng-grid and real-time data

My intention is to utilize ng-grid for visualizing high-frequency real-time data, but I am encountering issues with a memory leak. Interestingly, the memory leak does not occur when I opt for a simple HTML table with ng-repeat. My tech stack includes node ...

javascriptangularjsmemory-leakssocket.iong-grid

Javascript Solution for Testing Palindromes in a Linked List

I recently researched the solution for a palindrome problem using Javascript. There is one particular line of code that I am struggling to comprehend, and I'm hoping someone can shed some light on it for me. Here is the code snippet in question: thi ...

javascriptsingly-linked-list

Displaying identical images repeatedly, alter just one using JQuery with each change

In the design, I have both gray and blue stars displayed multiple times on the page. What I'm trying to achieve is that when a user clicks on a gray star, it should switch to blue, and vice versa. However, the current issue I'm facing is that cli ...

javascriptjqueryhtml

A new sub-schema has been created in the JSON schema specifically tailored to a certain property

I needed to create a JSON schema with 3 fields: num, key1, and key2. The fields num and key1 are required, while the field key2 is only mandatory if key1 has a value of 'abc'. Below is the schema structure I came up with: schema = { type: &ap ...

javascriptnode.jsjsonschema

What is the best way to generate JSX from a callback function in ChartJS?

I am currently utilizing react-chartjs-2 within a React application and I am interested in incorporating JSX code into the Y axis. However, when attempting to do so, it only shows [Object object]. const chart = new Chart(ctx, { type: 'line', ...

javascriptreactjschart.jsreact-chartjs

Utilizing Node.js to iterate through arrays grouped by categories

Here is some data I need to work with [ [ '@test','1.2.6-unstable' ], [ '@test','1.3.2-unstable' ], [ '@test','1.4.6-unstable' ], [ '@test2','4.0.1-unstable' ], [ &ap ...

javascriptarraysfilterforeachreduce

It appears that when filtering data in Angular from Web Api calls, there is a significant amount of data cleaning required

It appears that the current website utilizes asp.net web forms calling web api, but I am looking to convert it to Angular calling Web api. One thing I have noticed is that I need to clean up the data. How should I approach this? Should I use conditional ...

javascriptasp.netangularjs

What is the method to retrieve the base host in AngularJS?

I need assistance with the following URL: https://192.168.0.10/users/#!/user-profile/20 When I use $location.host, it returns 192.168.0.10 However, I only want to extract https://192.168.0.10 What is the best way to achieve this? ...

javascriptangularjslocation

Resolving the issue of "Cannot GET" error with Node.js and Express

I have a class named Server in Server.js: const express = require('express'); class Server { constructor() { this.app = express(); this.app.get('/', function(req, res) { res.send('Hello World&apos ...

javascriptnode.jsexpress

notification badge indicating the quantity of fresh matches

My goal is to set up a batch notification using a badge in django. However, when I use the code below, the badge displays multiple badges without showing any numbers. I want the badge to indicate the number of posts that match a user's interests. I ...

pythondjangodjango-templatesdjango-views

Unable to locate the name 'require' in ANGULAR 2 environment

I am working on an Angular2 application that requires integration with a payment API. https://stripe.com/docs/quickstart When following the code sample in the Node.js section from the provided link, the instructions suggest using the following code struc ...

javascriptangulartypescriptrequire

Exploring the Django joint filter through ManyToMany connections

Here is the code from my models.py file: from django.db import models class Question(models.Model): question_text = models.CharField(max_length=200) pub_date = models.DateTimeField() def get_all(): return Question.objects.all() ...

pythondjangoorm