I want to select first image of an object property set. I created a Property Model with a Foreign Key to an PropertyImages model. How do I access the first image of the property object_set.all in the template. I don;t want to do it in the view function since this should be in the base.html file.
the code:
{% for property in properties %}
<div
style="background-image: url('{{property.propertyimages_set.all|first.url}}'); background-size: 100% 100%; "
;
class="tm-row-featured"
>
<div class="featured-content">
<p><span>Name: </span>{{property.property_name}}</p>
<hr>
<p><span>Type: </span>{{property.property_type}}</p>
<p><span>Price: </span>₦{{property.price}}</p>
<p><span>Location: </span>{{property.property_state}}</p>
<p><a href="{% url 'property_details' property.property_slug %}">More info
>>></a></p>
</div>
</div>
{% endfor %}
You can use forloop.first to check if the loop is executed first and then use an appropriate if tag to display the image. Please see the for loop related variables from the link below:
Ref: https://docs.djangoproject.com/en/4.0/ref/templates/builtins/#for
{% if forloop.first %}
# Show first image here
{% endif %}
Try this:
Ref
<div style="background-image: url('{{properties.0.propertyimages_set.url}}'); background-size: 100% 100%;"; class="tm-row-featured">
<div class="featured-content">
<p><span>Name: </span>{{properties.0.property_name}}</p>
<hr>
<p><span>Type: </span>{{properties.0.property_type}}</p>
<p><span>Price: </span>₦{{properties.0.price}}</p>
<p><span>Location: </span>{{properties.0.property_state}}</p>
<p>More info >>></p>
</div>
</div>
The solutions above didnt work for me. I finally found a way around the solution thus:
{% for property in properties %}
<div
{% with property.propertyimages_set.all|first as photo %} style="background-image: url('{{photo.image.url}}'); background-size: 100% 100%; "
; {% endwith %}
class="tm-row-featured"
>
<div class="featured-content">
<p><span>Name: </span>{{property.property_name}}</p>
<hr>
<p><span>Type: </span>{{property.property_type}}</p>
<p><span>Price: </span>₦{{property.price}}</p>
<p><span>Location: </span>{{property.property_state}}</p>
<p>More info >>></p>
</div>
</div>
{% endfor %}
</div>
Related
I have a comment system for my website and I pass all the comments with the relevant post but when I loop through the comments and show each comment it's children it shows the children after it as independent comments.
{% load custom_tags %}
{% for comment in page_obj %}
<div class="comments">
<h6>
<a href="{% url 'main:creator' comment.publisher.id %}">
{{comment.publisher.name}}
</a>
</h6>
<span>{{ comment.created_on}}</span>
<div>
{{comment.text}}
<br>
</div>
{% if comment.children %}
<ul style="margin-right: 5%;">
{% include "post/comment.html" with page_obj=comment.children %}
</ul>
{% endif %}
</div>
{% endfor %}
You confused margin-right and margin-left. Setting margin-right: 5%; wouldn't add the right margin which wouldn't move the child comments. You need to replace margin-right: 5%; with margin-left: 5%;.
The other possibility is related to peculiarities of parent div. 5% might not works in some situations. You can try to replace it with something like 50px in case the previous option doesn't works.
I have a Lecture model which contains lectures. For each lecture I have a title and a content and eventually some files. I was trying to make that when somebody presses on a title, the title and the content will display under, but only for that lecture. Problem is that if I use a class, all lectures will be shown and if I use and id only the first one will be shown. How should I do this ?
$('#title').click(function () {
$('#lecture-hide').toggle();
});
{% for c in category.list %}
<div id="title">
<p>Lecture {{ forloop.counter }}: <span>{{ c.lecture_title }}</span>
</p>
<br>
</div>
<div id="lecture-hide" style="display: none;">
<br>
<li><h5>{{ c.lecture_title }}</h5></li>
<li><p>{{ c.content }}</p></li>
{% for file in c.files.all %}
{% if file.files %}
{% if forloop.first %}
<p id="files">Lecture files:</p>
{% endif %}
<li><a class="media"
href='{{ MEDIA_URL }}{{ file.files.url }}'><i
class="fas fa-download"></i>{{ file.files.name }}</a></li>
{% endif %}
{% endfor %}
<br>
</div>
{% endfor %}
Maybe you can use next selector in your jQuery code like this:
$('div.title').click(function () {
$(this).next().toggle();
});
You have to change id of the title to class to apply this to every element of the list.
You need to set dynamic attributes in your html:
{% for c in category.list %}
<div class="title" id="title-{{ c.id }}">
<!-- the content -->
</div>
<div class="lecture-hide" for="title-{{ c.id }}" style="display: none;">
<!-- the content -->
</div>
{% endfor %}
and in JQuery
$('.title').click(function () {
$('.lecture-hide[for="title-' + $(this).attr('id') + '"]').toggle();
});
This will works even if the html elements order change.
This question already has answers here:
How to make a reusable template in Django?
(8 answers)
Closed 5 years ago.
I have the following code that is repeated on several templates:
{% for element in elements %}
<div class="some-class">
<div class="another-class">
<div class="row">
<div class="col-xs-3">
<img class="img-responsive" alt="{{ entry.user }} avatar" style="border-radius: 50%; width: 100%;" src="{{ entry.avatar_url}}">
</div>
<div class="col-xs-9" style="some-style">
{% if entry.data1 %}<small>{% trans entry.data1 %}</small><br>{% endif %}
{% trans entry.data2 %} {% trans entry.data2 %}
<br>
<small style="some-style">
{% blocktrans with timestamp=entry.timestamp|naturaltime %}
{{ timestamp }}
{% endblocktrans %}
</small>
</div>
</div>
</div>
</div>
{% endfor %}
I was wondering what is the best way to avoid repeating this piece of code, I am kind of newbie to Django, and I would really appreciate your help.
Edit:
What if I need to pass a content to that template. Is it going to use the same context than the one in the containing file or should I indicate the context in some way?
That is easy:
Put this piece of HTML in a file called, say reusable.html and then include it in other templates.
Like this:
<!-- Other HTML -->
... html stuff here
{% include 'reusable.html' %}
Now, if you want to pass a parameter to reusable.html, you do it like this:
`{% include 'reusable.hmtl' with var_a='abc' var_b=123 %}`
Set it up in it's own template, for example new_template.html and use {% include 'new_template.html' %} wherever you want it
long-time lurker for this website, but I finally decided to join the community.
I have a quick question on some of my code. I took a job this year for my university developing a website for the journalist department. The website was being built the previous year by another student using Django 1.8, python 2, and everything else that comes with that. I knew a decent amount about these languages, and I have learned a lot testing out different methods for hours on end. However, there is one thing I am having trouble with that I have researched for forever.
Basically, for my website, I have different "sections" for different pages of articles. These articles have many traits. One trait is called "section" and this section has the names of the pages. So for example:
One page is named "look". I can call my code and display all of my featured_articles. HOWEVER, I am trying to only display the articles where the name of the section equals "look".
Here is my current code. Any ideas? I have tried many things but I can't get it to work properly. For loops, if statements, different HTML processes, different pages in django, etc...
{% for article, section in featured_articles %}
<div class="media panel panel-default">
<div class="panel-body">
<div class="media-left">
<a href="articles/{{ article.url }}">
<img class="media-object thumbnail-featured"
src="{{ article.image }}">
</a>
</div>
<div class="media-body">
<a href="articles/{{ article.url }}">
<h3 class="media-heading">{{ article.title }}</h3>
</a>
<!-- TODO figure out how to iterate through the authors field, manytomany -->
{% for contributor in article.authors.all %}
<p>{{ section.name }} |
{{contributor}}</p>
{% endfor %}
<p>{{article.preview}}</p>
</div>
</div>
</div>
{% endfor %}
Thank you for any help!!
Overall, it is a not such a good idea. You are sending all data to the template engine and doing the filtering there?
Why not filter it in the view function / view class and then return that data inside a template variable and then render in the front end?
def detail(request, poll_id):
filtered_data = .......objects.get(name='look')
return render(request, 'polls/detail.html', {'look_data': filtered_data})
{% for article, section in look_data %}
<div class="media panel panel-default">
.... blah blah blah
</div>
{% endfor %}
As I understand, you just need to add if statement:
{% for article, section in featured_articles %}
{% if section.name == 'look' %}
<div class="media panel panel-default">
<div class="panel-body">
<div class="media-left">
<a href="articles/{{ article.url }}">
<img class="media-object thumbnail-featured"
src="{{ article.image }}">
</a>
</div>
<div class="media-body">
<a href="articles/{{ article.url }}">
<h3 class="media-heading">{{ article.title }}</h3>
</a>
<!-- TODO figure out how to iterate through the authors field, manytomany -->
{% for contributor in article.authors.all %}
<p>{{ section.name }} |
{{ contributor }} </p>
{% endfor %}
<p>{{article.preview}}</p>
</div>
</div>
</div>
{% endif %}
{% endfor %}
I want to show my newest post in my header and have the other posts in the for loop to be offset by one, so there's not the same post in my header and another where all my other posts are.
in my views.py I have
latest = Post.objects.latest('id')
context = {
......
"latest": latest
}
in my list.html
<div class="jumbotron col-sm-12">
<div class="container">
<div class="row">
<p>{{latest}}</p>
<div class="col-sm-8">
<img src='{{ latest.image.url }}' class="img-responsive"/>
</div>
<div class="col-sm-4 pull-right" style="background-color: #212121; height: 300px">
</div>
</div>
</div>
</div>
and
{% for q in object_list %}
{{ q.title }}
{% endfor %}
how do I offset my for loop by 1
If you are getting your object_list from the context, I would suggest that you remove the first object there only:
object_list[1:]
but, if you do want to do it in the template, you can use the builtin slice filter:
{% for q in object_list|slice:"1:" %}
{{ q.title }}
{% endfor %}
It uses the same syntax as python list for slicing.
Uses the same syntax as Python’s list slicing. See http://www.diveintopython3.net/native-datatypes.html#slicinglists for an introduction.
An alternative way could be to exclude the latest object from the object_list
object_list = object_list.exclude(id=latest.id)
and, then you don't need to slice the list.