This is my first effort at Twig development so please bear with me. I have a vanilla Drupal 8.1 site with a content type that contains just the body and a File type field called field_fichier_svg. This will contain SVG files (surprise!) and I want to override the Twig field rendering so that I can get the raw file name and wrap an "img" HTML tag around it.
I have successfully installed kint, and have overridden the field template with one called field--node--field-fichier-svg--icon.html.twig (the field is used in a content type called "icon") and this works.
I have also succeeded in running kint() and getting the output.
But none of the attempts I have made at getting the value of the field function. In the snippets below you can see the three different attempts I have made.
1) Try to identify the class that handles file entities and use that:
{%
set classes = [
'file'
]
%}
<img id="entity" src="{{file.label}}" />
2 & 3) Loop round "items" and try different things which I have tried to interpret from the kint output (kint does work by the way)
{% for item in items %}
<img id="label" src="{{ item.label }}"/>
<img id="array" src="{{item.content['#file'].values['filename']['x-default']}}" />
{{kint(item.content)}}
{% endfor %}
In all cases the "src" attribute is just blank.
To make it a bit more manageable I tried putting
{{dump(item.content|keys)}}
and I get this:
array(5) { [0]=> string(6) "#theme" [1]=> string(5) "#file" [2]=> string(12) "#description" [3]=> string(6) "#cache" [4]=> string(11) "#attributes" }
Then I tried
{{dump(item.content['#file']|keys)}}
and I get this:
array(11) { [0]=> string(3) "fid" [1]=> string(4) "uuid" [2]=> string(8) "langcode" [3]=> string(3) "uid" [4]=> string(8) "filename" [5]=> string(3) "uri" [6]=> string(8) "filemime" [7]=> string(8) "filesize" [8]=> string(6) "status" [9]=> string(7) "created" [10]=> string(7) "changed" }
but if I try
{{item.content['#file']['filename']}}
I just get nothing