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>
Related
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?
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>
my website uses bootstrap grid system of col-sm-1/col-sm-9/col-sm-2. And I want to the whole background of col-sm-1 to be #F7F7F7. Thing is I want it to be like the far left side of reddit
but when I tried to manipulate my web, I see only the div that has content on col-sm-1 changes its color.
<div class="col-sm-1">
<div class="row-fluid">
<h5 class="tag-name"></h>
</div>
{% if user.is_authenticated %}
{% if following %}
<h5 class="tag-named"><em>follow</em></h5>
<div class="tagging">
<div class="tab-pane{% if active_tab == 'connections' %} active{% endif %}" id="connections">
{% for a in following %}
<li style="padding:0.01em; list-style-type: square;"><a id="following-link" href="{{ a.get_absolute_url }}">{{ a }}</a></li>
<br />
{% endfor %}
</div>
</div>
{% else %}
<p class="tag-named" style="font-size:12px; text-align:left;"><em>enter followingcommunity <i class="fa fa-folder-open"></i>
hello</em></p>
{% endif %}
{% else %}
<p class="tag-named" style="font-size:12px; text-align:left;"><em>now login</em>
</p>
{% endif %}
</div>
please ignore django template language {{}}, as this needs to be done with awesome css.
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.