First time posting so forgive me in advance.
I'm building out an image gallery. I'm using Twig. Currently my Slick carousel gallery counter is displaying "1 / 4" items in my gallery. That's all kosher. Where I'm stumped is I'm trying to append a "0" so that the slide display reads "01/04".
Here is the HTML/Twig:
<div class="nav-controls">
{% if gallery %}
<div class="gallery-count"><span id="current-slide">1</span> / {{ gallery.images|length }}</div>
{% endif %}
<section role="navigation" class="gallery-arrows{% if gallery %} active{% endif %}">
<div class="buttons">
<div class="prev"></div>
<div class="next"></div>
</div>
</section>
</div>
Is there not a way to do this with Twig?
Thank you!
If you fancy printf syntax you can use Twig's format:
<div class="gallery-count">
<span id="current-slide">01</span> / {{ "%02d"|format(gallery.images|length) }}
</div>
Related
I have different styles of heading in a 5- column layout newspaper template. I want to apply different css to the title of each column. The queryset is the {% block content %}How can I iterate over the queryset objects and apply different css to each {{ post.title }} variable? Note: html truncated for brevity.
<div class="content">
<div class="columns">
{% block content %}
{% endblock %}
</div>
<div class="column">
<div class="head">
<span class="headline hl1">May the Force be with you</span>
<p><span class="headline hl2">Let go your conscious self and act on instinct</span></p>
</div>
</div>
</div>
i think that {% cicle %} will help you.
{% for o in some_list %}
<div class="{% cycle 'class1' 'class2' 'class3' %}">
...
</div>
{% endfor %}
more about built-in template tags you could read
https://docs.djangoproject.com/en/3.1/ref/templates/builtins/#cycle
As for now I am following a video to create a blog with django. But, I have problem attaching the title, content, author and date on the template which I had downloaded from colorlib. I used the method below in the index.html file but they do now show:
{% extends 'base.html' %}
{% load static %}
{% block content %}
{% for post in object_list %}
<div class="site-section">
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="row">
<div class="col-12">
<div class="section-title">
<h2>Editor's Pick</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="post-entry-1">
<img src="{% static 'images/img_h_1.jpg' %}" alt="Image" class="img-fluid">
<h2></h2>
<p>{{ obj.overview }}</p>
<div class="post-meta">
<span class="d-block">
{{ obj.author.user.username }} in {{ cat }}</span>
<span class="date-read">{{ obj.timestamp|timesince }} ago<span class="mx-1">•</span> 3 min read <span class="icon-star2"></span></span>
</div>
</div>
</div>
{% endfor %}
Assuming object_list is the list of posts. You instantiated the loop variable as post. Therefore post is the variable representing a post instead of obj which you try to access. So replace everywhere you have obj with post or you can make the loop variable obj instead. Either way
Since you are iterating through each post from the list of posts, so to access the value of each post, you should use {{ post.title }} to show the title of the post, {{ post.author.username }} to show the username of the author of the post, and so on.
I've got a few images, and I want to make a carousel of that.
But I do not want to loop over the images twice.
Can this be done?
My code is:
<div id="main-slider">
{% for image in images %}
<img src="/images/{{ image.url }}"/>
{% endfor %}
</div>
<div id="main-slider-nav">
{% for image in images %}
<img src="/images/{{ image.url }}"/>
{% endfor %}
</div>
As you can see, the loop is in there now twice. Is there a nice way to not do this?
If you prefer, you can build a string with the dynamic values (the lists of image tag) then use in the container div, as example:
{%set accumulator = '' %}
{% for image in images %}
{%set accumulator = accumulator ~ '<img src="/images/'~image.url~'"/>' %}
{% endfor %}
<div id="main-slider">
{{ accumulator|raw }}
</div>
<div id="main-slider-nav">
{{ accumulator|raw }}
</div>
Here a working twigfiddle sample
Hope this help
I have a working solution for a template that allows for optional sidebars. Depending on the options selected by the user; significant DOM manipulations occur.
The working solution is unnecessarily large and features some code duplication. It also doesn't extend nicely.
I'm looking for a far more generic solution. One that allows for easier extending or abstracting so as to not have to repeat myself for every page that features a sidebar.
The Working Solution
{% extends "app/base.html" %}
{% load wagtailcore_tags %}
{% block content %}
{% if self.sidebar == "left" %}
<div class="row">
<div class="4u 12u(mobile)">
{% include "app/includes/sidebar.html" with sidebar_items=self.sidebar_items.all %}
</div>
<div class="8u 12u(mobile) important(mobile)">
<article class="box post">
{% include "app/includes/banner.html" with feed_image=self.feed_image only %}
{{ self.body|richtext }}
{% include "app/includes/related_links.html" with related_links=self.related_links.all only %}
</article>
</div>
</div>
{% elif self.sidebar == "right" %}
<div class="row">
<div class="8u 12u(mobile)">
<article class="box post">
{% include "app/includes/banner.html" with feed_image=self.feed_image only %}
{{ self.body|richtext }}
{% include "app/includes/related_links.html" with related_links=self.related_links.all only %}
</article>
</div>
<div class="4u 12u(mobile)">
{% include "app/includes/sidebar.html" with sidebar_items=self.sidebar_items.all %}
</div>
</div>
{% else %}
<article class="box post">
{% include "app/includes/banner.html" with feed_image=self.feed_image only %}
{{ self.body|richtext }}
{% include "app/includes/related_links.html" with related_links=self.related_links.all only %}
</article>
{% endif %}
{% endblock %}
{% block content %} is first defined here in app/base.html:
<div id="main-wrapper">
<div class="container">
<!-- <article class="box post"> -->
{% block content %}{% endblock %}
<!-- {% include 'app/includes/prev_next.html' %} -->
<!-- </article> -->
</div>
</div>
And sidebar.html looks like this:
{% load wagtailimages_tags %}
{% for sidebar_item in sidebar_items %}
<section class="box">
{% image sidebar_item.image original as img %}
<img src="{{ img.url }}" alt="" />
<header>
<h3>{{ sidebar_item.title }}</h3>
</header>
<p>{{ sidebar_item.body }}</p>
{% if sidebar_item.button_text %}
<footer>
{{ sidebar_item.button_text }}
</footer>
{% endif %}
</section>
{% endfor %}
My initial attempt at generalising it was to try to do all of the conditionals in app/base.html but I faced issues when it came to optionally the location of {{ block content }}.
Any help greatly appreciated.
If the condition to decide type of sidebar are being decided and supplied by the views.py function serving the page, then the best approach would be to simply make different template for each different page.
This solution sounds overly simple, but if correctly modularized(in terms of all the common code being kept in a basefile and being extended as and when needed), this would be the best approach. Even though the number of other templates might increase, it will give shorter load times because of smaller HTML snippets.
In case you do not want the conditional decisions being handled by views.py , you can alternatively use AJAX, and asynchronously change the template being viewed without causing a reload.
Hope this helps!
I am trying to grasp the usage of Django's cycle template tag. My layout in my html is 3 post from right to left and 5 posts from top to bottom. I used the cycle tag so that right after the sixth post a horizontal bar goes under the whole width of my row. I want to put ads there. So it looks like this
123
456
---
123
456
789
I kind of figured it out after playing around with the code for a while. My dilemma now is I want to put the code for my ad where the bar is. but the code is to long and if I go to a new line, even if I use this \ it still scrambles my html. The way I have it now is like this
{% block content %}
<div class="row" id="scheme">
{% for post in posts %}
<div class="col-xs-12 col-md-4" id="split">
<div class="thumbnail thumb">
<h6 id="date">{{ post.publish|date }}</h6>
{% if post.image %}
<img src="{{post.image.url}}" class="img-responsive post">
{% elif post.image_url %}
<img src="{{post.image_url}}" class="img-responsive post">
{% else %}
<p>upload an image</p>
{% endif %}
<div style="border-bottom: thin solid lightslategray; padding-bottom: 15px;"></div>
<div class="caption" id="cap">
<a href="{{ post.get_absolute_url }}">
<h5 class="post-title" id="title">{{post.title}}</h5>
</a>
{% if user.is_authenticated %}
<p>
delete
edit
</p>
{% endif %}
</div>
</div>
</div>
{% cycle "" "" "" "" "" "<div id='adspace' class='col-xs-12 col-lg-12' style='height:200px; background-color: #5b80b2; margin-bottom: 60px'></div>" "" "" "" "" "" "" "" "" "<div class='col-sm-12'></div></div><div class='row'>" %}
{% endfor %}
</div>
{% include "pagination.html" with page=posts %}
{% endblock content%}
The cycle template is way to long. I'm hoping there is a more sophisticated way of doing this. What is a better way to use the cycle tag or rather a shorter way? I'm open to any suggestions. Thanks all.
To insert something special after the sixth item in the loop, just use the forloop counter (docs):
{% for post in posts %}
... Post content here
{% if forloop.counter == 6 %}
<div id='adspace' class='col-xs-12 col-lg-12' style='height:200px;
background-color: #5b80b2; margin-bottom: 60px'></div>
{% endif %}
{% endfor %}
Similarly you can add other content at other specific counter points in your loop.