I am looking for a way to add a class to the body if there is a particular string in the URL.
I have kind of got the logic working, but the following syntax:
1. Is not DRY
2. Only cycles the first iteration because of the if statement
I think I need to somehow place an array after the 'if' statement, but not sure on the syntax.
any help would be appreciated.
thanks
{% if 'bus-data' in post.link %}
<body class="{{body_class}} jumbo" data-template="base.twig">
{% elseif 'bus-data' not in post.link %}
<body class="{{body_class}}" data-template="base.twig">
{% endif %}
{% if 'taxi-data' in post.link %}
<body class="{{body_class}} jumbo" data-template="base.twig">
{% elseif 'taxi-data' not in post.link %}
<body class="{{body_class}}" data-template="base.twig">
{% endif %}
{% if 'education-data' in post.link %}
<body class="{{body_class}} jumbo" data-template="base.twig">
{% elseif 'education-data' not in post.link %}
<body class="{{body_class}}" data-template="base.twig">
{% endif %}
{% if 'public-data' in post.link %}
<body class="{{body_class}} jumbo" data-template="base.twig">
{% elseif 'public-data' not in post.link %}
<body class="{{body_class}}" data-template="base.twig">
{% endif %}
You could create a new filter to solve this,
Filter
$twig->addFilter(new Twig_SimpleFilter('contains', function ($value, $needles) {
if (!is_array($needles)) $needles = [ $needles, ];
foreach($needles as $needle) if (strpos($value, $needle) !== false) return true;
return false;
});
Twig
<body class="{{body_class}}{% if post.link|contains(['bus-data', 'taxi-data', 'education-data', 'public-data',]) %} jumbo{% endif %}" data-template="base.twig">
It seems I was probably over-complicating something that was quite simple, and walking away from it made it clearer.
I just tidied my 'else if' loop:
{% if 'bus-data' in post.link %}
<body class="{{body_class}} jumbo" data-template="base.twig">
{% elseif 'taxi-data' in post.link %}
<body class="{{body_class}} jumbo" data-template="base.twig">
{% elseif 'education-data' in post.link %}
<body class="{{body_class}} jumbo" data-template="base.twig">
{% elseif 'public-data' in post.link %}
<body class="{{body_class}} jumbo" data-template="base.twig">
{% else %}
<body class="{{body_class}}" data-template="base.twig">
{% endif %}
Related
I have an if/else condition in a twig template which switches the out tag of a block of code, however the inner block is the same. Is there a way to reduce the duplication without creating a separate file?
This is what I have at the moment:
{% if condition %}
<a href="">
{{ content }}
</a>
{% else %}
<span>
{{ content }}
</span>
{% endif %}
I was hoping to do something such as:
{% if condition %}
<a href="">
{% include mycontent %}
</a>
{% else %}
<span>
{% include mycontent %}
</span>
{% endif %}
{% mycontent %}
{{ content }}
{% endmycontent %}
Is such a thing possible?
If you don't want to use extra files you could use macro's :
{% import _self as macro %}
{% macro foo(content) %}
{{ content }}
{% endmacro %}
{% for condition in [0, 1, 0, 1, ] %}
{% if condition %}
{{ macro.foo('Bar') }}
{% else %}
<span>{{ macro.foo('Bar') }}</span>
{% endif %}
{% endfor %}
fiddle
What you want to do has to be done using the normal syntax. an extra file. and include this file.
But if u want to do this without extra file. use the {% set variablecontent = "put content here" %} and then in your "{% mycontent %}" part u put {{ variablecontent }}
hope this helps
I often have similar boilerplate code in Twig:
{% if (somelongcond) %}
<div>
{% endif %}
<p>Some long content</p>
{% if (somelongcond) %}
</div>
{% endif %}
The problem with the above is if the condition is changed, it can be a maintenance nightmare, I also have to go look all the way down to find the matching if statement and see if the condition is the same.
An alternative is something like this:
{% if (somelongcond) %}
<div>
{% include 'content' %}
</div>
{% endif %}
{% include 'content' %}
But that requires creating a new file, which can become a mess if I need to do this many times.
Is there a better way to do the above.
There is a good example here: https://gist.github.com/jakedohm/39190ec533e69e83b9cee4bdf3898a60
Result:
{% set content %}
<p>Some long content</p>
{% endset %}
{% if somelongcond %}
<div>
{{ content }}
</div>
{% else %}
{{ content }}
{% endif %}
This is a bit shorter
{{ if somelongcond ? '<div>'|raw }}
<p>Some long content</p>
{{ if somelongcond ? '</div>'|raw }}
Then, if the same condition is repeated, you can maybe set it at the top of your file, then if you need to change it you only have to do it once.
{% if somelongcond %}
{% set cond = true %}
{% else %}
{% set cond = false %}
{% endif %}
{{ if cond ? '<div>'|raw }}
<p>Some long content</p>
{{ if cond ? '</div>'|raw }}
i have this website http://sds-test.nowcommu.myhostpoint.ch/de (please use the "de" at the end) and the last link of the navigation "RECHENZENTRUM" does not works on desktop but works on mobile. How can i solve it? This is the twig code:
{% extends 'partials/base.html.twig' %}
{% set show_onpage_menu = header.onpage_menu == true or header.onpage_menu is null %}
{% macro pageLinkName(text) %}{{ text|lower|replace({' ':'_'}) }}{% endmacro %}
{% block javascripts %}
{% if show_onpage_menu %}
{% do assets.add('theme://js/singlePageNav.min.js') %}
{% endif %}
{{ parent() }}
{% endblock %}
{% block bottom %}
{{ parent() }}
{% if show_onpage_menu %}
<script>
// singlePageNav initialization & configuration
$('#navbar').singlePageNav({
offset: $('#header').outerHeight(),
filter: ':not(.external)',
updateHash: true,
currentClass: 'active'
});
</script>
{% endif %}
{% endblock %}
{% block header_navigation %}
{% if show_onpage_menu %}
<ul class="navigation">
{% for module in page.collection() %}
{% set current_module = (module.active or module.activeChild) ? 'active' : '' %}
<li class="{{ current_module }}">{{ module.menu }}</li>
{% endfor %}
{% set datacenter_page = page.find('/services/datacenter') %}
<li>{{ datacenter_page.menu() }}</li>
</ul>
{% else %}
{{ parent() }}
{% endif %}
{% endblock %}
{% block content %}
{{ page.content }}
{% for module in page.collection() %}
<div id="{{ _self.pageLinkName(module.menu) }}"></div>
{{ module.content }}
{% endfor %}
{% endblock %}
The 'rechenzentrum' link is rendered correctly, and copying the link location via right click gives a correct URL that opens a seemingly correct page. So the template rendering is fine.
The link has two onclick handlers attached to it, though. Probably one of them fails and thus prevents navigation. (The JS is minified so I did not try to debug it.)
I have
<div class="{{element.type == 'cover' ? 'cover-full' : 'fixed-width'}}">
<div class="element
{% if element.type == 'text' %}
element-text
{% elseif element.type =='image' %}
element-image
{% endif %}">
{% if element.type == 'text' %}
...
{% elseif element.type == 'image' %}
...
{% endif %}
</div>
As you can see I have to make the same if condition multiple times.
How can avoid to repeat every time the condition? I'm pretty new to Twig templating.
You will often have abit redundancy. But IMO it is a better practice to repeat HTML blocks instead of twig.
{% if element.type == 'text' %}
<div class="element element-text">
content
</div>
{% elseif element.type =='image' %}
<div class="element element-image">
content
</div>
{% else %}
{% include 'snippet.html' %}
{% endif %}
You have more valid and more readable HTML
If you change a condition you only have to change it one time
You could use {% include 'snippet.html' %} to reduce redundancy in HTML blocks
You can simplify your code:
{% if element.type in ['text','image'] %}element-{{element.type}}{% endif %}
You can use twig macro. On the top of that template add
{% macro element_class(type) -%}
{% if type in ['text','image'] %}element-{{type}}{% endif %}
{%- endmacro %}
{% from _self import element_class %}
And later:
<div class="{{element.type == 'cover' ? 'cover-full' : 'fixed-width'}}">
<div class="element {{ element_class(element.type) }}">
You can learn more about macros in Twig documentation.
I'm using Twitter Bootstrap and Symfony 2 with Twig. I have this for all my pages:
<div class="navbar navbar-inverse navbar-static-top">
<div class="navbar-inner">
<a class="brand" href="{{ path('home') }}">BudgetTracker</a>
<ul class="nav">
<li class="active">Expenses</li>
<li>Reports</li>
<li>Categories</li>
<li>Months</li>
<li>Bank Accounts</li>
</ul>
</div>
</div>
I don't want to copy it on each page... The problem is that the class active attribute should be put only for the cuurent page. Is there a way to succeed without using JavaScript, only with some king of macro or include? Thank you very much in advance!
UPDATE
<div class="navbar navbar-inverse navbar-static-top">
<div class="navbar-inner">
<a class="brand" href="{{ path('home') }}">BudgetTracker</a>
<ul class="nav">
{% if var == 'Expenses' %}
<li class="active">Expenses</li>
{% else %}
<li>Expenses</li>
{% endif %}
{% if var == 'Reports' %}
<li class="active">Reports</li>
{% else %}
<li>Reports</li>
{% endif %}
{% if var == 'Categories' %}
<li class="active">Categories</li>
{% else %}
<li>Categories</li>
{% endif %}
{% if var == 'Months' %}
<li class="active">Months</li>
{% else %}
<li>Months</li>
{% endif %}
{% if var == 'Bank Accounts' %}
<li class="active"><li>Bank Accounts</li>
{% else %}
<li><li>Bank Accounts</li>
{% endif %}
</ul>
</div>
</div>
My not very elegant try. And I call it with:
{% include 'EMBudgetTrackerBundle::navbar.html.twig' with {'var':'Categories'} %}
The easy way to do this is using the routes:
<ul class="nav nav-pills">
<li {% if app.request.attributes.get('_route') == 'your_route' %} class="active" {% endif %}>
MyTitle
</li>
...
</ul>
This is an adaptation of a solution provided by #Winzou.
It is quite simple:
Define this as a single twig with
{% block menu_block %} //your content here {% endblock %}
Use your block in every page
{% block menu_block %} {{ parent() }} {% endblock %}
Make conditional statements for give your class at the current menu element. Obviously you have to pass to your twig (or retrieve from request, i.e.) the name or id of your page, to make what you're trying to do
Here's an example.
{% if menu.url == current_url %} class="active"{% endif %}