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 = [
<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']}}" />
{% endfor %}

In all cases the "src" attribute is just blank.

To make it a bit more manageable I tried putting


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


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


I just get nothing

  • If you use {{ item.label }} outside of src, just to test, does it appear? or is it blank? – Matt Oct 5 '16 at 18:50
  • @Matt Nothing, it's just blank (I tried putting all three of the different alternatives, but none of them produce anything) – Martin K Oct 6 '16 at 7:38
  • What happens if you do {{ dump(item) }}? – Matt Oct 6 '16 at 13:23
  • @Matt Well, as you can see I'm using kint() as recommended and that seems to work fine - I get a long list of arrays and objects (on this basis I tried building the img with id=array). To go further I will have to rebuild the whole thing because I just uninstalled File Entity on that testing site, since when it gives me nothing but WSOD – Martin K Oct 7 '16 at 7:20
  • In the long list of arrays and objects does your image show up anywhere in there? – Matt Oct 7 '16 at 13:19

to get the filename you can use this:

{{ item.content['#file'].filename.value }} 

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.