Twig template section with variable - twig

Im writing little CMS, for this project Im using Laravel/Lumen FW and Twig engine for templates.
I would like to had option to dynamically edit front page, and her sections. Sections of my front page, are stored in mySQL base as text where I putting my html code of section. Section is printed by Twig, by for statement.
Everything work's fine until, I put another variable into my section content in mySQL base.
I does it becouse I want to made child element for my section, which could be displayed only into her area.
Twig for loop:
{% for section in sections %}
{{ section.content }}
{% endfor %}
Value of section.content in mySQL base:
Lorem ipsum {{ section.name }}
Result which I saw is plain text, without rendering by twig, so it looks like content in base.
Lorem ipsum {{ section.name }}
What could I do to print variable inside other variable in Twig engine?
Thanks.

Related

Why twig code in craftcms can't generate new code on localhost?

In craftCMS I've created a field to load content but this field is not showing up when i change my code in the template. I've checked if I used the correct folder
At first i thought it was the cache but when i go to utilities to clear the cache the same error still occurs. Also when I write any new character other than twig code the browser gives an error with the new code but when I delete it, it's still the same old code
Here is my code:
{% extends "index" %}
{% block content %}
This is not generate on my local
<div class="can't load new code below and new class right here"
{{ entry.headingDescription }}
{{ entry.headingTitle }}
</div
{% endblock %}
My structure:

Render a link field inside a paragraph template drupal 8

I have a paragraph called link. In this paragraph there is a single link field that allows multiple values. In the paragraph-link.html.twig file I want to render all of the links added to the paragraph. Instead I get the same link duplicated as many times as the number of link values. So if I add two links, it renders the first link twice. I also need it to work with external and internal links. Currently it only renders the external links properly (but only ever renders the first one).
{% for item in paragraph.field_link %}
{{ paragraph.field_link.title }}
{% endfor %}
Thanks for the comments, the following is working for external links but not internal ones. Internal link URI renders as "internal:/"
{% for item in paragraph.field_link %}
{{ item.title }}
{% endfor %}
With the help of the comments I was able to get this working as I wanted within the paragraph template. Below is the working code for a Link field that allows multiple values within a paragraph field.
{% for item in paragraph.field_link %}
{{ item.title }}
{% endfor %}

Choose twig block process order

