Include then block on a Twig template - symfony

None of the previous questions seem to have any information and about a day and a half of random Google searches turns up nothing.
What I am trying to do is this, I have a base.html.twig template and then a folder with several ui elements (slideshows, navigation menus, etc). The idea being I should be able to do this:
page.html.twig contains
{% extends 'OnMyLemonCommonBundle::base.html.twig' %}
{% block content %}
{% include 'OnMyLemonCommonBundle::features.html.twig' %}
{% block features %}
<h2>Featured Articles</h2>
<li>Article 1</li>
<li>Article 2</li>
{% endblock %}
{% endblock %}
features.html.twig contains
<div class="row">
<div class="large-12 columns">
<div class="row">
<div class="large-4 small-6 columns">
{% block features %}{% endblock %}
</div>
<div class="large-4 small-6 columns">
{% block blogs %}{% endblock %}
</div>
<div class="large-4 small-12 columns">
{% block pictures %}{% endblock %}
</div>
</div>
</div>
</div>
The problem is that this will render as follows:
// Content from top of base.html.twig
<div class="row">
<div class="large-12 columns">
<div class="row">
<div class="large-4 small-6 columns">
</div>
<div class="large-4 small-6 columns">
</div>
<div class="large-4 small-12 columns">
</div>
</div>
</div>
</div>
<h2>Featured Articles</h2>
<li>Article 1</li>
<li>Article 2</li>
// Content from bottom of base.html.twig
The question is how would I make this output the following:
// Content from top of base.html.twig
<div class="row">
<div class="large-12 columns">
<div class="row">
<div class="large-4 small-6 columns">
<h2>Featured Articles</h2>
<li>Article 1</li>
<li>Article 2</li>
</div>
<div class="large-4 small-6 columns">
</div>
<div class="large-4 small-12 columns">
</div>
</div>
</div>
</div>
// Content from bottom of base.html.twig

You could accomplish this by having an additional layer of inheritance in your twig files, e.g.:
features-base.html.twig contains:
{% extends 'OnMyLemonCommonBundle::base.html.twig' %}
{% block content %}
{% include 'OnMyLemonCommYonBundle::features.html.twig' %}
{% endblock %}
page.html.twig contains:
{% extends 'OnMyLemonCommonBundle::features-base.html.twig' %}
{% block features %}
<h2>Featured Articles</h2>
<li>Article 1</li>
<li>Article 2</li>
{% endblock %}

I don't think this is possible, however you can try to use the following
{% render'bundle:Controller:method' %}
Where you render it like this
<div class="row">
<div class="large-12 columns">
<div class="row">
<div class="large-4 small-6 columns">
{{ features }}
</div>
<div class="large-4 small-6 columns">
</div>
<div class="large-4 small-12 columns">
</div>
</div>
</div>
</div>
I hope this is a solution to your problem

Related

Bootstrap: align 'card's horizontally as a single row

i am rendering the 4 items in a row through a for loop , the problem is that in the first line it renders 4 items but the rest of the items that come in the loop are rendered in separate line.
code
<div class="card-group">
{% for item in wt %}
<div class="card my-3 text-white bg-dark mb-3" style="width: 18rem;">
<img src="/media/{{item.thumbnail}}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">{{item.product_name}}</h5>
<p class="card-text">{{item.thumbnail_desc}}</p>
View Product
</div>
</div>
{% if forloop.counter|divisibleby:4 %}
</div>
{% endif %}
{% endfor %}
here i am using bootstrap and django framework... i also used "row" class but it also doesnt work very well
It should automatically do 4 to a row without having to add extra code:
{% for item in wt %}
<div class="card my-3 text-white bg-dark mb-3" style="width: 18rem;">
<img src="/media/{{item.thumbnail}}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">{{item.product_name}}</h5>
<p class="card-text">{{item.thumbnail_desc}}</p>
View Product
</div>
</div>
{% endfor %}
If not, try using class "col-md-3" instead of "my-3".
Let me know if this does the trick.
it worked by changing size of the card and also adding forloop's counter... the main problem was the size of the card , it was not fitting in the container
<h2 class="my-4 text-white bg-dark">New Arrivals</h2>
<div class="row">
{% for item in wt %}
<div class="card text-white bg-dark mb-3" style="width: 10rem;">
<img src="/media/{{item.thumbnail}}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">{{item.product_name}}</h5>
<p class="card-text">{{item.thumbnail_desc}}</p>
View Product
</div>
</div>
{% if forloop.counter|divisibleby:4 %}
</div>
<div class="row">
{% endif %}
{% endfor %}
</div>

