Get URL of a link field in Drupal 8 Views-View-Fields - drupal

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>

Related

How can I display image of dynamic field in drupal 8?

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 }}

Theming Drupal 8 - Loop through all posted articles and print specific section

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>

How to get the field_image path with Twig in Drupal 8

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!

Twig - Get URL for canonical tag

I'm looking to create a dynamic rel="canonical" tag in my application which pulls in the current URL but want to ensure any query parameters are removed. E.g http://www.example.com/test/?page=2 should have the canonical as http://www.example.com/test/, therefore {{ app.request.uri }} doesn't work as this pulls in ?page=2 as well.
Does anyone know how to pull in the absolute path of a page without the query parameters?
This will work,
{{ url(app.request.attributes.get('_route'), app.request.attributes.get('_route_params')) }}
I just tried to dump baseUrl and can confirm that it does not work.
However, this works:
{{ app.request.getSchemeAndHttpHost ~ app.request.baseUrl ~ app.request.pathInfo }}
I know, it's not pretty but it does the job :)

Generate link for particular place without route name

I want to have a link to web/uploads/documents
Normally I get link as
{{ path('name in route.yml') }}
But there is no link name for web/uploads/documents
How can acess there in twig file??
Just typ web/uploads/documents? E.g.
{{ foovar }}

Resources