Updated on 9 Sep 2024
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:
