Currently I have only been able to get 1 image with this code to be active on the carousel using Django. However I want to display 3 images.
<div class="carousel-inner">
{% for item in page.plant_images.all %}
{% image item.image fill-10000x10000 as img %}
<div class="carousel-item {% if forloop.counter == 1 %}active{% endif %}">
<img src="{{ img.url }}" class="d-block w-100"
alt="{{ img.alt }}">
<div class="imageCounter">
<img src="/media/original_images/camera.png" id="display">
{{ forloop.counter }} of {{ page.plant_images.all.count }}
</div>
</div>
{% endfor %}
</div>
How am I able to manipulate this so i can get the extra images?
Related
I am currently working on a django blog. However, I am experiencing some difficulties with the size of the post thumbnails. Here's a picture:
What I marked in yellow is how the image should be filling the space. The width is fine, but the heigh isn't working well as you can see.
Here's the code:
{% extends 'base.html' %}
{% load static %}
{% block content %}
<style>
img {
height: 100%;
width: 100%;
}
</style>
<!-- Post-->
{% for obj in object_list %}
<div class="row d-flex align-items-stretch">
{% if not forloop.first and not forloop.last %}
<div class="image col-lg-5"><img src="{{ obj.thumbnail.url }}" alt="..."></div> #Here's the image
{% endif %}
<div class="text col-lg-7">
<div class="text-inner d-flex align-items-center">
<div class="content">
<header class="post-header">
<div class="category">
{% for cat in obj.categories.all %}
{{ cat }}
{% endfor %}
</div>
<a href="{{ obj.get_absolute_url }}">
<h2 class="h4">{{ obj.title }}</h2>
</a>
</header>
<p>{{ obj.overview|linebreaks|truncatechars:200 }}</p>
<footer class="post-footer d-flex align-items-center"><a href="#" class="author d-flex align-items-center flex-wrap">
<div class="avatar"><img src="{{ obj.author.profile_picture.url }}" alt="..." class="img-fluid"></div>
<div class="title"><span>{{ obj.author }}</span></div></a>
<div class="date"><i class="icon-clock"></i> {{ obj.timestamp|timesince }} ago</div>
<div class="comments"><i class="icon-comment"></i>{{ obj.comment_count }}</div>
</footer>
</div>
</div>
</div>
{% if forloop.first or forloop.last %}
<div class="image col-lg-5"><img src="{{ obj.thumbnail.url }}" alt="..."></div> #Here's the image
{% endif %}
</div>
{% endfor %}
</div>
</section>
It is <img>'s default behaivor to fill the whole width and height, often losing its aspect ratio.
The fact that it did not happen in your case, most likely is because you set object-fit: contain somewhere in your css.
You either remove object-fit: contain setting, or you can use
img {
height: 100%;
width: 100%;
object-fit: fill !important; # fill is the default value.
}
I have a Django template render result and images for search of cars. as follow:
{% for item in result %}
<li class="result-row">
<!-- image box -->
<span>
<a href="#" class="result-image-act" >
{% for image in item.images_cars_set.all %}
{% if image.car_images_exists %}
{% if image.car_images.0 %}
<img class="active" src=" {{image.car_images.url}}">
{% endif %}
{% if not image.car_images.0 %}
<img src=" {{image.car_images.url}}">
{% endif%}
{% endif %}
{% empty %}
<img src="{% static 'path/to/default image' %}" class="active">
{% endfor %}
</a>
<span class="embed-result-price">{{item.price}}</span>
<div class="swipe-wrap">
<div class="swipe-wrap-lef">
<span class="move" >
<div class="swipe-prev">
<p><</p>
</div>
</span>
</div>
<div class="swipe-wrap-rig">
<span class="move" >
<div class="swipe-next">
<p>></p>
</div>
</span>
</div>
</div>
</span>
The code is working fine except that I want to find the first image and put it in different img tag where it will take class="active". This class is used in javascript code to swipe all images to left or right. I tried to use {% if image.car_images.0 %} and {% if image.car_images.first %} to find first image but not success. what I get is all images without class of active. any help or suggestion.
You can use {% if forloop.counter0 == 0 %} do something {% endif %} or
{% if forloop.counter == 1 %} do something {% endif %} to do something for the 1st item when iterating with a {% for %} template tag.
More info: https://docs.djangoproject.com/en/2.1/ref/templates/builtins/#for
Thus your code should be something like
<a href="#" class="result-image-act" >
{% for image in item.images_cars_set.all %}
{% if forloop.counter == 1 %}
<img class="active" src=" {{image.car_images.url}}">
{% else %}
<img src=" {{image.car_images.url}}">
{% endif %}
{% empty %}
<img src="{% static 'path/to/default image' %}" class="active">
{% endfor %}
</a>
Im working in a project and currently I have a data file that display 24 clients in a page that im taking for a data file
{% for client in site.data.clients %}
<li>
<a href="{{client.URL}}" target="_blank">
<img src="{% asset_path {{client.image}} %}"
alt="{{ client.alt }}">
</a>
</li>
{% endfor %}
I would like to implement a carousel that display 12 items in one slide (and when clicked the arrow) display the other 12 items.
"Two slides with 12 elements each"
I've tried to implement that in the owl carousel but somehow is inserting me all the items in the first element of the first slide. still trying to find a way to split all the elements in two slides like the picture.
what i have implemented so far:
<div class="testi-service owl-carousel owl-theme ">
{% for client in site.data.clients %}
{% if forloop.index > 24 %}
{% assign slidenum = 2 %}
{% else %}
{% assign slidenum = 1 %}
{% endif %}
<div class="owl-item">
<div class="oc-item slide{{ slidenum }}">
<a href="{{client.URL}}" target="_blank">
<img src="{% asset_path {{client.image}} %}" alt="{{ client.alt }}">
</a>
</div>
</div>
{% endfor %}
</div>
</div>
This can be achieved with the following Liquid:
{% for client in site.data.clients %}
{% if forloop.index > 12 %}
{% assign slidenum = 2 %}
{% else %}
{% assign slidenum = 1 %}
{% endif %}
<li class="slide{{ slidenum }}">
<a href="{{client.URL}}" target="_blank">
<img src="{% asset_path {{client.image}} %}" alt="{{ client.alt }}">
</a>
</li>
{% endfor %}
And this css:
.slide2 {display:none;}
You can control the carousel with the following jQuery:
setInterval(function(){
$("[class^='slide']").toggle();
}, 3000);
Somehow it worked like this. just trying to fix the resizing and responsive problem at the moment
<div class=" col-md-9 clients side padding-content">
<div class="client-carousel">
<div class="container">
<div class="owl-item">
<div class="oc-item">
<ul class="clients-grid grid-6 nobottommargin clearfix">
{% comment %}
`site.data.clients` defined in `_data/clients.yml`
{% endcomment %}
{% for client in site.data.clients %}
{% if forloop.index > 24 %}
{% assign slidenum = 2 %}
{% else %}
{% assign slidenum = 1 %}
{% endif %}
<li class="slide{{ slidenum }}">
<a href="{{client.URL}}" target="_blank">
<img src="{% asset_path {{client.image}} %}" alt="{{ client.alt }}">
</a>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
<div class="container">
<div class="owl-item">
<div class="oc-item">
<ul class="clients-grid grid-6 nobottommargin clearfix">
{% comment %}
`site.data.clients` defined in `_data/clients.yml`
{% endcomment %}
{% for client in site.data.clients %}
{% if forloop.index > 24 %}
{% assign slidenum = 2 %}
{% else %}
{% assign slidenum = 1 %}
{% endif %}
<li class="slide{{ slidenum }}">
<a href="{{client.URL}}" target="_blank">
<img src="{% asset_path {{client.image}} %}" alt="{{ client.alt }}">
</a>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
I'm trying to make a image gallery template in Django that will pull in new images when they are added to the blog. What I'm wanting are three or four columns of thumbnail sized images in a grid.
So far my template looks like this:
{% for image in images %}
{% if forloop.first %}
<tr>
{% endif %}
<td>
<img src="{{ image.image.url }}" class="img-responsive img-thumbnail" width="304" height="236"/>
</td>
{% if forloop.last %}
</tr>
{% else %}
{% if forloop.counter|divisibleby:"4" %}
</tr><tr>
{% endif %}
{% endif %}
{% endfor %}
However this won't allow me to manipulate the images as easily as I would like - I was hoping to use Bootstraps columns but each time I try that it gives me the images in a single column.
Why not use the following for 3 column grid?
(change col-md-4 to col-md-3 for 4 columns)
<div class="container">
<div class="row">
{% for image in images %}
<div class="col-md-4">
<a href="{{ image.get_absolute_url }}"> <img src="{{
image.image.url }}" class="img-responsive img-thumbnail" width="304" height="236"/>
</a>
</div>
{% endfor %}
</div>
</div>
I would like to do this inside a for loop
{% if count % 2 == 0 %}
<div class="col-md-6"><!--start block-->
<div class="item-small gutter-bottom">
<img src="{{ item.image_url }}"/>
<div class="item-title">{{ item.name }}</div>
</div>
{% else %}
<div class="item-small gutter-bottom">
<img src="{{ item.image_url }}"/>
<div class="course-title">{{ item.name }}</div>
</div>
</div><!--end block-->
{% endif %}
where I put an additional div wrapping every two items. However, when rendered in HTML, the closing tags went all wrong and the output is not pleasant.
You should use twig's batch method instead.
{% for row in items|batch(2) %}
<div class="col-md-6"><!--start block-->
{% for item in row %}
<div class="item-small gutter-bottom">
<img src="{{ item.image_url }}"/>
<div class="item-title">{{ item.name }}</div>
</div>
{% endfor %}
</div><!--end block-->
{% endfor %}
I'd do this in this way (I put an own example for the loop):
{% for i in 0..9 %}
{% if loop.index0 % 2 == 0 %}
<div class="col-md-6"><!--start block-->
<div class="item-small gutter-bottom">
<img src="{{ item.image_url }}"/>
<div class="item-title">{{ item.name }}</div>
</div>
{% else %}
<div class="item-small gutter-bottom">
<img src="{{ item.image_url }}"/>
<div class="course-title">{{ item.name }}</div>
</div>
</div><!--end block-->
{% endif %}
{% endfor %}
You need to take care about the indexes of the loop, because if the 'if' code is not rendered first, your rendered html wouldn't be good, and the same occurs if in the last iteration the 'else' code is not rendered.