Syntax to display an ACF File Field that contains a PDF

Loops & Logic
1

Hello,
I am a newbie to L&L. I’m having difficulty getting a PDF to display on the front end of my website. I would prefer to have the PDF display as a thumbnail that would then open in a new tab when clicked. The only way I’ve been able to get anything to display so far has been with this code below.

<Loop acf_file=tech_spec>
  <Field title />
</Loop>

It will only output the name of the pdf with no URL link. Any help would be greatly appreciated.

3

You’re on the right path!

The reason it’s only displaying the title field is that that’s all you’ve chosen to display in your template, but you could also display the URL or any of these fields. To give you a quick tutorial, when we want to call the URL as a field, we use <Field url /> , so you can add it below your <Field title /> if you want to try it out. This documentation could also help you understand what I mean and give you more context. If you put that in a regular HTML anchor tag and you’ll have a nice linked title:

<Loop acf_file=tech_spec>
  <a href="{Field url}"><Field title /></a>
</Loop>

Even though you can’t quite display a thumbnail image, HTML does have some built-in ways of displaying PDF previews which might work for you. For example, you could use either an embed or iframe to host the URL to be able to show a preview.

If you want to use embed, you could try something like

 <embed src="{Field url}" width="600px" height="500px" />

But its also possible via iframe as:

  <iframe src="{Field url}" width="800" height="600"></iframe>

As you can see, if we need to use a field as an attribute value, we use curly braces {} .

Hopefully, this helps! This blog post might have some more information to help you get started.

4

Thank you so much for the quick reply! Your solution worked perfectly. :smile:
I will be sure to keep this code snippet for future use. And also thank you for the great resources. They will help me a lot!

2 Likes