File

The File meta field (e.g. ACF File field) allows a file to be uploaded and selected by using the native WP media popup.

How to use it

Select the File field from your field group.

Fill out a label for the file in the Label field. This text will be prepended to the field. e.g. PDF Download: file-name.pdf

The Link Label is useful when you want to have more consistency in the output, fill out the Link Label to replace the link text of your file. By default the File name from the file attachment is used.

'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.

'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 target View, 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 %}

Video attachments

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

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

File attachment 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>

Displaying detailed into (Pro)

By default, the File field is displayed as a link, which suits most use cases. However, in some instances, you might want to display detailed information about the file. For example, if you've created a file field where a video has been selected, you may want to display it as a video player.

All WordPress media items, including images and files (videos, PDFs), belong to the 'attachment' post type. This means you can use any standard post fields.

Here’s how to do it:

1. Create a Separate View for the File Display: Set up a new View specifically for the File display, selecting the appropriate fields (e.g., Post -> Attachment video), and save it.

2. Choose the View for the File Field: Select the newly created View in the View field of your File field settings, similar to how you would for any object field.

That’s it! Your video will now be displayed with a video player. This approach can be used to display any post information, such as the author, updated date, etc.