How to add button at the end of a loop with twig

UPDATE : I answer to my question with a solution who work. See below.
I created a loop that displays posts. Each two iteration a new row is created.
My loop iterate around this list of posts. The button is not considered in this array.
But my problem is that I would like to add a button in the last col.
In the options of my back office I give the possibility to show or not this button. So sometime I don't need to add a last col with this button.
Furthermore I need to add col-md-push-2 on each column on two because I use a Bootstrap grid (even on the column of the button when the button is active in the back office).
I wrote this code who work fine. But I don't know where to add my button.
<div class="group">
<div class="row">
{% for post in posts %}
<div class="col-xs-12 col-md-5 {% if loop.index is even %}col-md-push-2{% endif %}">
<div class="div-for-my-content">
Col content
</div>
{% if buttonIsActive %}
<div class="div-for-my-button">
Button
</div>
{% endif %}
</div>
{% if loop.index % 2 == 0 and not loop.last %}
</div>
</div>
<div class="group">
<div class="row">
{% endif %}
{% endfor %}
</div>
</div>
I don't know where can I add the code for my button. I know that I actually have my button in each row :-(
Example of html I try to generate.
<div class="group">
<div class="row">
<div class="col-xs-12 col-md-5 ">
<div class="div-for-my-content">
Col content
</div>
</div>
<div class="col-xs-12 col-md-5 col-md-push-2">
<div class="div-for-my-content">
Col content
</div>
</div>
</div>
</div>
<div class="group">
<div class="row">
<div class="col-xs-12 col-md-5 ">
<div class="div-for-my-content">
Col content
</div>
</div>
<div class="col-xs-12 col-md-5 col-md-push-2">
<div class="div-for-my-content">
Col content
</div>
</div>
</div>
</div>
<div class="group">
<div class="row">
<div class="col-xs-12 col-md-5">
<div class="div-for-my-button">
Button
</div>
</div>
</div>
</div>
I answer to my question with a variant who work and use batch.
{% for row in posts|batch(2) %}
<div class="group">
<div class="row">
{% for item in row %}
<div class="col-xs-12 col-md-5 {% if loop.index is even %}col-md-push-2{% endif %}">
<div class="div-for-my-content">
Col content
</div>
</div>
{% endfor %}
{% if btn_statut == true and loop.last and posts|length is not divisible by(2) %}
<div class="col-xs-12 col-md-5 col-md-push-2">
<div class="div-for-my-button">
Button
</div>
</div>
{% endif %}
</div>
</div>
{% if btn_statut == true and loop.last and posts|length is divisible by(2) %}
<div class="group">
<div class="row">
<div class="col-xs-12 col-md-5">
<div class="div-for-my-button">
Button
</div>
</div>
</div>
</div>
{% endif %}
{% endfor %}
In order to place the button at the right spot, inside an open row, or open a new row you could check if the count of the items inside posts is even or not. Do note, u'd need to do the test twice, once for even and once for uneven
<div class="group">
<div class="row">
{% for post in posts %}
<div class="col-xs-12 col-md-5 {% if loop.index is even %}col-md-push-2{% endif %}">
<div class="div-for-my-content">
Col content
</div>
{% if loop.last and posts|length % 2 != 0 %}
<div class="div-for-my-button">
Button
</div>
{% endif %}
</div>
{% if loop.index % 2 == 0 and not loop.last %}
</div>
</div>
<div class="group">
<div class="row">
{% endif %}
{% endfor %}
</div>
{% if posts|length % 2 == 0 %}
<div class="row">
<div class="col-xs-12 col-md-5">
<div class="div-for-my-button">
Button
</div>
</div>
</div>
{% endif %}
</div>
demo

Unable to view multiple thumbnails in a row

