I am new to learning Drupal 8.
I need your help in how can i display dynamic images using Twig template. Also I have tried with below syntax.
{{ file_url(market.getFieldCollectionItem().field_turnpike_image.entity.uri.value|e) }}
{{ file_url(media.entity.field_image.entity.uri.value) }}
Using above syntax I could not display images using in twig template. Also with this syntax I have got some errors.
Please any one help me out to how can i display images using twig template.
Thank you.
Use the following snippet to get the image if you are in node twig template
{{ file_url(node.field_image['#items'].entity.uri.value) }}
even
{{ node.field_image.entity.url }}
Related
I am trying to create my first Drupal 8 theme. On the frontpage, I want to list all articles with the title, summary, date posted, etc.
I more or less achieved this using views. Basically {{ page.content }} in twig, but found it to be really inflexible and I didn't really get the results that I wanted. What I want to do is just to iterate through all the articles and print each section of that article "manually". For instance:
{% for page in pages %}
{{ page.content.title }}
{{ page.content.datePosted }}
{{ page.content.body }}
{% endfor %}
So that I can have more control of what is happening and not making a lot of configuration in the views module when deploying. What is the best soltuion to achieve this? Thanks!
I recommend to use Views. Configure you view (filter by content type, etc.), you have a lot of parameters to achieve what you need.
Set the view to show "Content" and give it a view mode (you can use the default teaser, full, or create your own view mode). Then you can create a custom template for this :
node--xxxx--teaser.html.twig
In order to know how to name your custom template file, enable Twig Debugging in sites/default/services.yml. Set the debug variable to true. And clear cache. Then, you will see in source code the template name suggestion like this :
<!-- FILE NAME SUGGESTIONS:
* node--1--full.html.twig
* node--1.html.twig
x node--oeuvre--full.html.twig
* node--oeuvre.html.twig
* node--full.html.twig
* node.html.twig
-->
In your twig, you can do that kind of templating :
{{ content.my_field_image[0] }}
<h2>{{ node.title.value }}</h2>
<p>{{ content.body }}</p>
I have a template views-view-fields.html.twig and created a view. I can access all the fields easily and also the link field. But it generates <a>. I want to extract link from this field.
I have searched SO and found some solution but they didn't work for me.
{{ fields.field_find_out_more_link[0]['#url'] }}
{{ fields.field_find_out_more_link.0['#url'] }}
{{ fields.field_find_out_more_link.url }}
Can anyone point me to right direction?
This is working for me in views-view-fields.html.twig for the link field :
text
Well, maybe I am a bit late but I think I found a proper answer to this.
In your View, you need to have a Link to Content field. Then, in the configuration of the field, you need to set to true the option "Show url as text". Finally, in your twig, you can set your button like:
Yeah
Hope this helps.
Based on Sébastien Gicquel answare i used it like this in a views-view-fields.html.twig template with a custom link field:
<a href="{{ fields.field_link.content|striptags|trim }}">
{{ fields.field_image.content }}
{{ fields.title.content }}
</a>
I have overridden the registration .twig files and it works except when the user doesn't enter matching passwords. How do I display any errors that are thrown by the registration process?
You can render your form errors by using form_errors function, like this:
{{ form_errors(form) }}
{{ form_errors(form.someField) }}
You should read this official documentation How to Customize Form Rendering to understand in deep how Symfony rendering your form view and how to custom the template as you want.
To make an animated slider, I overwrite a fields view template file in my own template named: views-view-fields--slider.html.twig
Inside that file I have access to a fields array to print out all the fields that are in my content-type slide.
The problem is that I need to get the path of the image file instead of the image itself, because I need the path for CSS background-image styling.
The following doesn't work:
<div class="jumbotron " ref="" style="background-image:url(?????);">
{{ file_url(fields.field_image.entity.fileuri) }}
</div>
I tried everything I good find on Google:
fields.field_image.entity.uri
fields.field_image.entity.uri.value
fields.field_image.entity.url
fields.field_image.entity.url.value
etc.
Has anyone an idea how it is done in Drupal 8 ?
Since you are in views-view-unformatted you should already have access individualy to each field of your content type Slide with {{ row.content }} and because of that you have to do:
{{ file_url(row.content.field_image.entity.fileuri) }}
Try {{ file_url(row._entity.field_image.entity.uri.value) }}.
It works for me.
<div style="background-image:url({{ file_url(row._entity.field_image.entity.uri.value) }});"></div>
I found this module: image_url_formatter, so in View interface, I can use this to formatter my image filed as path.
It works perfect, but if I turned the twig debug on, it wouldn't work, because it will output debug annotation. I don't know how to solved it yet.
I use fields.field_image.content to show the path, I don't konw whether it's rignt.
Solution without extra module:
In your Views:
1.Add your image filed to the Advanced/Relationship
2.Then in the filed section, change to File Group, you can see URI field，add it, and make sure you check "Display the file download URI"
3.Add your new field in the twig template: {{ field.uri.content }}
Done!
I'm using Gantry5 framework (with the g5_hydrogen theme) and I created a twig page template which works fine, except the shortcode for the Contact Form 7 plugin apparently does nothing - the form does not display on the page, and when I inspect the element in my browser I just see some blank space between the div tags. My current markup is something like this:
{% block content %}
<content>
<div class="dbc-contact-form">
{{ wp.do_shortcode('[contact-form-7 id="1234" title="Contact"]') }}
</div>
</content>
{% endblock %}
Someone else posted a similar question before, but unfortunately that solution doesn't help in my case - Wordpress twig template shortcode not displayed
Thanks for your help with this.
Try this - {{ post.post_content|shortcodes }}