Hi I have a shopping cart site powered by django
in this i got a thumbnail images of product by using below code
{% for image in images %}
<li>
<a rel="zoom-id:zoom;" rev="{{ MEDIA_URL }}{% thumbnail image.file 510 700 %}" class="MagicThumb-swap" href="{{ MEDIA_URL}}{% thumbnail image.file 2500 3500 %}">
<img alt="{{ image.description }}" src="{{ MEDIA_URL }}{% thumbnail image.file 75 100 %}">
</a>
</li>
{% endfor %}
which has a multile images
image1.jpg
image2.jpg
image3.jpg
i need to show the first image or value from the foreach.
As I understand you want to show only 1st image from images.
So you can use slice filter to cut your list into 1 item and use that, like
{% for image in images|slice:"1" %}
{# your code #}
{% endfor %}
Or you can use forloop.first and have that code, like
{% for image in images %}
{% if forloop.first %}
{# your code #}
{% endif %}
{% endfor %}
Update:
To exclude first and show remaining
{% for image in images %}
{% if forloop.first %} {# Do nothing #}
{% else %}
{# your code #}
{% endif %}
{% endfor %}
Related
I have a list view in a modal window, once the user chooses the option of the select element, the pagination changes the url queryset (?p=<page_number>), although, in a normal list view there is no issue,as it changes the url, in a modal, it changes the entire page's location (URL address), which of course causes the lost of changes in the main page (document form), I just need the modal list to be changed by the number of pagination-page.
I have searched and read almost all documentations pages related to pagination of a list view using Django, however I was unable to find the solution.
here is the modal pagination template code (see the comments that indicates not working parts):
{% load wagtailadmin_tags %}{# Changed by HH #}
{% if linkurl %}{% url linkurl as url_to_use %}{% endif %}
{% if items.has_previous or items.has_next %}
<div class='pagination center' aria-label="Pagination">
<!-- this is working -->
{% if items.has_previous %}<div class="l_arrow previous">Previous</div>{% endif %}
<p>{% with pr=items.paginator.page_range page_num=items.number total_pages=items.paginator.num_pages %}
Page {{ page_num }} of {{ total_pages }}
<!-- this is NOT working -->
<select onchange="gotopage(this)" name="pg_selector" title="pg_selector" id="pg_selector" disabled>
{% for i in pr %}
<option value="{{ url_to_use }}{% querystring p=i %}" data-page="{{ i }}" {% if i == page_num %} selected {% endif %}>{{i}}</option>
{% endfor %}
</select>
{% endwith %}
</p>
<!-- this is working -->
{% if items.has_next %}<div class="r_arrow next">Next</div>{% endif %}
</div>
{% endif %}
Edit: Temporary Workaround by using text input (please do NOT Consider this as an answer)
{% load wagtailadmin_tags %}{# Changed by HH #}
{% if linkurl %}{% url linkurl as url_to_use %}{% endif %}
<script>
function goto_pg(){
let pg_selector_el = document.getElementById("pg_selector");
pg_selector_el.href = `{{ url_to_use }}?p=${document.getElementById("pg").value}`;
pg_selector_el.click();
}
</script>
{% if items.has_previous or items.has_next %}
<div class='pagination center' aria-label="Pagination">
<!-- this is working -->
{% if items.has_previous %}<div class="l_arrow previous">Previous</div>{% endif %}
<p>
{% with pr=items.paginator.page_range page_num=items.number total_pages=items.paginator.num_pages %}
Page <input id="pg" type="text" value="{{page_num}}" onkeyup="goto_pg()" > of {{ total_pages }}
{% endwith %}
</p>
<!-- this is working -->
{% if items.has_next %}<div class="r_arrow next">Next</div>{% endif %}
</div>
{% endif %}
I know that I can register my model as a Django model and add an image there but I need to save a pages' tree and identify my pages by an image on a listing page. To make a long story short, I need to show images on the listing page in admin.
Create a template in templates/wagtailadmin/pages/listing/_page_title_explore.html
{% load i18n wagtailadmin_tags %}
{# The title field for a page in the page listing, when in 'explore' mode #}
<div class="title-wrapper">
{% if page.sites_rooted_here.exists %}
{% if perms.wagtailcore.add_site or perms.wagtailcore.change_site or perms.wagtailcore.delete_site %}
{% endif %}
{% endif %}
{% if page_perms.can_edit %}
{{ page.get_admin_display_title }}
{% else %}
{{ page.get_admin_display_title }}
{% endif %}
{% block pages_listing_title_extra %}
{% if page.youtube_video_id %}
<img src='https://i.ytimg.com/vi/{{page.youtube_video_id}}/mqdefault.jpg' width='150'/>
{% endif %}
{% endblock pages_listing_title_extra %}
{% include "wagtailadmin/pages/listing/_privacy_indicator.html" with page=page %}
{% include "wagtailadmin/pages/listing/_locked_indicator.html" with page=page %}
</div>
<ul class="actions">
{% page_listing_buttons page page_perms %}
</ul>
Pay attention on {% block pages_listing_title_extra %}, for example, you can add your variable from a model to this block.
Keep in mind that the admin template has been overwritten, and after upgrading the Wagtail core you may not see some new features.
If you just want to add image, you don't need to override entire page title explore template. You can use just pages_listing_title_extra block.
Create file templates/wagtailadmin/pages/listing/_page_title_explore.html with content:
{% extends "wagtailadmin/pages/listing/_page_title_explore.html" %}
{% load wagtailimages_tags %}
{% block pages_listing_title_extra %}
{% image page.image fill-100x200 %}
{% endblock pages_listing_title_extra %}
This should not break with new version of Wagtail (only if this template block would be removed/renamed).
This code doesn't work! I want to show an red image and then a blue image. If I have 5 object the the list should be: Red Blue Red Blue Red.
I want to do this with 2 colours. I tried the following code:
{% extends './base.html' %}
{% block content %}
{% for object in object_list %}
{% if forloop.counter0 % 2 ==0 }
<img src="img/red.jpg">
<p> {{object.title}} </p>
{% else %}
<img src="img/blue.jpg">
<p> {{object.title}} </p>
{% endif %}
{% endfor %}
{% endblock content %}
You can't use % in templates. Django has a divisibleby filter you could use.
However, it would be better to use the cycle tag:
{% for object in object_list %}
<img src="{% cycle 'image/red.jpg' 'image/blue.jpg' %}">
<p>{{object.title}}</p>
{% endfor %}
Django templates don't have modulus %, they use divisibleby:2
So your code would be this instead:
{% if forloop.counter0|divisibleby:2 %}
I have a LI list which contains an image in each LI that is automatically pulled in from my CMS (my cms has fields that contain the img src).
There are 10 images (10 li's). I need to use Liquid so that if the field DOES NOT contain any img src then display NOTHING. Otherwise if it does contain content then display the html. e.g.
{% if imagefield1 == imgsrc (e.g. /images/steve.jpg) %}
<li><img src="imagefield1"></li>
{% else %}
{% endif -%}
{% if imagefield2 == imgsrc %}
<li><img src="imagefield2"></li>
{% else %}
{% endif -%}
etc.
Can anyone help me structure my liquid if statement?
{% for i in (1..10) %}
{% capture img_src %}imagefield{{ i }}{% endcapture %}
{% if img_src == imgsrc %}
<li>
<img src="{{ img_src}}">
</li>
{% endif %}
{% endfor%}
Im trying to implement commenting on my site using the comments framework. I've followed the documentation:
https://docs.djangoproject.com/en/dev/ref/contrib/comments/
https://docs.djangoproject.com/en/dev/ref/contrib/comments/example/
My template looks like:
{% extends "pbase.html" %}
{% load comments %}
{% block bcontent %}
<div class="main">
<< back
<!-- Image -->
<ul>
{% if image.title %}
<div class="title">{{ image.title }}</div>
{% endif %}
<ul>
<img border="0" alt="" src="{{ media_url }}{{ image.image.name }}" width="900" />
</ul>
</ul>
{% load comments %}
{% get_comment_count for photo.image object_pk as comment_count %}
<p>{{ comment_count }} comments have been posted.</p>
{% render_comment_list for photo.image object_pk %}
{% render_comment_form for photo.image object_pk %}
</div>
{% endblock %}
On my page the number of comments is show but not the comments themselves or the form. What am I missing?
Thanks
photo.image should be just image. I know image is correct because you use it elsewhere in the template, and if it were wrong, you'd notice.