I want to Get Thumbnails in a row. It's Getting a single column
I have Used Stock HTML Template The Template is working proper itself
I have corrected the row class but it's not coming as required
My Result
{% extends "base.html" %}
{% load static %}
{{% block content %}
<!-- ##### Listing Content Wrapper Area Start ##### -->
<section class="listings-content-wrapper section-padding-100">
<div class="container">
<div class="row">
<div class="col-12">
<div class="listings-top-meta d-flex justify-content-between mb-100">
<div class="view-area d-flex align-items-center">
<span>View as:</span>
<div class="grid_view ml-15"><i class="fa fa-th" aria-hidden="true"></i></div>
<div class="list_view ml-15"><i class="fa fa-th-list" aria-hidden="true"></i></div>
</div>
<div class="order-by-area d-flex align-items-center">
<span class="mr-15">Order by:</span>
<select>
<option selected>Default</option>
<option value="1">Newest</option>
<option value="2">Sales</option>
<option value="3">Ratings</option>
<option value="3">Popularity</option>
</select>
</div>
</div>
</div>
</div>
{% if listings %}
{% for listing in listings %}
<div class="row">
<!-- Single Featured Property -->
<div class="col-x-6 col-md-4">
<div class="single-featured-property mb-50">
<!-- Property Thumbnail -->
<div class="property-thumb">
<img src="{{listing.photo_main.url}}" alt="">
<div class="tag">
<span>For Sale</span>
</div>
<div class="list-price">
<p>₹{{listing.price}}</p>
</div>
</div>
<!-- Property Content -->
<div class="property-content">
<h5>{{listing.title}}</h5>
<p class="location"><img src="{% static 'img/icons/location.png'%}" alt="">{{listing.adderss}}</p>
<p>{{listing.description}}</p>
<div class="property-meta-data d-flex align-items-end justify-content-between">
<div class="new-tag">
<img src="{% static 'img/icons/new.png'%}" alt="">
</div>
<div class="bathroom">
<img src="{% static 'img/icons/bathtub.png'%}" alt="">
<span>{{listing.bathrooms}}</span>
</div>
<div class="garage">
<img src="{% static 'img/icons/garage.png'%}" alt="">
<span>{{listing.garage}}</span>
</div>
<div class="space">
<img src="{% static 'img/icons/space.png'%}" alt="">
<span>{{listing.sqft}} sq ft</span>
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
{% endif %}
<div class="row">
<div class="col-12">
<div class="south-pagination d-flex justify-content-end">
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item"><a class="page-link active" href="#">01</a></li>
<li class="page-item"><a class="page-link" href="#">02</a></li>
<li class="page-item"><a class="page-link" href="#">03</a></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</section>
<!-- ##### Listing Content Wrapper Area End ##### -->
{% endblock %}}
I want to get 3 thumbnails in a row
css file is used from a stock template file.
Property listings should appear as in database.
Like This
You're generating a row for each listing. Ideally you'd want just the listings. So you can do:
{% if listings %}
{% for listing in listings %}
{% if forloop.counter0|divisibleby:3 %}<div class="row">{% endif %}
<!-- Single Featured Property -->
<div class="col-x-6 col-md-4">
<div class="single-featured-property mb-50">
<!-- Property Thumbnail -->
<div class="property-thumb">
<img src="{{listing.photo_main.url}}" alt="">
<div class="tag">
<span>For Sale</span>
</div>
<div class="list-price">
<p>₹{{listing.price}}</p>
</div>
</div>
<!-- Property Content -->
<div class="property-content">
<h5>{{listing.title}}</h5>
<p class="location"><img src="{% static 'img/icons/location.png'%}" alt="">{{listing.adderss}}</p>
<p>{{listing.description}}</p>
<div class="property-meta-data d-flex align-items-end justify-content-between">
<div class="new-tag">
<img src="{% static 'img/icons/new.png'%}" alt="">
</div>
<div class="bathroom">
<img src="{% static 'img/icons/bathtub.png'%}" alt="">
<span>{{listing.bathrooms}}</span>
</div>
<div class="garage">
<img src="{% static 'img/icons/garage.png'%}" alt="">
<span>{{listing.garage}}</span>
</div>
<div class="space">
<img src="{% static 'img/icons/space.png'%}" alt="">
<span>{{listing.sqft}} sq ft</span>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{% endif %}
Or if you want to generate a row for every three listings you'd do:
{% if listings %}
<div class="row">
{% for listing in listings %}
<!-- Single Featured Property -->
<div class="col-x-6 col-md-4">
<div class="single-featured-property mb-50">
<!-- Property Thumbnail -->
<div class="property-thumb">
<img src="{{listing.photo_main.url}}" alt="">
<div class="tag">
<span>For Sale</span>
</div>
<div class="list-price">
<p>₹{{listing.price}}</p>
</div>
</div>
<!-- Property Content -->
<div class="property-content">
<h5>{{listing.title}}</h5>
<p class="location"><img src="{% static 'img/icons/location.png'%}" alt="">{{listing.adderss}}</p>
<p>{{listing.description}}</p>
<div class="property-meta-data d-flex align-items-end justify-content-between">
<div class="new-tag">
<img src="{% static 'img/icons/new.png'%}" alt="">
</div>
<div class="bathroom">
<img src="{% static 'img/icons/bathtub.png'%}" alt="">
<span>{{listing.bathrooms}}</span>
</div>
<div class="garage">
<img src="{% static 'img/icons/garage.png'%}" alt="">
<span>{{listing.garage}}</span>
</div>
<div class="space">
<img src="{% static 'img/icons/space.png'%}" alt="">
<span>{{listing.sqft}} sq ft</span>
</div>
</div>
</div>
</div>
</div>
{% if forloop.counter0|divisibleby:3 %}</div>{% endif %}
{% endfor %}
{% endif %}

