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!
Related
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 }}
Here is the twig variable being set
{% set link = content.field_external_quote_link %}
When I just display the variable, it is coming out wrong.
For example if I do this in the HTML below:
TEXT EXAMPLE
It is dumping out devel code and other things I don't want. Is there something I need to do with the original variable set to get it to just dump the url in plain text?
{{ link.0.url }}
or
{{ link[0].url }}
or
You can make {{ link }} work, if you change your field settings within the node type display setting page, like this:
Goto your content type settings.
Goto: Manage Display
For the desired field, change format to display value as plain text or URL only.
WHich will tell drupal not to render it.
Now, clear cache. And, check again. It should work.
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 created a basic page with a NID of 176. My basic page content type contains a field called field_banner_image.
In my templates directory I created a file called page--node--176.html.twig and the template works.
I saw a few threads where you can access the node content via {{ content.field_name }}, however, my content appears to NULL every time.
I managed to output the URL of my image field via:
{{ file_url(node.field_banner_image.entity.uri.value) }}
I feel like there has to be an easier/better way of doing this. Any suggestions? Why is content null in my twig templates?
If your template is named page--node--176.html.twig, it is actually a page template overriding the base page template page.html.twig, so you will have access to all page variables but not those in your node.
Although your node type is called "page", it is still a node, and the template for it would be node--176.html.twig which overrides node.html.twig.
In your node--***.html.twig you will have access to the content variable. Let me know if you need help.
I am (still) trying to introduce http://xoxco.com/clickable/jquery-tags-input into a dedicated bundle. As far, I have a type as a child of text and a data transformer that converts comma-separated strings into arrays of Objects and vice versa.
Now I want to decorate the text field with the JQuery code linked above. As far as I understand, I have to define a block like
{% block manytomanycomboselector_widget %}
{% spaceless %}
{{ block('text_widget') }}
<script>
$(function(){
$("#{{ id }}").tagsInput();
});
</script>
{% endspaceless %}
{% endblock manytomanycomboselector_widget %}
in [MyTypeBundle]Resources/views/Form/fields.html.twig
Now, both the documentation and the answers for this question at StackOverflow state that I have to reference fields.html.twig somewhere either in the template that uses the form or in app/, but this doesn't seem to be necessarily for other field-type bundles, though I cannot see in their code why.
What do I have to configure inside the bundle besides this block in this file?
Also I didn't get where I have to put the css and js requirements for the header and how I deal with general requirements like jQuery itself.
I have the same issue & I resolve it by merging my field template in the twig.form.resources parameter.
So, in the DI extension of my bundle (MyBundle/DependencyInjection/MyBundleExtension.php), I add:
$container->setParameter('twig.form.resources', array_merge(
array('MyBundle:Form:field_widget.html.twig'),
$container->getParameter('twig.form.resources')
));
Be aware, your bundle must be registered after the TwigBundle in your AppKernel.
EDIT:
A form field is not linked to any JS or CSS. So, IMO, you have 2 solutions.
Firstly, you directly wrap your JS & CSS in your field template and your bundle stays stand-alone.
Secondly, you instruct final users that they need to include manually some JSS & CSS each time they use your field type.
The IoFormBundle & GenemuFormBundle uses the second solution like explain in their documentation.