I have a nested loop in twig and i get the elements doubled in the form of 1,1,1,1 / 2,2,2,2 / 3,3,3,3. How can i use the first loop to access the data from the second loop without duplicating the elements ?
{% for form in forms %}
{% for question in surveyQuestions %}
<div class="overlay-container tab-content">
<div role="tabpanel" class="show-rendered-form tab-pane in fade active" id="show-rendered-form">
{% form_theme form with ['bootstrap_3_horizontal_layout.html.twig'] %}
{{ form(form) }}
<div class="overlay-mask">
<div class="btn-group">
<a class="edit-action btn btn-default" href="#show-edit-form"
data-question-id="{{ question.id }}" aria-controls="show-rendered-form"
role="tab" data-toggle="tab">Editeaza</a>
<a class="delete-action btn btn-default" href="#show-rendered-form"
data-question-id="{{ question.id }}" aria-controls="" role="tab"
data-toggle="tab">Sterge</a>
</div>
</div>
</div>
<div role="tabpanel" class="show-edit-form tab-pane" id="show-edit-form">
</div>
</div>
{% endfor %}
{% endfor %}
Assuming my assessment above is correct: Why not do it like this?
Instead of using a foreach loop, we use a classical for loop and use the index as identifier for both, forms and surveyQuestions:
{% for i in 0..(forms|length - 1)%}
<div class="overlay-container tab-content">
<div role="tabpanel" class="show-rendered-form tab-pane in fade active" id="show-rendered-form">
{% form_theme form with ['bootstrap_3_horizontal_layout.html.twig'] %}
{{ form(forms[i]) }}
<div class="overlay-mask">
<div class="btn-group">
<a class="edit-action btn btn-default" href="#show-edit-form"
data-question-id="{{ surveyQuestions[i].id }}" aria-controls="show-rendered-form"
role="tab" data-toggle="tab">Editeaza</a>
<a class="delete-action btn btn-default" href="#show-rendered-form"
data-question-id="{{ surveyQuestions[i].id }}" aria-controls="" role="tab"
data-toggle="tab">Sterge</a>
</div>
</div>
</div>
<div role="tabpanel" class="show-edit-form tab-pane" id="show-edit-form">
</div>
</div>
{% endfor %}
Related
I have these problem, I need to generate a col-md-4 from Django-Admin, the trouble is that I want to show other col-md-4 just if the previous col-md-4 get 10 items.
Please help me, is my tesis
<div class="col-lg-4">
<div class="single-price" style="border-radius: 8px;">
<ul class="price-list">
{% for doc in Documento %}
{% if 10 >= forloop.counter %}
<li class="d-flex align-items-center"><a href="{{ doc.documento.url }}" download=""
target="_blank" rel="noopener noreferrer">
<img src="{{ doc.ícono.url }}" alt="" style="width: 40px; margin-right: 10px;"> </a>
<span style="text-align: left;">{{ doc.nombre }}</span>
<!-- <a href="/static/descargables/Ctto-Marco-MAR-2022-.docx" download="true"
class="price-btn">Descargar</a> -->
</li>
{% endif %}
{% endfor %}
</ul>
</div>
</div>
{% endfor %}
I'm trying to make responsive blog post. Everything works fine, but I don't like the way it looks. I would like to have a solution when my blog post with image itself would be centered. On desktop version it is less visible, but on mobile device it looks ugly... I'm currently using bootstrap 4, but if you got solutions with css, I also would be really happy!
I need something like on the image:
Desktop version
Mobile version
Here is my html + bootstrap model:
{% extends 'blog/base.html' %}
{% block content %}
<article class="media content-section">
<img class="rounded-circle article-img" src="{{ object.author.profile.image.url }}" alt="">
<div class="media-body">
<div class="article-metadata">
<a class="mr-2 author_title" href="{% url 'user-posts' object.author.username %}">#{{ object.author }}</a>
<small class="text-muted">{{ object.date_posted|date:"N d, Y" }}</small>
<div>
<!-- category section -->
<small class="text-muted">
Categories:
{% for category in post.categories.all %}
<a href="{% url 'blog_category' category.name %}">
{{ category.name }}
</a>
{% endfor %}
</small>
</div>
{% if object.author == user %}
<div>
<a class='btn btn-secondary btn-sm mt-1 mb-1' href="{% url 'post-update' object.id %}">Update</a>
<a class='btn btn-danger btn-sm mt-1 mb-1' href="{% url 'post-delete' object.id %}">Delete</a>
</div>
{% endif %}
</div>
<img class="img-fluid center" id="rcorners3" src="{{ object.image.url }}" alt="none">
<h2 class="article-title text-center">{{ object.title }}</h2>
<p class="article-content">{{ object.content }}</p>
</div>
</article>
{% endblock content %}
And some code from base.html block:
<main role="main" class="container">
<div class="row">
<div class="col-md-8">
{% if messages %}
{% for message in messages %}
<div class="alert alert-{{ message.tags }}"> <!--grabbing bootstrap tag for displaying alert, info etc. -->
{{ message }}
</div>
{% endfor %}
{% endif %}
{% block content %}{% endblock %}
</div>
<div class="col-md-4">
<div class="content-section">
<h3>Sidebar</h3>
<p class='text-muted'>Explore smth new today!
<ul class="list-group article-metadata">
<li class="list-group-item list-group-item-light"><a class="author_title" href="{% url 'blog-home' %}">Latest Posts</a></li>
<li class="list-group-item list-group-item-light"><a class="author_title" href="">Links</a></li>
<li class="list-group-item list-group-item-light">Calendars</li>
<li class="list-group-item list-group-item-light">etc</li>
</ul>
</p>
</div>
</div>
</div>
</main>
Finally, I solved this solution like this:
{% extends 'blog/base.html' %}
{% block content %}
<article class="media content-section">
<img class="rounded-circle article-img" src="{{ object.author.profile.image.url }}" alt="">
<div class="article-metadata">
<a class="mr-2 author_title" href="{% url 'user-posts' object.author.username %}">#{{ object.author }}</a>
<small class="text-muted">{{ object.date_posted|date:"N d, Y" }}</small>
<div>
<!-- category section -->
<small class="text-muted">
Categories:
{% for category in post.categories.all %}
<a href="{% url 'blog_category' category.name %}">
{{ category.name }}
</a>
{% endfor %}
</small>
</div>
{% if object.author == user %}
<div>
<a class='btn btn-secondary btn-sm mt-1 mb-1' href="{% url 'post-update' object.slug %}">Update</a>
<a class='btn btn-danger btn-sm mt-1 mb-1' href="{% url 'post-delete' object.slug %}">Delete</a>
</div>
{% endif %}
</div>
</article>
<article class="media content-section">
<div class="media-body">
<img class="img-fluid center" id="rcorners3" src="{{ object.image.url }}" alt="none">
<h2 class="article-title text-center">{{ object.title }}</h2>
<p class="article-content">{{ object.content }}</p>
</div>
</article>
{% endblock content %}
I almost finish a very important part in my Django project by creating panels which contains some cards. I'm using Bootstrap 3 (BS3) and I integrated cards from BS4 to BS3.
I'm getting an issue and I would like to get your mind because the behaviour is a little bit weird.
My issue :
As you can see in the animated picture below, there is an offset when I open dropdown from Publication n°1 and Publication n°2. It creates an offset with cards from the second row.
[![enter image description here][1]][1]
My question is : How I can rewrite bootstrap part in my code in order to make a normal behaviour ?
What I would like to get for each card:
This is what I would like for each card : open the card > make an offset to the entire row below
[![enter image description here][2]][2]
What I have and I don't want as behaviour :
And don't have a behaviour like that :
[![enter image description here][3]][3]
My code :
This is my entire code :
{% for category in research_categories|dictsort:'name' %}
<div class="panel-group accordion" id="accordion_{{ category.id }}" role="tablist"
aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion_{{ category.id }}"
href="#collapseOne_{{ category.id }}" aria-expanded="true" aria-controls="collapseOne">
<i class="more-less glyphicon glyphicon-plus"></i>
{{ category }}
{% for item in category.publication.all %}
{% if item.new_publication == True %}
<span class="glyphicon glyphicon-flag"></span>
{% endif %}
{% endfor %}
</a>
</h4>
</div>
<div id="collapseOne_{{ category.id }}" class="panel-collapse collapse" role="tabpanel"
aria-labelledby="#accordion_{{ category.id }}">
<div class="panel panel-default subpanel ">
<div class="row">
{% for element in research_publications|dictsort:'pub_id' %}
{% if element.category|stringformat:"s" == category|stringformat:"s" %}
<div class="col-md-4">
<div class="card" style="width:350px">
<img class="card-img-top" style="width: 350px; height: 350px" src="{{ element.cover.url }}" alt="Card image">
<div class="card-body">
<h4 class="card-title">{{ element }} - {{ element.pub_id }}
{% if element.new_publication == True %}
<span class="glyphicon glyphicon-flag"></span>
{% endif %}
</h4>
<button class="btn btn-default display-document" type="button" data-toggle="collapse"
data-target="#dropdown_{{ element.id }}"
aria-expanded="false"><span
class="glyphicon glyphicon-chevron-down"></span></button>
<div id="dropdown_{{ element.id }}" class="collapse">
<div class="publication-title">
<table class="table table-condensed">
<tbody>
{% for item in test_research %}
{% if item.publication|stringformat:"s" == element|stringformat:"s" %}
<tr>
<td class="col-md-1">
<input type="checkbox" class="fakeRadio" name="DocumentChoice"
value="{{ item.code }}">
</td>
<td class="col-md-5 document-title">{{ item.title }}</td>
<td class="col-md-1 document-language"> {{ item.language }}</td>
<td class="col-md-1">
{% if item.format == 'pdf' %}
<img src="{% static 'app/img/pdf-icon.png' %}"
style="width:20px; height:20px;"/>
{% endif %}
{% if item.format == 'epub' %}
<img src="{% static 'app/img/epub-icon.png' %}"
style="width:20px; height:20px;"/>
{% endif %}
</td>
<td class="col-md-1 document-flag">
{% if item.publication.new_publication == True %}
<span class="glyphicon glyphicon-flag"></span>
{% else %}
<span></span>
{% endif %}
</td>
<td class="col-md-1 document-cover">
{% if item.publication.cover %}
<a href="{{ item.publication.cover.url }}">
<img class="popup_image"
style="width:20px; height:20px; border-radius:2px;"
id="myImg_{{ item.id }}" src="{{ item.publication.cover.url }}">
</a>
{% endif %}
</td>
</tr>
{% endif %}
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
</div>
</div>
{% endfor %}
And this is a simplified version from my previous code in order to try some things :
{% for category in research_categories|dictsort:'name' %}
<div class="panel-group accordion" id="accordion_{{ category.id }}" role="tablist"
aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion_{{ category.id }}"
href="#collapseOne_{{ category.id }}" aria-expanded="true" aria-controls="collapseOne">
<i class="more-less glyphicon glyphicon-plus"></i>
{{ category }}
</a>
</h4>
</div>
<div id="collapseOne_{{ category.id }}" class="panel-collapse collapse" role="tabpanel"
aria-labelledby="#accordion_{{ category.id }}">
<div class="panel panel-default subpanel ">
<div class="row">
{% for element in research_publications|dictsort:'pub_id' %}
{% if element.category|stringformat:"s" == category|stringformat:"s" %}
<div class="col-md-4">
<div class="card" style="width:350px">
<img class="card-img-top" style="width: 350px; height: 350px" src="{{ element.cover.url }}" alt="Card image">
<div class="card-body">
<h4 class="card-title">{{ element }}</h4>
<button class="btn btn-default display-document" type="button" data-toggle="collapse"
data-target="#dropdown_{{ element.id }}"
aria-expanded="false"><span
class="glyphicon glyphicon-chevron-down"></span></button>
<div id="dropdown_{{ element.id }}" class="collapse">
<div class="publication-title">
<table class="table table-condensed">
<tbody>
{% for item in test_research %}
{% if item.publication|stringformat:"s" == element|stringformat:"s" %}
<tr>
<td class="col-md-5 document-title">{{ item.title }}</td>
</tr>
{% endif %}
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
</div>
</div>
{% endfor %}
I don't know if you need my css part, but I think the issue is maybe due to my bootstrap grid ?
Thank you !
That looks like a clearfix issue. Can you try adding this to your css:
.panel.panel-default.subpanel > .row > .col-md-4:nth-child(3n+1) {
clear: both;
}
Depending on your other code it might need some more variations for different screen sizes.
I'm looking for a way to add a class, which I could modify in css, to images and videos in both editor forms and html templates displaying the form. I'm using the SummernoteInplaceWidget() from django-summernote package and it's working fine except this feature.
I use bootstrap 4 with it.
Any ideas?
Thanks in advance.
forms.py:
from django.forms import ModelForm
from django_summernote.widgets import SummernoteInplaceWidget
from .models import Post
class PostFormModel(ModelForm):
class Meta:
model = Post
fields = ['title', 'content', 'image', ]
widgets = {
'content': SummernoteInplaceWidget(attrs={'class': 'summer-img-class'}),
}
post_form.html:
{% extends "blog/base.html" %}
{% load crispy_forms_tags %}
{% block mt %} mt-2 {% endblock mt %}
{% block content %}
<div class="content-section">
<form method="POST" enctype="multipart/form-data">
{% csrf_token %}
<fieldset class="form-group">
<legend class="border-bottom mb-4">Blog Post</legend>
{{ form|crispy }}
{% if form.image.errors %}
<div class="alert alert-danger">
{{ form.image.errors }}
</div>
{% endif %}
</fieldset>
<div class="form-group">
<button class="btn btn-outline-info" type="submit">Post</button>
</div>
</form>
{% block jquery %}
{{ form.media }}
{% endblock %}
</div>
{% endblock content %}
post_detail.html:
{% extends "blog/base.html" %}
{% block mt %} mt-2 {% endblock mt %}
{% block content %}
<article class="media content-section">
<div class="shadow-sm rounded row media-body">
<div class="col-md-3 col-sm-3 col-3 align-self-center">
<img class="rounded-circle article-img align-middle mx-auto d-none d-sm-block " src="{{ object.author.profile.image.url }}">
<img class="rounded-circle article-img-sm align-midle mx-auto d-block d-sm-none " src="{{ object.author.profile.image.url }}"">
</div>
<div class="col-md-9 col-sm-9 col-9">
<div class="article-metadata">
<a class="mr-2" href="{% url 'user-posts' post.author.username %}">{{ post.author }}</a>
<small class="text-muted">{{ object.date_posted|date:"F d, Y" }}</small>
{% if object.author == user %}
<div>
<a class="btn btn-secondary btn-sm mt-1 mb-1" href="{% url 'post-update' object.id %}">Update</a>
<a class="btn btn-danger btn-sm mt-1 mb-1" href="{% url 'post-delete' object.id %}">Delete</a>
</div>
{% endif %}
</div>
<h2><a class="article-title" href="{% url 'post-detail' post.id %}">{{ object.title }}</a></h2>
</div>
<div class="row media-body pt-3">
<div class="col-md-12">
{% if post.image %}
<img alt="" src="{{ object.image.large.url }}" class="post_image rounded mx-auto mb-2 d-block"/>
{% endif %}
<p class="article-content ml-3">{{ object.content|safe }}</p>
</div>
</div>
</div>
</article>
{% endblock content %}
I tried to add some styling to .article-content, it didn't have any effect, the same for this class in css (I imagine it can be more effectively):
.summer-img-class * {
max-width: 100%;
max-height: 400px;
object-fit: cover;
margin: auto;
}
Maybe it should be done with Jquery somehow, I don't know.
How can I access an entity attribute in Twig (using the Winzou Symfony2 tutorial on OpenClassroom)?
Category is an attribute of my class Advert which contains all my adverts. I just want to show an error message if there are no Advert entities.
Here is my accordion that lists "adverts" from my Advert entity. One accordion is for the category incident and the one other is for the category general.
<div class="well">
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseGen">
<h3><i class="icon-chevron-right"></i> Incidents</h3>
</a>
</div>
<div id="collapseGen" class="accordion-body collapse">
<div class="accordion-inner">
<div class="accordion" id="accordion4">
{% for advert in listAdverts %}
{% if advert.category == "incident" %}
<div class="accordion-group">
<div class="accordion-heading decalage">
<a href="{{ path('info_view', {'id': advert.id}) }}">
<h3 class="{{ advert.category }}">{{ advert.title }}</h3>
</a>
<div>
<span>{{ advert.content|truncate(100, true, '...')|raw }}</span>
</div>
<div>
{% if (advert.UpdatedAt is empty) %}
<i>Créé par {{ advert.author }}, le {{ advert.date|date('d/m/Y') }}
à {{ advert.date|date('H:i') }}</i>
{% else %}
<i>Modifié par {{ advert.author }},
le {{ advert.updatedAt|date('d/m/Y') }}
à {{ advert.updatedAt|date('H:i') }}</i>
{% endif %}
</div>
<div>{% if advert.readers is not empty %}
<i>Vu par :
{% for reader in advert.readers %}
{{ reader.username }},
{% endfor %}
{% endif %}</i>
</div>
<br>
<div>
{% if is_granted("IS_AUTHENTICATED_FULLY") %}
<p>
<a href="{{ path('info_edit', {'id': advert.id}) }}"
class="btn btn-default">
<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
Modifier
</a>
<a href="#myModal{{ advert.id }}" role="button" class="btn btn-danger"
data-toggle="modal">
<i class="fa fa-trash-o" aria-hidden="true"></i>
Supprimer
</a>
</p>
<div id="myModal{{ advert.id }}" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h3>Suppression annonce "{{ advert.title }}"</h3>
</div>
<div class="modal-body">
<p>Voulez-vous vraiment supprimer l'annonce : "{{ advert.title }}" ? </p>
</div>
<div class="modal-footer parente">
<div>Annuler</div>
<div>
<form class="nomargin"
action="{{ path('info_delete', {'id': advert.id}) }}"
method="post">
<input type="submit" value="Supprimer"
class="btn btn-danger"/>{{ form_rest(form) }}
</form>
</div>
</div>
</div>
{% endif %}
</div>
</div>
</div>
{# HERE I DONT KNOW HOW TO DO IT #}
{% else %} No Advert !
{% endif %}
{% endfor %}
</div>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseCo">
<h3><i class="icon-chevron-right"></i> Général</h3>
</a>
</div>
<div id="collapseCo" class="accordion-body collapse">
<div class="accordion-inner">
<div class="accordion" id="accordion4">
{% for advert in listAdverts %}
{% if advert.category == "general" %}
<div class="accordion-group">
<div class="accordion-heading decalage">
<div class="accordion-heading">
<a href="{{ path('info_view', {'id': advert.id}) }}">
<h3 class="{{ advert.category }}">{{ advert.title }}</h3>
</a>
<span>{{ advert.content|truncate(100, true, '...')|raw }}</span>
<div>
{% if (advert.UpdatedAt is empty) %}
<i>Créé par {{ advert.author }}, le {{ advert.date|date('d/m/Y') }}
à {{ advert.date|date('H:i') }}</i>
{% else %}
<i>Modifié par {{ advert.author }},
le {{ advert.updatedAt|date('d/m/Y') }}
à {{ advert.updatedAt|date('H:i') }}</i>
{% endif %}
</div>
<div>{% if advert.readers is not empty %}
<i>Vu par :
{% for reader in advert.readers %}
{{ reader.username }},
{% endfor %}
{% endif %}</i>
</div>
<br>
<div>
{% if is_granted("IS_AUTHENTICATED_FULLY") %}
<p>
<a href="{{ path('info_edit', {'id': advert.id}) }}"
class="btn btn-default">
<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
Modifier
</a>
<a href="#myModal{{ advert.id }}" role="button" class="btn btn-danger"
data-toggle="modal">
<i class="fa fa-trash-o" aria-hidden="true"></i>
Supprimer
</a>
</p>
<div id="myModal{{ advert.id }}" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h3>Suppression annonce "{{ advert.title }}"</h3>
</div>
<div class="modal-body">
<p>Voulez-vous vraiment supprimer l'annonce : "{{ advert.title }}" ? </p>
</div>
<div class="modal-footer parente">
<div>Annuler</div>
<div>
<form class="nomargin"
action="{{ path('info_delete', {'id': advert.id}) }}"
method="post">
<input type="submit" value="Supprimer"
class="btn btn-danger"/>{{ form_rest(form) }}
</form>
</div>
</div>
</div>
{% endif %}
</div>
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
My error message " No Adverts !" doesnt appears..
EDIT : According to Mitchel's answer, i've tried this :
{% endif %}
{% else %}<li>No Adverts</li>
{% endfor %}
I don't know why it doesn't work when one advert is in the other category...
{% for advert in listAdverts if advert.category == "incident" %}
{% if listAdverts is empty%}
<li>No Adverts</li>
{% endif %}
{% endfor %}
That code does not work.
I'm not sure to understand your question, but if so, you can maybe try a thing like this according to the documentation:
{% for user in users %}
<li>{{ user.username|e }}</li>
{% else %}
<li><em>no user found</em></li>
{% endfor %}
In Twig a for statement can have an associated else. It basically means that if the for has no results, the else is used. You should put the {% endif %} before the {% else %} and it should work.