i need to specify some id in django to later add it in bootstrap

i want to make a portfolio in django,
i have a section in html that with {% for ... %} i connect it to my jobs list in dajngo to show my job's pictures,summary and title but in html code there is an id in this div that call another div in the code and when i perform a for loop this id is just repeat it self,how could i change this id in order to changed automatically?`
{% for job in jobdic.all %}
<div class="col-md-6 col-lg-4">
<a class="portfolio-item d-block mx-auto" **href="#portfolio-modal-1"**>
<div class="portfolio-item-caption d-flex position-absolute h-100 w-100">
<div class="portfolio-item-caption-content my-auto w-100 text-center text-white">
<i class="fas fa-search-plus fa-3x"></i>
</div>
</div>
<p>{{ job.summary }}</p>
<img class="img-fluid" src="{{ job.image.url }}" alt="{{job.title }}">
</a>
</div>
{% endfor %}
the problem area is in href that call another section in html with portfolio-modal-1
i need to write some code that can be change this portfolio-modal-1 to portfolio-modal-2 and 3 and ...
automatically
this is the section that its refers to :
{% for job in jobdic.all %}
<div class="portfolio-modal mfp-hide" id="portfolio-modal-1">
<div class="portfolio-modal-dialog bg-white">
<a class="close-button d-none d-md-block portfolio-modal-dismiss" href="#">
<i class="fa fa-3x fa-times"></i>
</a>
<div class="container text-center">
<div class="row">
<div class="col-lg-8 mx-auto">
<h2 class="text-secondary text-uppercase mb-0">Project Name</h2>
<hr class="star-dark mb-5">
<img class="img-fluid mb-5" src="{{ job.image.url }}" alt="">
<p class="mb-5">{{ job.summary }}</p>
<a class="btn btn-primary btn-lg rounded-pill portfolio-modal-dismiss" href="#">
<i class="fa fa-close"></i>
Close Project</a>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
It's probably best to use the id/primary key of each job:
<!-- in first loop -->
<a class="portfolio-item d-block mx-auto" href="#portfolio-modal-{{ job.pk }}">
<!-- in second loop -->
<div class="portfolio-modal mfp-hide" id="portfolio-modal-{{ job.pk }}">
Alternatively, use the {{ forloop.counter }} template tag in its place. Docs are at the bottom of this section.

Medium breakpoint not working in Foundation 6

I switched from bootstrap 4 to foundation 6 last week. So maybe it's due to my lack of experience with foundation.
But I have a problem with my breakpoints. The small breakpoint is never working. It is always showing the medium breakpoint. Here is an example of my code and a screenshot of the page I am making at width 320px.
Screenshot of issue
<div class="grid-container">
<section class="section">
<h1 class="text-center">{{ entry.title }}</h1>
<p class="text-center">{{ entry.subtext }}</p>
<div class="grid-x activities">
{% for activiteit in entry.activiteiten %}
<div class="small-12 medium-4 cell">
<div class="activity-card padding-2" style="background-color: {{ activiteit.kleurActiviteit }};">
<div class="activity-card__image text-center">
<div style="background-image: url({{ activiteit.activiteitafbeelding.first().getUrl() }});"></div>
</div>
<div class="activity-card__title text-center">
<h2>{{ activiteit.title }}</h2>
</div>
<div class="activity-card__subtext">
<p class="text-center">{{ activiteit.korteTekst }}</p>
</div>
</div>
</div>
{% endfor %}
</div>
</section>
I solved my own question. Had to set viewport meta tag in my html header.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

Resources