File (attachment) field render options

By default, Advanced Views displays the File field using <a> - link tag. You can customize the Layout template to change how it's rendered:

1. 'Download' link

The default behavior for links to files is to open the file in the browser if the file type is supported (such as PDFs). However, in some cases, you might want to create a 'download' link that triggers an immediate download of the file instead of opening it in the browser.

To achieve this, you need to use the download attribute for the link in the template:

{% if file.value %}
    <a target="{{ file.target }}"
       href="{{ file.value }}" download='{{ file.title }}'>
        {{ file.linkLabel|default(file.title) }}
    </a>
{% endif %}

The download link attribute can either be empty, which simply enables the download functionality, or it can contain a string value that specifies the filename under which the file will be saved on the user's device. This is particularly useful when the default file names are technical or not very descriptive.

2. Image link

You can wrap any image into the file link. This well-known technique provides a visual representation of the attachment, allowing users to click on the image to view or download the file.

Make sure both image and file fields are added to the specific Layout, and amend the template to put the img tag inside the tag, as shown below:

{% if file.value and image.value %}
    <a target="{{ file.target }}"
       href="{{ file.value }}">
        <img src="{{ image.value }}" width="{{ image.width }}" height="{{ image.height }}" alt="{{ image.alt }}" decoding="{{ image.decoding }}" loading="{{ image.loading }}" srcset="{{ image.srcset }}" sizes="{{ image.sizes }}">
    </a>
{% endif %}

3. Video player

To display the video attachments, employ the video tag, as shown below:

<video controls>
    <source src="{{ file.value }}" type="video/mp4">
</video>

4. File preview

If the File field contains a browser-supported file, such as a PDF, you can display the file directly on the page using the <iframe> element:

<iframe src="{{ file.value }}" width="100%" height="600px"></iframe>