ListView with alternate background image - django

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 %}

Related

If statement in my Django template...Is there a better way?

In my Django template: I'm trying to add an extra div around my for loop only if the length of the data being passed to the template is 3. This is what I'm trying right now but it seems like there could be better way than doing two if statements to check for the length:
{% if items|length == 3 %}
<div class='three-item-wrap'>
{% endif %}
{% for item in items %}
.......
{% endfor %}
{% if items|length == 3 %}
</div> //close .three-item-wrap
{% endif %}
you can try like that
{% if items|length == 3 %}
<div class='three-item-wrap'>
{% for item in items %}
.......
{% endfor %}
</div>
{% else %}
#another logic goes here
{% endif %}
if you want know more refer the docs django if tempalate
I think better way would be to make single if statement check. Just like this:
{% if items|length == 3 %}
<div class='three-item-wrap'>
{% for item in items %}
.......
{% endfor %}
</div>
{% else %}
{% for item in items %}
.......
{% endfor %}
{% endif %}
This way is better because of Django render engine, which firstly check if statements and then do for loop.
And if something crash in your code, div will be without closing tag </div>. Instead in my code there is no option for div to be without closing tag.

Liquid - if field contains content then display this html, else if empty then display nothing

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%}

Django template rendering extend tag incorrectly

I have three Django templates:
base.html:
user_links.html
user_detail.html
I want user_links.html to extend base.html. Next, I want user_detail.html to extend user_links.html and base.html.
Here's base.html:
<head>
<title>Cool App</title>
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/main.css" />
</head>
<body>
<h1>Cool App</h1>
<div class="navbar">
<p>
HOME |
{% if user.is_authenticated %}
LOGOUT
{% else %}
LOGIN
{% endif %}</p>
{% block content %}
{% endblock %}
{% block pagination %}
{% endblock %}</div>
Here's user_links.html:
{% extends "base.html" %}
Yellow
Pink
Green
{% block content %}
{% endblock %}
And here's user_detail.html
{% extends "user_links.html" %}
{% block content %}
<h2>{{ object.username }}'s Profile</h2>
{% if object.userprofile.bio %}
{{ object.userprofile.bio }}
{% endif %}
{% endblock %}
So when the browser renders user_detail.html, I want it to (i) show the stylesheet and navigation links from base.html, (ii) show the word Yellow, Pink, Green from user_links.html, (iii) and show the user's username and bio. But (ii) is not being rendered at all, though (i) and (iii) are correctly rendering.
How should the templates be set up so that I see (i), (ii) and (iii) in user_detail.html? Please advise.
Note: all three templates reside in the same directory. I'm on Django 1.5
If you extends a base.html template, no content not surrounded by {% block %} will be rendered at all.
You could create additional {% block precontnet %}{% endblock %} in base.html, and wraps Pink/Yellow/Red in user_links.html
Or you can put Pink/Yellow/Red in {% block content %} if user_links.html and use {{ block.super }} in user_detail.html
links.html
{% extends "base.html" %}
{% block content %}
Yellow
Pink
Green
{% endblock %}
user_detail.html
{% extends "user_links.html" %}
{% block content %}
{{ block.super }}
<h2>{{ object.username }}'s Profile</h2>
{% if object.userprofile.bio %}
{{ object.userprofile.bio }}
{% endif %}
{% endblock %}
Place div after </p> in base.html
<h1>Cool App</h1>
<div class="navbar">
<p>
HOME |
{% if user.is_authenticated %}
LOGOUT
{% else %}
LOGIN
{% endif %}</p>
</div>
Try this in user_links.html
{% extends "base.html" %}
{% block content %}
Yellow
Pink
Green
{% endblock %}

exclude first value from foreach django

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 %}

Unable to paginate object_list usng django-pagination

I am using django-pagination to paginate the a list of objects in my temlate. I have installed the app, added it in my project and added pagination.middleware.PaginationMiddleware in my settings.py file. But when I try to use it in my template the object_list is not being paginated. Here is my template code
{% extends "base.html" %}
{% load pagination_tags %}
{% autopaginate Questions %}
{% block title %}
Questions
{% endblock %}
{% block content %}
<div id="contentDiv">
{% for question in Questions %}
<div style="padding:5px 20px 5px 30px;">
<p class='question'><span id='style2'>Q
</span> {{ question.questiontext|safe }}
<span style= 'float:right;'><span style='font-size:12px; color:#099;'><a href="/question/type={{question.type}}"
style='font-size:12px; color:#099;'>{{question.type}}</a></span> <span style='color:#99C; font-size:12px;'>Level: </span><span style='color:#099;font-size:12px;'>{{question.level}}</a></span></span>
</p>
<h2 class='trigger1' ><a href='#'>Answer</a></h2>
<div class='toggle_container' >
<div class='block' style='background-color:#fff; '>
<p class='ans'> {{ question.answer|safe }} </p>
</div>
</div>
</div>
{% endfor %}
<div class="pagination" style="width:1000px; margin:auto; margin-bottom:20px;">
{% paginate %}
</div>
</div>
{% endblock %}
The list of objects is in the context_variable called Questions. Am I doing something wrong?
After a very long time I have been able to find out the error I was having with django-pagination. I had the canonical base template which I was extending on all pages.
In the documentation it is written that we require to put {% paginate %} after {% autopaginate object_list %} but no where it was written about the placement of {% autopaginate object_list %} itself.
I had title and body blocks in my template, and I was putting {% autopaginate object_list %} just below the {% extends "base.html" %} and as a result it was not working. I found that I had to put this statement inside the body block and now it is working absolutely fine.
Can you see the content of your pagination div if you write "Hello, I want a burger" or anything else in there?
Are you sure you have enough Questions to paginate? You could try something like:
{% autopaginate Questions 2 %}
to make sure that you'll be paginating at 2 questions/page.
Solved as Sachin told above:
I just moved {% load pagination_tags %}{% autopaginate list_objs 10 %}
inside {% block content %} statement (previously it was outside of it, so pagination was invisible. If no errors, but now pages - try to play with it (moving pagination block).