Show field twice in node page

Question

I created a custom bundle (content type) and I've created fields

One of those field is a file type field, is a video file, stored in the private storage. I installed the videojs module to allow to watch the video.

I need to show this field twice in the node page. One in the generic file formatter that allows the user to download the file, and I also need to play the video. I decided to set up as generic file formatter and customize the twig template to show again with the video player.

I achieve to show twice with the settings formatter (generic file) with this code in the node--mybundle--full.html.twig template

{{ content.field_sd_video }}

I thought it would be something easy like field+formatter:

{{ content.field_sd_video|videojs_formatter }}

But I can't find a simple way to achieve this.

Answer 1

You can do this in UI, UI and code mixed, code only and in html:

Display Suite

Install the module Display Suite and configure this in UI.

Extra Field

Use the hook hook_entity_extra_field() to get an extra field in Manage Display. You need hook_ENTITY_TYPE_view() to copy the data (in this case the file) into the new field.

Clone field in code

See How to display a field twice in a view mode?

The last has the least overhead, but is not customizable and you have to define the field settings yourself. If you configure the second field temporarily in UI and export the view mode to yaml this helps to find the settings you need in code.

Place link html in template

Or if you want a quick solution in the template and you only need a simple formatted file link you can get the file url from the node and put it in html markup:

<a href="{{ file_url(node.field_video.entity.uri.value) }}">Example Video</a>

Answer 2

I finally found the solution, I put this code in preprocess node function. It has to be easy, but not easy to know how ;)

function mytheme_preprocess_node(&$variables) {

     $variables['video_caption'] = $variables['node']->get('field_video')
         ->view(array(
            'label' => 'hidden',
            'type' => 'videojs_player_list'
        ));
}

and I only has to add this line in twig file:

{{ video_caption }}

in my case node--mybundle--full.html.twig template

Thanks @4k4 your answer was usefull

For those arrive here looking for something similar I was inspired by Twig Recipes on page 41
It was usefull for me Twig debugging. Playing with kint and node variable and the classes used to wrap the information. Then I found that the field comes with FileFieldItemList and then I found the view method that uses EntityViewBuilderInterface