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
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 %}
Related
I am running a Django application where I receive the list of images and in my template, I have the following code for Carousel.
The issue is if I use this class "carousel-inner active" while iterating all images are set active and all images are shown on a single screen, if not if I remove active and just keep carousel-inner no image is shown
<div id="demo" class="carousel slide" data-bs-ride="carousel">
<!-- Indicators/dots -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
</div>
<!-- The slideshow/carousel -->
<div class="carousel-inner active">
{% for image in data.images %}
<div class="carousel-item active">
<img src="{{ image }}" alt="image 1" class="d-block" style="width:100%">
</div>
{% endfor %}
<!-- Left and right controls/icons -->
<button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
The answer was to use a for-loop container inside div
<div class="carousel-inner">
{% for image in data.images %}
<div class="carousel-item {% if forloop.counter == 1 %}active{% endif %}" id="slide{{ forloop.counter }}">
<img src="{{ image }}" class="d-block" style="width:100%">
</div>
{% endfor %}
</div>
In my Django project I have a view that has two paginators, and I can't identify where each of them comes from. They look like this:
I want to delete one of them, but I realized they are not working the same way.
The one above to the right always paginates 25 results (10 on the first, 10 on the second and 5 on the third page.
The one below seems to be dividing the whole queryset in sets of 25, which then the other paginator iterates over.
So, for example, if I have 100 rows, the paginator below says there's 4 pages. If I select the number 2 in that paginator, the paginator on the right iterates over those 25 rows, and not the whole queryset.
My view looks like this:
class ClientTableView(AdminPermissionsMixin, PagedFilteredTableView):
model = Client
table_class = ClientTable
template_name = 'users/client/client_table.html'
filter_class = ClientFilter
formhelper_class = ClientFormHelper
exclude_columns = ('actions',)
export_name = 'regiones'
def get_context_data(self, **kwargs):
context = super(ClientTableView, self).get_context_data(**kwargs)
context['allows_user_creation'] = self.request.user.users_permission == '2'
return context
def get_queryset(self, **kwargs):
qs = super(ClientTableView, self).get_queryset()
qs = qs.filter(allows_credit=False)
return qs
The template client_table.html looks like this:
{% extends "table.html" %}
{% load staticfiles %}
{% block users_active %}active{% endblock %}
{% block page_title %}Clientes{% endblock page_title %}
{% block table_title %}Lista de clientes{% endblock %}
{% block breadcrumb %}
{{ block.super }}
<li class="breadcrumb-item accordion active">Lista de clientes</li>
{% endblock %}
{% block table_actions %}
<a href="{% url "credit_client_list" %}" class="mb-sm btn btn-primary" style="margin-right: 10px">Clientes
cartera</a>
{% if allows_user_creation %}
<i class="fa fa-plus-square"></i>Agregar cliente
{% endif %}
{{ block.super }}
{% endblock %}
{% block js %}
<script src="{% static "js/table-spanish.js" %}"></script>
{% endblock %}
And table.html looks like this:
{% extends "base.html" %}
{% load django_tables2 crispy_forms_tags staticfiles %}
{% block content %}
<div class="card card-custom gutter-b">
<div class="card-header flex-wrap py-3">
<div class="card-title">
<h3 class="card-label">
<i class="fas {% block table_icon %}fa-list-alt{% endblock %}"></i>
{% block table_title %}{% endblock %}
</h3>
</div>
<div class="card-toolbar">
{% block table_actions %}
{% if object_list|length > 0 %}
<div class="dropdown dropdown-inline ml-2">
<button type="button" class="btn btn-light-primary font-weight-bolder dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<i class="fas fa-file-export"></i>Exportar
</button>
<!--begin::Dropdown Menu-->
<div class="dropdown-menu dropdown-menu-sm dropdown-menu-right" style="">
<!--begin::Navigation-->
<ul class="navi flex-column navi-hover py-2">
<li class="navi-header font-weight-bolder text-uppercase font-size-sm text-primary pb-2">
Elige una opción:
</li>
<li class="navi-item">
<a href="{% url 'export_pdf' "local" %}" class="navi-link">
<span class="navi-icon">
<i class="far fa-file-pdf"></i>
</span>
<span class="navi-text">PDF</span>
</a>
</li>
<li class="navi-item">
<a href="{% url 'export_xlsx' "local" %}" class="navi-link">
<span class="navi-icon">
<i class="far fa-file-excel"></i>
</span>
<span class="navi-text">XLSX</span>
</a>
</li>
</ul>
<!--end::Navigation-->
</div>
<!--end::Dropdown Menu-->
</div>
{% endif %}
{% endblock %}
</div>
</div>
<div style="display: inline-block">
{% block table_statistics %}{% endblock %}
</div>
<div class="card-body">
{% block body_table %}
<div class="row">
<div class="col-sm-12 col-md-12 mb-5">
<div id="datatable1_filter" class="dataTables_length">
{% crispy filter.form %}
{# <label>Buscar:<input type="search" class="form-control form-control-sm" placeholder="" aria-controls="DataTables_Table_0"></label>#}
</div>
</div>
</div>
<form action="{% block url_table_actions %}{% endblock %}" method="post" id="action">
{% csrf_token %}
{% block table %}
{% render_table table "django_tables2/bootstrap4.html" %}
{% endblock %}
<input type="hidden" name="command" id="command"/>
</form>
{% endblock %}
{% block table_bottom %}
{% endblock table_bottom %}
</div>
</div>
{% endblock %}
{% block js %}
{# <script src="{% static "js/datatables.bundle.js" %}"></script>#}
<script src="{% static "js/basic.js" %}"></script>
{% endblock %}
WHAT I KNOW
I identified that the paginator on the right, is added by the line <script src="{% static "js/table-spanish.js" %}"></script> in client_table.html, and if I remove that line, that paginator disappears, and the other one iterates correctly over the whole queryset.
However, I would really like to keep that line, since it also gives me other functionalities which I'd rather keep simple.
I'd like to identify what line or library could be responsible for the other paginator, the one below and, if possible, delete that one instead and let the paginator on the right iterate over the whole queryset.
I think you're right side pagination is datatables.js and the lower pagination is from Django-tables2. Django-tables2 is going to give you pagination for that by default, you can easily disable it.
https://django-tables2.readthedocs.io/en/latest/pages/pagination.html#disabling-pagination
Just add table_pagination = False
class ClientTableView(AdminPermissionsMixin, PagedFilteredTableView):
table_pagination = False
(django-filters' PagedFilteredTableView inherits from django-tables2' SingleTableView)
I'm working on a thumbnail carousel using bootstrap carousel. However I need to modify the data-slide behaviour as I'm pulling in the carousel items dynamically.
So what I'm trying to do is add an ID (something like 3672764 which will be the image ID) to the data-slide-to attribute and on clicking on the thumbnail it should slide to the slide that has the same ID.
This is the code:
<div id="carousel" class="carousel slide" data-ride="false">
<div class="carousel-inner">
<div class="item active srle" data-id="{{ image.id }}">
<img src="{{ featured_image | img_url: '1000x1000' }}" alt="{{ featured_image.alt | escape }}" data-product-featured-image>
<p>{{ featured_image.alt | escape }}</p>
</div>
{% for image in product.images offset:1 %}
<div class="item" data-id="{{ image.id }}">
<img src="{{ image.src | img_url: '1000x1000' }}" alt="{{ image.alt | escape }}">
<p>{{ image.alt | escape }}</p>
</div>
{% endfor %}
</div>
</div>
<div id="thumbcarousel" class="carousel slide thumbnails-carousel vertical" data-ride="false">
<div class="carousel-inner">
{% for image in product.images %}
<div class="grid__item carousel-padding">
<div data-target="#carousel" data-slide-to="{{ image.id }}" class="thumb"><img src="{{ image.src | img_url: '160x160' }}" alt="{{ image.alt | escape }}" data-product-single-thumbnail>
</div>
</div>
{% endfor %}
</div>
</div>
Any ideas how to do this?
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 4 years ago.
I have a Jekyll blog here and have implemented navigation between adjacent posts (next and previous) at the bottom of each post page. I wrote a quick script that adds a hover effect on each image.
Here is the script:
$(document).ready(function() {
// animate home page post links on hover
$('.post-summary').hover(
function() {
$(this).animate({opacity: 1}, 100);
},
function() {
$(this).animate({opacity: .7}, 100);
}
);
});
It works on the main page fine but when you go to another post page it does not work at all, even though it is still included in the page source.
Why is this?
Your actual _layouts/post.html layout as layout as layout...
In fact it's a layout problem.
Actually your layout layout doesn't load your script.
Change front matter for layout: "default" and deleted include header and include footer.
Your layout layout now reads like this :
---
layout: default
---
<article class="article">
<section class="article-cover">
<img class="header-image" src="{{ page.headerImage }}" alt="{{ page.headerAlt }}">
<span>
<h3 class="post-id">{{ page.postId }}:</h3>
<h1 class="post-title">{{ page.title }}</h1>
<h4 class="post-date">{{ page.date | date: "%Y.%m.%d" }}</h4>
</span>
</section>
<div class="content-wrapper">
<section class="article-body center" itemprop="articleBody">
{{ content }}
</section>
</div>
</article>
{% if page.next %}
{% assign next = page.next %}
{% endif %}
{% if page.previous %}
{% assign previous = page.previous %}
{% endif %}
<div class="next-previous">
<ul class="adjacent-list">
{% if page.next %}
<li>
<a class="post-link" href="{{ next.url | absolute_url }}">
<div class="post-summary"
style="background-image: url({{ next.headerImage }}); background-position: center; opacity: .7;">
<div class="title-container">
<h3 >{{ next.postId }}:</h3>
<h1>{{ next.title }}</h1>
</div>
</div>
</a>
</li>
{% endif %}
{% if page.previous %}
<li>
<a class="post-link" href="{{ previous.url | absolute_url }}">
<div class="post-summary"
style="background-image: url({{ previous.headerImage }}); background-position: center; opacity: .7;">
<div class="title-container">
<h3 >{{ previous.postId }}:</h3>
<h1>{{ previous.title }}</h1>
</div>
</div>
</a>
</li>
{% endif %}
</ul>
</div>
I have such html
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
{% for project in similarProjects %}
<div class="item {% if loop.first %}active{% endif %}">
<span >{{ project.title }}</span>
</div>
{% endfor %}
</div>
<article>
<div class="carousel-inner">
{% for project in similarProjects %}
<div class="item {% if loop.first %}active{% endif %}">
{{ project.text }}
</div>
{% endfor %}
</div>
</article>
I need to when i click on my navigation, turning the pages and page titles and text. Now if I click, for example, scroll to the right, just flipping the text and title remains the same. Please, help me solve this problem.
P.S.
My nav
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
Right side the same