Media Library PDF Attachments Listing in Bricks

Updated on 6 Nov 2023

This Pro tutorial provides the steps for displaying PDF files from a HappyFiles folder as a list/grid using a Bricks query loop with PDF title, caption, description, file size and a view/open button that loads the file in a lightbox. We shall use Adobe PDF Embed API for rendering the PDFs so they work in all devices.

When done, the element structure is going to be like this:

Step 1

Get your free PDF Embed API key.

Register/log into your Adobe account and create a new project or new credentials.

Keep the browser tab open showing your API key or paste/save it in a note.

Note that the keys are domain specific and that a key also works on sub domains.

Step 2

Install and activate HappyFiles (we used the Pro version in our test site).

Go to Media → Library. Create a folder and upload/drag existing PDF files into it.

Click on each file and enter meta data.

Step 2

Let's add helper functions for getting file size, URL, caption and description of the media item in the Bricks query loop.

Add the following in child theme's functions.php or a code snippets plugin:

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Instant access to 390+ Bricks code tutorials with BricksLabs Pro