I would like to include tab_system.twig file in two differents files : archive.twig and blog_list.twig to have the same html in those two files.
{% include "tab_system.twig" %}
In this tab_system.twig file I have a condition to add the active class :
{% if XXX %}active{% endif %}
But this condition must be different depending on which page the user is.
For blog_list.twig :
{% if loop.first %}active{% endif %}
For archive.twig :
{% if item.term_id == term_page.term_id %}active{% endif %}
I wrote this without success :
{% set addclass = '' %}
{% if is_blog_list %}
{% set addclass = '{% if loop.first %}active{% endif %}' %}
{% elseif is_archive %}
{% set addclass = '{% if item.term_id == term_page.term_id %}active{% endif %}' %}
{% endif %}
In tab_system.twig I have a tab system with menu from a part and content to the other part. I wrote a js loop to display the corresponding content. I need to add active class on the first link and first content tab in blog_list.twig file and to add active class to the link and content tab depending on which category the user is.
<div class="tab-menu-list">
{% for item in all_posts %}
<a href="#" class="tab-menu {{ addclass }}"</a>
{% endfor %}
</div>
<div class="tab-content-list">
{% for item in all_posts %}
<div href="#" class="tab-content {{ addclass }}"</div>
{% endfor %}
</div>
is_archive and is_blog_list are variables defined elsewhere. They work
How can I create a condition ? Thank you in advance.
As I'm assuming you are looping the records, I'd say don't overcomplicate things,
single.twig
{% for i in 1..5 %}
{% include 'article.twig' with { 'active' : loop.first, } %}
{% endfor %}
template_blog.twig
{% for item in items %}
{% include 'article.twig' with { 'active' : item.term_id == term_page.term_id, } %}
{% endfor %}
article.twig
<div class="articles__list tab-content{{ active ? ' active'}}">
foo
</div>
demo - just change the main template
If you really wanted to keep that for inside the article template, which I think is not a great idea, you could still use the variables is_archive and is_blog_list inside article, e.g.
article.twig
{% for item in items %}
{% if is_archive %}
{% set active = loop.first %}
{% elseif is_blog_list %}
{% set active = item.term_id == term_page.term_id %}
{% endif %}
<div class="articles__list tab-content{{ active ? ' active'}}">
{% endfor %}
Related
I want to limit the pagination boxes going for ever. Say there is 100 events loaded -> 3 events are displayed/page; and such that the pagination boxes [1][2][3][4]....[40] doesn't go on...
In config.yml add this:
knp_paginator:
page_range: 5 # number of links showed in the pagination menu (e.g: you have 10 pages, a page_range of 3, on the 5th page you'll see links to page 4, 5, 6)
If you need change the sliding use any of these:
template:
pagination: '#KnpPaginator/Pagination/sliding.html.twig'
#KnpPaginator/Pagination/sliding.html.twig (by default)
#KnpPaginator/Pagination/twitter_bootstrap_v3_pagination.html.twig
#KnpPaginator/Pagination/twitter_bootstrap_pagination.html.twig
#KnpPaginator/Pagination/foundation_v5_pagination.html.twig
I guess that knp paginator does that for you but in case it does not You could try to modify any of the templates above to do something like this:
set a control variable
{% if pageCount > maxNumberOfBoxes %}
{% set breakpointAdded=true %}
{% endif %}
then find the loop which look like this
{% for page in pagesInRange %}
{% if page != current %}
<span class="page">
{{ page }}
</span>
{% else %}
<span class="current">{{ page }}</span>
{% endif %}
{% endfor %}
and replace it for something like this(with your own logic of course)
{% for i in range(0,pageCount) %}
{% if i > xBreakpoint and i < yBreakpoint and breakpointAdded == false %}
<span class="dots">...</span>
{% set breakpointAdded = true %}
{% else %}
{% if page != current %}
<span class="page">
{{ page }}
</span>
{% else %}
<span class="current">{{ page }}</span>
{% endif %}
{% endif %}
{% endfor %}
if anything of this works you could try to modify the getPaginationData function from SlidingPagination class.
what ever works for you.
Setting up a Drupal 8 custom view for Top 4 items, I want a different layout for item 1 than the remaining. I have override files for the custom view, but for this example I'm using base files to keep it simple.
In views-view.html.twig base file we have:
<div class="view-content">
{{ rows }}
</div>
In node.html.twig base file we have:
<div {{ content_attributes.addClass('content') }}>
{{ content }}
</div>
In node.html.twig I am aiming for something like:
{% if row_counter = 1 %}
output this markup / fields
{% else %}
do something boring with the other 3 items.
{% endif %}
I was able to set row_counter in the views-view.twig.html file:
{% for row in rows %}
{% set row_counter = loop.index %}
<div{{ row.attributes }}>
{{ row_counter }}
</div>
{% endfor %}
But I need to check against the value of {{ row_counter }} in the node.html.twig file....
What other properties are available in node.html.twig to check against its position in the list?
From the documentation
The loop variable
Inside of a for loop block you can access some special variables:
Variable Description
-----------------------------------------------------------------
loop.index The current iteration of the loop. (1 indexed)
loop.index0 The current iteration of the loop. (0 indexed)
loop.revindex The number of iterations from the end of the loop (1 indexed)
loop.revindex0 The number of iterations from the end of the loop (0 indexed)
loop.first True if first iteration
loop.last True if last iteration
loop.length The number of items in the sequence
loop.parent The parent context
edit: every variable know in the parent template is also known inside an include as context is passed by default. Only macro's don't know the parent's context
controller
<?php
require __DIR__ . '/../requires/propel_standalone.php';
echo $twig->render('tests/items.html', [
'items' => [
'Abc',
'def',
'ghi',
'jkl',
'mno',
'pqr',
'stu',
'vwx',
'z',
],
]);
items.twig
<!doctype>
<html>
<head><title>Test</title></head>
<body>
{% for item in items %}
{% include "tests/item.html" %}
{% endfor %}
</body>
</html>
item.twig
{% set order = 'Nothing to report' %}
{% if loop.first %}
{% set order = 'I\'m first' %}
{% endif %}
{% if loop.last %}
{% set order = 'I\'m last' %}
{% endif %}
{% if loop.index is even %}
{% set order = 'I\'m even' %}
{% endif %}
{% if loop.index is divisible by(5) %}
{% set order = 'I can be dived by 5' %}
{% endif %}
{% if loop.index is divisible by(3) %}
{% set order = 'I can be dived by 3' %}
{% endif %}
<div>
<b>{{ loop.index }}:</b>{{ order }} - {{ item }}
</div>
You could do something like this if a class is enough:
Your views template:
{% for row in rows %}
<div class="{% if loop.index == 1 %}first_element{% endif %}">
{{ row.content }}
</div>
{% endfor %}
And then just style it appropriately.
On a clients homepage they want 'all the products' listed with a load more button at the bottom.
There are four categories and each has a different color associated. I want to pull in all the products by date listed order and apply a class to the product depending on the category.
Currently I have
{% assign collection = collections.all %}
{% for product in collection.products %}
{% if collection.handle == 'clothing' %}
<div class="theme-red overview-item">
{% elsif collection.handle == 'pictures' %}
<div class="theme-green overview-item">
{% elsif collection.handle == 'posters' %}
<div class="theme-blue overview-item">
{% elsif collection.handle == 'other' %}
<div class="theme-beige overview-item">
{% else %}
<div class="theme-none overview-item">
{% endif %}
...
</div>
{% endfor %}
This is currently picking up as theme-none and that's because I'm calling collections.all?
How do I get all the products shown regardless of a collection and then apply do something as per the if/else statements like above.
Any ideas, I've tried to see if product.collections, collection.all_types with no happiness.
The reason you're getting theme-none is because your if statement checks if the collection's handle is 'clothing', 'pictures', etc. but you've set the collection to collections.all so it's never going to match any of those conditions.
What you want to do instead is check if the current product is within one of those collections. For example:
{% assign collection = collections.all %}
{% for product in collection.products %}
{% for c in product.collections %}
{% if c.handle == 'clothing' %}
{% assign theme = "red" %}
{% elsif c.handle == 'pictures' %}
{% assign theme = "green" %}
{% elsif c.handle == 'posters' %}
{% assign theme = "blue" %}
{% elsif c.handle == 'other' %}
{% assign theme = "beige" %}
{% else %}
{% assign theme = "none" %}
{% endif %}
{% endfor %}
<div class="theme-{{ theme }} overview-item">
...
</div>
{% endfor %}
I have a twig template with the following block:
{% block dashboard %}
{% include "::user_dashboard.html.twig" %}
{% endblock dashboard %}
Later in that template, I want to set a class on a div based on whether or not there is anything in that block (i.e., by default, it will have the include above, but children of this template may override it and empty it out).
What I had (that somewhat worked) was ...
{% set _dashboard = block('dashboard') %}
{% set _mainWidth = ( _dashboard|trim is empty ? "no-dashboard" : "with-dashboard" ) #}
<div id="main" class="{{ _mainWidth }}">
The problem here is that whole dashboard block gets called twice. This wouldn't bother me too much except that block renders a few controller actions, i.e. ...
{% render "UserWidget:userAppMenu" %}
... and the code in that action is being called twice. For various reasons, not the least of which is performance, this messes with some of the stuff in that dashboard block.
So, my question is ... is there any way to tell if that block is empty without loading it twice? Is there something really simple I'm missing or is this even possible?
Thanks!
EDIT:
Here is my full template if it helps clarify things:
{% extends '::base.html.twig' %}
{% block layout %}
{% block header %}
{% include "::header.html.twig" %}
{% endblock header %}
<div id="container" class="row-fluid">
{% block dashboard %}
{% include "::user_dashboard.html.twig" %}
{% endblock dashboard %}
{% set _dashboard = block('dashboard') %}
{% set _mainWidth = ( _dashboard|trim is empty ? "no-dashboard" : "with-dashboard" ) %}
<div id="main" class="{{ _mainWidth }}">
<h1 class="page-title">{% block page_title %}{% endblock %}</h1>
{% block main_filters %}{% endblock %}
{% if app.session.flashbag.has('message') %}
<div class="alert alert-block alert-success">
<ul>
{% for flashMessage in app.session.flashbag.get('message') %}
<li>{{ flashMessage }}</li>
{% endfor %}
</ul>
</div>
{% endif %}
{% if app.session.flashbag.has('warning') %}
<div class="alert alert-block alert-success">
<ul>
{% for flashWarning in app.session.flashbag.get('warning') %}
<li>{{ flashWarning }}</li>
{% endfor %}
</ul>
</div>
{% endif %}
{% block body %}{% endblock %}
{% block footer %}
{% include "::footer.html.twig" %}
{% endblock footer %}
</div>
</div>
{% endblock layout %}
Here you can see on lines 11 and 15 - both of those actually seem to include and process what is in that include.
What about this? This way the block should only be rendered once, when you call block('dashboard').
{# at top of twig #}
{% set _dashboard = block('dashboard') %}
{# where ever you include your block #}
<div>
{{ _dashboard|raw }}
</div>
{# and your main #}
{% set _mainWidth = ( _dashboard|trim is empty ? "no-dashboard" : "with-dashboard" ) #}
<div id="main" class="{{ _mainWidth }}">
I'm using Symfony2 with Twig and when trying to determine the class that should be a div Twig says that all 4 classes are active even beeing in an if..else clause.
Redirect has only 1 value. I checked the syntax and I think it's correct so maybe I'm missing something.
It's correct my code or is something wrong in the Twig comparision (equality or if..else clause)?
Here is the Twig code:
{% if redirect == 'a' %}
{% block classA 'active' %}
{% elseif redirect == 'b' %}
{% block classB 'active' %}
{% elseif redirect == 'c' %}
{% block classC 'active' %}
{% else %}
{% block classD 'active' %}
{% endif %}
And the controller code:
[...]
$redirect = "a";
return $this->render('FrontendBundle:Default:delete.html.twig', array(
'id' => $id,
'redirect' => $redirect,
'text' => $text)
);
Edited.
Solution
I found that it's not possible to use if clauses out of a block, so the solution goes ahead using one block for each class.
I've also thought that a better solution would be to use a dynamic name block, but i read that's not possible.
Finally I found this that solve my problem in a different way: http://peter-hoffmann.com/2012/highlight-active-menu-item-with-twig-and-silex.html
Kind regards.
Even though this question is old, I want to clarify a few things, since there is no real answer provided.
The underlying problem here is that block is evaluated during compile time, while if is evaluated during run-time. This means that blocks are always defined, one cannot define blocks conditionally. That is also the reason why blocks cannot have dynamic names.
With the template from the question, this is not a problem:
classes.html.twig:
{% if redirect == 'a' %}
{% block classA %}active{% endblock %}
{% elseif redirect == 'b' %}
{% block classB %}active{% endblock %}
{% elseif redirect == 'c' %}
{% block classC %}active{% endblock %}
{% else %}
{% block classD %}active{% endblock %}
{% endif %}
If we render this, we get 'active', i.e. the expected output. While each block is defined, only one of them is rendered, because of the if. The problem is only revealed if we have inheritance. So let's say we have the following parent template (I assume something like that was used by the poster):
parent.html.twig:
{% block classA %}{% endblock %}
{% block classB %}{% endblock %}
{% block classC %}{% endblock %}
{% block classD %}{% endblock %}
And change our extending template to extend this (also added classE for demonstration purposes):
classes.html.twig:
{% extends "parent.html.twig" %}
{% if redirect == 'a' %}
{% block classA %}active{% endblock %}
{% elseif redirect == 'b' %}
{% block classB %}active{% endblock %}
{% elseif redirect == 'c' %}
{% block classC %}active{% endblock %}
{% else %}
{% block classD %}active{% endblock %}
{% endif %}
{% block classE %}undefined{% endblock %}
Now, if we render classes.html.twig, we get 'activeactiveactiveactive'. As before, the blocks are all defined with 'active', but the parent template has no conditional rendering, so all of them are shown. Block 'classE' is not rendered, because it is not defined in the parent template.
To fix this, one needs to essentially swap the if and block statements.
{% extends "parent.html.twig" %}
{% block classA %}
{% if redirect == 'a' %}
active
{% endif %}
{% endblock %}
{% block classB %}
{% if redirect != 'a' and redirect == 'b' %}
active
{% endif %}
{% endblock %}
{% block classC %}
{% if redirect != 'a' and redirect != 'b' and redirect == 'c' %}
active
{% endif %}
{% endblock %}
{% block classD %}
{% if redirect != 'a' and redirect != 'b' and redirect != 'c' %}
active
{% endif %}
{% endblock %}
Sadly, we lose the if/else structure when we do this, so we have to write more conditions. To fix this, we can add an intermediate step using a variable.
{% extends "classes.html.twig" %}
{% if redirect == 'a' %}
{% set render = 'a' %}
{% elseif redirect == 'b' %}
{% set render = 'b' %}
{% elseif redirect == 'c' %}
{% set render = 'c' %}
{% else %}
{% set render = 'd' %}
{% endif %}
{% block classA %}
{% if render == 'a' %}
active
{% endif %}
{% endblock %}
{% block classB %}
{% if render == 'b' %}
active
{% endif %}
{% endblock %}
{% block classC %}
{% if render == 'c' %}
active
{% endif %}
{% endblock %}
{% block classD %}
{% if render == 'd' %}
active
{% endif %}
{% endblock %}
I'm not sure if you're taking the most efficient approach for this kind of behavior, but regardless, shouldn't your blocks be defined like this?
{% block classA %}active{% endblock %}