I'm very new to drupal 8 and I'm doing my first custom template, but I'm having some trouble at the very beginning.
I'm trying to get in the page.html.twig the site_logo, but that is always null. I've checked that in my block setting the checkbox "Toggle branding elements" is enabled.
The code is simply the following but no way to show the logo. What am I missing?
{% if site_logo %}
<a class="logo navbar-btn pull-left" href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home">
<img src="{{ site_logo }}" alt="{{ 'Home'|t }}" />
</a>
{% endif %}
{% if site_name %}
<a class="name navbar-brand" href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>
{% endif %}
{% if site_slogan %}
<p class="navbar-text">{{ site_slogan }}</p>
{% endif %}
This code is within a standard page.html.twig template.
Sorry if this is a silly question, but we all need to start somewhere...
Thank you
Luca
There is no site_logo variable in page.html.twig, if you wish to customize site_logo you can use block--system-branding-block.html.twig
Related
I'm not familiar with timber at all, but am helping a friend finish up a project that was built with it. So any help would go a long way please!
I have only the first two tiers showing up. Is there a way to call on the child of a child?
I'm using the code here, and added to it another tier under child https://timber.github.io/docs/guides/menus/
{% if menu %}
<div class="header-menu-items">
<div class="header-menu-item mod-title">
<a href="{{ site.url }}" class="" rel="home">
<div class="header-item-logo">
<div class="sitelogo">{{ site.name }}</div>
</div>
</a>
</div>
{% for item in menu.get_items() %}
<div class="header-menu-item {{ item.current ? 'is-active' : '' }}">
<div class="header-menu-item-link">
<a target="{{ item.target }}" href="{{ item.link }}">{{ item.title }}</a>
</div>
<div class="header-menu-item-triangle"></div>
<div class="header-menu-item-mega {{ item.section_colour ? " mod-#{item.section_colour}" : '' }}">
{% if item.master_object.thumbnail %}
<div class="mega-image mod-image" style="background-image: url( {{item.master_object.thumbnail.src('thumbnail') }} )">
{% else %}
<div class="mega-image">
{% endif %}
{{ item.title }}
</div>
<div class="mega-items">
{% for child in item.children %}
<div class="mega-item">
<a target="{{ child.target }}" href="{{ child.link }}">
<span class="mega-item-title">{{ child.title }}<br /></span>
<span class="mega-item-excerpt">Mega menu description lorem ipsum dolores</span>
</a>
</div>
{% for child in child.children %}
Just testing to see if it'll even show up first before applying style<br />
{{ child.title }}<br />
{% endfor %}
{% endfor %}
</div>
</div>
</div>
{% endfor %}
</div>
{% endif %}
You can access menus several layers deep by nesting for loops inside of one another. Here is a code snippet that I have tested and works.
{% for item in menu__main.items %} {# This is the top level #}
<p>{{ item }}</p>
{% if item.children %}
{% for child in item.children %} {# 2nd Level #}
<p><em>{{ child }}</em></p>
{% if child.children %}
{% for third in child.children %} {# 3rd Level #}
<p><strong>{{ third }}</strong></p>
{% endfor %} {# for third in child.children #}
{% endif %} {# if child.children #}
{% endfor %} {# for child in item.children #}
{% endif %} {# if item.children #}
{% endfor %} {# for item in menu__main.items #}
I have added comments to the end of the lines to hopefully make this more clear. So at the top, you are looping through item in menu__main.items
Then to get the children inside of these, you loop through item.children since item is the variable that represents each nav item at the top/main level. You loop through item.children to get to the next level or the children inside of the main/top level.
Then to get inside of the third level, you loop through child.children since child is the variable that represents the 2nd level. We want to loop through the children of this 2nd level. so we do third in child.children. third is the variable that represents the items 3 levels down.
I hope you can see the pattern here and you can continue this even further if you have items at even deeper levels, although at some point it will probably get ridiculous. Like if you have items nested 5 or 6 levels deep.
Let me know if that makes sense and if not I will be more than happy to try and explain it another way if you still have questions.
Cheers
I would add some links to differents locales versions in my existing website. It works quite well but it is pretty ugly^^
<li>
<a href="{{ path(app.request.attributes.get('_route'), app.request.attributes.get('_route_params')|merge(app.request.query.all|merge({_locale: 'es'}))) }}">
<img src="{{ asset('img/flags/es.jpg') }}" alt="es">
</a>
</li>
<li>
<a href="{{ path(app.request.attributes.get('_route'), app.request.attributes.get('_route_params')|merge(app.request.query.all|merge({_locale: 'fr'}))) }}">
<img src="{{ asset('img/flags/fr.jpg') }}" alt="fr">
</a>
</li>
Do you have an idea for doing it better ?
You may need this in many pages and/or more than one project. Here's a possible way based on what I've been using in some:
# app/config/config.yml
# ...
parameters:
# ...
app_locales: [en, es, fr]
twig:
# ...
globals:
locales: %app_locales%
# ...
Then a template for holding flags:
{# app/Resources/views/includes/_flags.html.twig #}
{% set route = app.request.attributes.get('_route') %}
{% set route_params = app.request.attributes.get('_route_params') %}
{% set params = route_params|merge(app.request.query.all) %}
{# You may want to not print a flag/link for current view, the "if" here let you handle it #}
{% for locale in locales if locale != app.request.locale %}
<li>
<a href="{{ path(route, params|merge({ _locale: locale })) }}">
<img src="{{ asset('img/flags/' ~ locale ~ '.jpg') }}" alt="{{ locale }}">
</a>
</li>
{% endfor %}
Finally include flags in any view:
{# app/Resources/views/base.html.twig #}
{% include 'includes/_flags.html.twig' %}
I pretty new to Twig first of all!
I'm trying to loop through an array of products, like so:
{% for product in products %}
What I further try to do is to check if one of the product.title equals the name lookbook.
if so then this product cannot be showed in my template/page. The things I tried just display an empty div instead of not showing anything.
Is there any way to accomplish this?
What I have so far:
{% for product in products %}
{% if product.title == 'lookbook' %}
.... dont show?? ....
{% else %}
<div class="product>
<h3>{{ product.fulltitle }}</h3>
<a href="{{ product.url | url }}" title="{{ product.fulltitle }}">
<img src="{{ product.image | url_image('220x220x2', product.fulltitle) }}" />
</a>
</div>
{% endif %}
{% endfor %}
I also tried:
{% for product in products and product.title != 'lookbook' %}
Thanks in advance!
Official doc :
{% for user in users if user.active %}
<li>{{ user.username|e }}</li>
{% endfor %}
In your case :
{% for product in products if product.title != 'lookbook' %}
Update 08/2021
Tip
As of Twig 2.10, use the filter filter instead, or an if condition
inside the for body (if your condition depends on a variable updated
inside the loop and you are not using the loop variable).
Try:
{% for product in products %}
{% if product.title != 'lookbook' %}
<div class="product>
<h3>{{ product.fulltitle }}</h3>
<a href="{{ product.url | url }}" title="{{ product.fulltitle }}">
<img src="{{ product.image | url_image('220x220x2', product.fulltitle) }}" />
</a>
</div>
{% endif %}
{% endfor %}
I searched a lot but could not find a solution to achieve this:
{% for i in 1..6 %}
<li>
{% image '#MyBundle/Resources/public/images/college/demo/facilities/thumbs/laboratory/'~i~'.jpg' %}
<img class="facThumb" src="{{ asset_url }}" alt="Facilitiy"/>
{% endimage %}
</li>
{% endfor %}
Name of the images should be dynamic. Please help.
The above code throws error:
Unexpected token "operator" of value "~"
Solution:
According to what #Nic posted (accepted answer), the only workaround seems to be this:
{% for i in 1..6 %}
<li>
<img src="{{ asset('bundles/digicreekil/images/college/demo/facilities/thumbs/laboratory/t'~i~'.jpg') }}" alt='demo'/>
</li>
{% endfor %}
You can't use variables in Assetic (and therefore in the {% image %} tag).
The reason is, according to Kris Wallsmith (creator of Assetic):
(...) that Assetic needs to be able to parse a Twig template and extract any assets that are defined there. This is not possible if you use a variable in the tag.
Christophe Coevoet adds:
The assets are dumped when using the CLI command for this, not when rendering the page. So you cannot use variables as you don't have their values.
See this GitHub issue for the complete conversation.
Remember that Assetic creates and optimizes the assets when you run app/console assetic:dump, not when the page is actually rendered. Therefore, it cannot know of any values, it can only work with static assets.
So if you want to work with dynamic assets, you'll have to do something like this:
{% for i in 1..6 %}
<li>
<img class="facThumb" src="{{ asset('images/college/demo/facilities/thumbs/laboratory/'~i~'.jpg') }}" alt="Facilitiy"/>
</li>
{% endfor %}
In this case, you can iterate through the numbers 1-6 and use the variable in the asset's URL because you're not using Assetic, but Twig's asset() function. asset() simply returns the full URL of the asset, it doesn't do any optimizations so it can be executed during runtime.
But if you want to use Assetic's optimizations and filters, you can also give it the static assets:
<li>
{% image '#MyBundle/Resources/public/images/college/demo/facilities/thumbs/laboratory/1.jpg' %}
<img class="facThumb" src="{{ asset_url }}" alt="Facilitiy"/>
{% endimage %}
</li>
<li>
{% image '#MyBundle/Resources/public/images/college/demo/facilities/thumbs/laboratory/2.jpg' %}
<img class="facThumb" src="{{ asset_url }}" alt="Facilitiy"/>
{% endimage %}
</li>
<li>
{% image '#MyBundle/Resources/public/images/college/demo/facilities/thumbs/laboratory/3.jpg' %}
<img class="facThumb" src="{{ asset_url }}" alt="Facilitiy"/>
{% endimage %}
</li>
(etc.)
This way, you'll have to copy the same code 6 times, but it allows you to use Assetic.
I have code like that
{% for i in 1..25 %}
<li class="span4">
{% set screen = '#TfptPortfolioBundle/Resources/public/images/bekic/screen' ~ i ~ '.jpg' %}
<a href="#myModal" class="thumbnail" data-toggle="modal">{% image screen %}
<img src="{{ asset_url }}" alt="Młody Lider Innowacji" />
{% endimage %}</a>
</li>
{% endfor %}
But symfony throws an error "Unexpected token "name" of value "screen"" on lane
<a href="#myModal" class="thumbnail" data-toggle="modal">{% image screen %}
How can i concat string to use it as asset url?
So it works:
{% for i in 1..25 %}
<li class="span4">
{% set screen = 'bundles/tfptportfolio/images/bekic/screen' ~ i ~ '.jpg' %}
<a href="#myModal" class="thumbnail" data-toggle="modal">
<img src="{{ asset(screen) }}" alt="Młody Lider Innowacji" />
</a>
</li>
{% endfor %}
Obviously you must have executed the command app/console assets:install --symlink to create links on web directories.
EDIT:
Enter into a tag assetic a variable in the way you did is not possible.
To do this you must declare the variable in config.yml.
Here you can see the documentation: documentation assetic.
At the moment the only way is what I described above.