Advanced Views Docs
Live PlaygroundDownload PluginGet PRO
  • 💡Help Centre
  • ⚡Getting Started
    • Introduction
      • Key Aspects
      • Creating Your First View
      • Creating Your First Card
      • Plugin Terms
      • Plugin Interface
        • Field Options
    • Installation
      • Advanced Views Lite
      • Advanced Views Pro
      • Comparison Table
      • Upgrading from Lite to Pro
    • Supported data vendors
    • Starter theme
  • 🌟Display Content
    • WordPress
      • Post
      • Taxonomy terms
      • User
      • Comments
      • Menus
    • WooCommerce Product
    • Meta fields
      • Basic fields
        • Number
      • Content fields
        • Image
        • File
        • WYSIWYG
        • oEmbed
        • Gallery
      • Choice fields
        • Select/checkbox/radio
        • True / False
      • Relationship fields
        • Link
        • Post_object
        • Page Link
        • Relationship
        • Taxonomy
        • User
      • Advanced fields
        • Google Map
        • Google Map Multiple Markers
        • ACF OpenStreetMap Field
        • Date/time picker
      • Layout fields
        • Group (Pro)
        • Repeater (Pro)
        • Flexible (Pro)
    • Object fields
    • Custom Data (Pro)
    • Custom Gutenberg Blocks (Pro)
    • Mount Points (Pro)
    • Front-end assets management (Pro)
  • 🦸‍♂️Query Content
    • Basic Filters
    • Meta Filters (Pro)
      • Current Post
      • Comparison
      • Dynamic Injection
    • Taxonomy Filters (Pro)
    • Pagination (Pro)
    • Custom Data (Pro)
  • 🏆Shortcode Attributes
    • Common Arguments
    • View Shortcode
    • Card Shortcode
  • 🧙‍♂️Templates
    • Customizing the Template
    • Template engines
      • Twig
      • Blade
    • CSS & JS
      • BEM Methodology
      • WordPress Interactivity API
    • File system storage
    • Pre-built components
    • Reusable components library (Pro)
    • Live reload
    • Multilingual
    • Custom Ajax & Rest API (Pro)
  • ☕Guides
    • Display Custom Post Type (CPT) on another post
    • Display Employees (CPT) of a Company (CPT)
    • Display Nested Repeater Fields
    • Map Marker from ACF Image
    • Display all CPT items on a single map
  • 🛠️Tools
    • Export/Import
    • Demo Import
    • Settings
    • Preview
  • 🏹Troubleshooting
    • Compatibility
    • Report a bug
    • Payment Issues
    • Lite Support (Forum)
    • Pro Support
  • ⚙️Customization
    • Filters and Hooks
      • View
      • Card
    • Suggest a feature
    • Performance
Powered by GitBook
On this page
  • How to use it
  • 'Download' link
  • 'Image' link
  • Video attachments
  • File attachment preview
  • Displaying detailed info (Pro)

Was this helpful?

  1. Display Content
  2. Meta fields
  3. Content fields

File

PreviousImageNextWYSIWYG

Last updated 1 month ago

Was this helpful?

The File meta field (e.g. ) 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.

{% 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

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

File attachment preview

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

Displaying detailed info (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.

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.

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

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

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

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 .

🌟
download attribute
video tag
<iframe> element
object field
ACF File field