I want to make modular css load with instruction in twig
{{ addCss("csspath") }}
{# rest of template #}
and then write all css in a twig block in my html header like this :
{% block css %}
{{ writeCss() }}
{% endblock %}
My custom function work well, all css store with addCss will be write by writeCss but I have some problem with twig processing order. Css needs to be in head html tag and because of that twig process writeCss before all my addCss call.
I've made some test to guess twig process order by i have no ideo of how control it.

How to push values to array in templates and partials to output them in layout?

We are using Twig as our templating engine but I'm stuck with a problem of the rendering order now. See - https://straightupcraft.com/articles/twig-processing-order
We are using amp for our new site and with amp and web components in general it is necessary to import the components (once) to use them. So the idea was to create a Twig Extension to accomplish exactly this. Everytime a component is used it is called via this twig function call. The function is checking the component, adding it to a stack and you can use it from now on. The stack then is transformed into a list of imports for the head of the page.
The problem here is Twigs top to bottom rendering. When I call said function in a partial or a template the rendering of "layout.twig" already took place and all function calls below/after are not affecting the stack.
Is there an option to change the rendering to inside out, so that the rendering is first using the lowest partial and "bubbles" up to templates and finally layout without them rendering before?
Another way to get the values in layout would nice as well.
Desired behavior:
Layout.twig
{{ getAllComponents() }}
{# should output component1 and component2 #}
{% block content %}
Page.twig
{% extends Layout.twig %}
{{ addComponent('component1') }}
{% include partials.twig %}
<component1>...</component1>
partials.twig
{{ addComponent('component2') }}
<component2>...</component2>
Actual behavior:
Layout.twig
{{ getAllComponents() }}
{# is empty #}
There is no option to change this behavior. However you can use a trick to archive this:
Render your content to a variable before you call getAllComponents()
layout.twig
{% set mainContent %}
{% block content %}{% endblock %}
{% endset %}
{{ getAllComponents() }}
{{ mainContent }}
There actually is a magical solution to this problem -- some genius wrote this Deferred Twig Extension which lets you run some code (output a variable, call a function, etc) in a block near the top of your layout, but wait until the rest of the twig templates have parsed before executing them. There's an example on that github page showing how you can achieve this.
As far as I know, no you cannot switch the rendering of a TWIG template.
However, I would recommend possibly looking at the {% embed %} or {{ render }} tags.
Embed allows specific TWIG files to be placed within others with variables, so you could pass each component into their relevant partials.twig file.
Render allows the use of embedding a separate controller action, so you create a ControllerAction that took in a component variable and renders its own TWIG file.
Documentation on Embed: https://twig.sensiolabs.org/doc/2.x/tags/embed.html
Documentation containing Render: https://twig.sensiolabs.org/doc/2.x/api.html

Accessing individual fields in Drupal 8 views templates

I'm having trouble doing something that I think should be relatively simple drupal 8 views.
I have a content type called Countries. I would like to display the 3 latest country nodes on my homepage in a views block. Each country is displayed with the class "views-row" on the container div. I am using views--view--unformatted--countries--block_1.tpl to template the output.
I would like to output something like the following markup:
<a class="view-row-1" href="/link/to/node">
<img src="source-of-teaser-image.png">
<h3>Title of node</h3>
</a>
<a class="view-row-2" href="/link/to/node">
<img src="source-of-teaser-image.png">
<h3>Title of node</h3>
</a>
<a class="view-row-3" href="/link/to/node">
<img src="source-of-teaser-image.png">
<h3>Title of node</h3>
</a>
The problem I'm having is accessing individual fields in the template. If I use a view mode, I can access individual fields. If I select "show fields" in the view, I can add a field for "view result counter" and "path", which would allow me to add the "view-row-N" class and link the a tag to the node, but I can't get access to the fields individually. I have the {{row.content}} variable, but any attempt to dig further into the variable (eg row.content.field_name) gives me nothing and calling a {{dump(row.content)}} crashes the website.
I can't output this as a view mode for 2 reasons. I don't have access to the "view result counter" or "path" fields in a view mode and, even if I had these variables, some fields would be nested inside others (The image and title are nested inside the )
I feel this should really be as simple as
<a class="view-row-{{ row.content.view_result_counter }}" href="{{ row.content.path }}">
etc but I've tried everything I can think of. Am I completely on the wrong path? Twig and I are not getting along so far...
I have figured a way using kint.
Inside your views-view-unformatted.html.twig use the following code to display your individual fields:
{% for row in rows %}
{{ row.content['#view'].style_plugin.render_tokens[ loop.index0 ]['{{ YOUR_FIELD_NAME }}'] }}
{% endfor %}
Using content/view mode works in your case.
1/ In "views-view-unformatted.html.twig" you can use "loop.index" in the "for" loop to get index of the current row and add it to the "row_classes" variable.
2/In the twig template for the node you can use something like :
<a href="{{ path('entity.node.canonical', {'node': node.id}) }}">
{{ content.field_img }}
{{ node.getTitle()}}
</a>
3/You will probably get extra html but you can get rid of most of it by overriding relevant templates.
I am not sure if it's what you expect, but you can override field template:
Enable Twig debugging: https://www.drupal.org/node/1903374
Inspect your page in browser (if site is in debug mode there are comments in html with paths to templates for each element).
For example this is field template: core/themes/stable/templates/views/views-view-fields.html.twig
Copy required template into your theme folder
Add or modify markup.
You can debug template using {{ dump(variable) }} or {{ kint(variable) }}
In your case you should be using views-view-fields--countries--block_1.html.twig instead of views-view-unformatted--countries--block_1.html. twig file.
Views fields template will iterate on all rows of result. Your views-view-fields--countries--block_1.html.twig should contain below code -
<div>
<a class="view-row" href="{{variable-to-print-path }}">
<img src="{{ image-path }}">
<h3>{{ fields.title.content</h3>
</a>
</div>
You can check the fields array by using kint function like - {{ kint(fields) }}
Check for image path and anchor path variable from output of kint function.
If you want to do this in views-view-unformatted--countries--block_1.html. twig, then you can access the field values like below -
{% for row in rows %}
{% set photo = file_url(row['content']['#row']._entity.field_page_photo.entity.fileuri) %}
<li><img src={{ photo }} class="img-responsive img-circle"></li>
{% endfor %}
The solution is simple use the views fields template.
I created a new template under themes/templates folder:
views-view-fields--VIEW-NAME.html.twig
And now you can access your fields values like this:
{{ fields.field_NAME.content }}
If you want to access Individual fields in Views Twig Template along with Row Information,
Override Views Fields Template in your custom theme :
views-view-fields--VIEW-NAME.html.twig
To get the row index in the same file, Use :
{{ row.index }}

Resources