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
Related
Im trying to put Pictures into a gallery using the batch filter with twig. I want there to be 2 columns next to eachother, but the code seems not to create the second column. Everything goes into a single column.
{% extends "_bildlayout" %}
{% block content %}
{% for entry in craft.entries.section('bilder').limit(16)|batch(8) %}
<div class="column">
{% for value in entry %}
{% set bild = value.bild.one() %}
<img src="{{ bild.url }}" alt="{{ value.title }}">
{% endfor %}
</div>
{% endfor %}
{% endblock %}
I have a Jinja macro defined as follows.
globalmacros.html
{% macro SUINavMenu(leftlist=[],logo="images/Logo_WEB_450_250.png") %}
<div class="ui pointing secondary menu">
<div class="item">
<img src="{{ static({{ logo }}) }}">
</div>
{% for item in leftlist %}
<a class="item" href="{{ item[1] }}">
{{ item[0] }}
</a>
{% endfor %}
</div>
{% endmacro %}
dashboard.html
{% from "macros/globalmacros.html" import SUINavMenu %}
{% block navigation %}
{{ SUINavenu(leftlist=[["Home","/home/"],["New Bill","/newbill/"]],
logo="images/web_logo.png") }}
{% endblock navigation %}
I am importing the macro defined in "globalmacros.html" into "dashboard.html" and trying to pass the logo location. However I am not sure how to do it.
In a non-macro version, the following code works.
<img src=" {{ static('images/logo_web.png') }} "></img>
The above code in "globalmacros.html" doesnt work as Jinja does not process an {{}} inside another {{}}
What is the work around for this?
I've strong supposition that <img src="{{ static(logo) }}"> should work. If it doesn't I would report this as a bug.
Here is my unfinished site that I have made with pelican using the pelican-bootstrap3 template: http://snoek.ddns.net/~oliver/mysite/
In the pelican-bootstrap3 README, it says can use the AVATAR variable in the pelicanconf.py file to point to an image. I've done this but now the picture of me is on every page, which is a little ridiculous. I would like it only on my "About" page.
In pelican-themes/pelican-bootstrap3/templates/includes I found an aboutme.html file with the following in it:
<div id="aboutme">
{% if AVATAR %}
<p>
<img width="100%" class="img-thumbnail" src="{{ SITEURL }}/{{ AVATAR }}"/>
</p>
{% endif %}
{% if ABOUT_ME %}
<p>
<strong>{{ _('About') }} {{ AUTHOR }}</strong><br/>
{{ ABOUT_ME }}
</p>
{% endif %}
</div>
Maybe it is this file that could be edited to specify that the avatar should only show on the "About" page? But I'm not sure how.
Change
{% if AVATAR %}
To
{% if page and page.title == 'About' and (ABOUT_ME or AVATAR) %}
I am very new to this, so any help would be much appreciated.
I am in the process of learning to code and am using templates as guides, and I am using this slideshow template to create a slideshow. But the issue is that, for example, there are four images on the slideshow, but only one link button, linking to only one url. However, I want to code it so that I can link a different url to each of the four images. Below are the codes...
{% if settings.show_block_lookbook %}
<div id="lookbook-section" class="section-full lookbook-section">
<div class="lookbook-wrapper">
<div class="lookbook-text">
<div class="lookbook-container">
<div class="container">
<div class="lb-text">
{% assign lbText1 = settings.block_lookbook_text_1 %}
{% assign lbText2 = settings.block_lookbook_text_2 %}
{% assign lbText3 = settings.block_lookbook_text_3 %}
{% assign lbText4 = settings.block_lookbook_text_4 %}
{% assign lbLink = settings.block_lookbook_link_1 %}
{% if lbText1 != blank %}<h3>{{ lbText1}}</h3>{% endif %}
<div class="bg-slider-arrows">
<span class="button-prev no-border"></span>
<span class="button-next no-border"></span>
</div>
{% if lbText2 != blank %}<h2>{{ lbText2 }}</h2>{% endif %}
{% if lbText3 != blank %}<p>{{ lbText3 }}</p>{% endif %}
{% if lbText4 != blank %}{{ lbText4 }}{% endif %}
</div>
</div>
</div>
</div>
</div>
<div class="lookbook-bg">
{% for i in (1..4) %}
{% assign newShow = 'block_lookbook_img_' | append: i %}
{% if settings[newShow] %}
{% assign newImage = 'block_lookbook_img_' | append: i %}
<div class="lookbook-item">
<img src = "{{ newImage | append: '.jpg' | asset_url}}" alt="" />
</div>
{% endif %}
{% endfor %}
</div>
</div>
{% endif %}
Simply said, what are the codes to put in if I want to make it so that I can add in a different url for each images. I have tried and tried but to no avail, so if someone can help with code samples, it would be much appreciated...
I want to arrange the following Figure1 content into horizon grid view, here content coming into vertical so, how to arrange into horizontal grid view, like Figure2
Figure1:
Figure2:
Here I only required the css class in div, Please tell the css class to arrange the grid into horizontal form.
Jinja2 Templates
_data_grid.html
This template, takes rows(number of data, like in the following Figure2 we have 5 data), and columns(Image Name, Type, Status, public, protected, Formate, size, Action), All these info comes from the database and django framework.
{% load i18n %}
{% with table.needs_form_wrapper as needs_form_wrapper %}
<div class="table_wrapper">
{% if needs_form_wrapper %}<form action="{{ table.get_full_url }}" method="POST">{% csrf_token %}{% endif %}
{% with columns=table.get_columns rows=table.get_rows %}
{% block grid %}
<grid id="{{table.slugify_name}}">
<div>
{% block grid_caption %}
<h3 class='table_title'>{{ table }}</h3>
{{ table.render_table_actions }}
{% endblock grid_caption %}
</div>
</br>
</br>
</br>
</br>
{% block grid_body %}
<div>
{% for row in rows %}
{{ row.render }}
{% empty %}
{{ table.get_empty_message }}
{% endfor %}
</div>
{% endblock grid_body %}
</grid>
{% endblock grid %}
{% endwith %}
{% if needs_form_wrapper %}</form>{% endif %}
</div>
{% endwith %}
_data_grid_cell.html
This template is used to fill the content,
{% if cell.inline_edit_mod and cell.update_allowed %}
{% else %}
{% if cell.inline_edit_available and cell.update_allowed %}
{% else %}
<ul>{{ cell.value }}</ul>
{% endif %}
{% endif %}
If you want to code the css your self flexbox will be what you are looking for. But I will be easier and probably cleaner to use css frameworks like Bootstrap, your code should look somthing like this, then you can add django template tags:
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-4"><!--block 1--></div>
<div class="col-sm-4 col-md-4"><!--block 2--></div>
<div class="col-sm-4 col-md-4"><!--block 3--></div>
<div class="col-sm-4 col-md-4"><!--block 4--></div>
</div>
</div>
Check (Bootstrap Grid) for more details and explanation for the css classes.