Search

How to insert and link to a PDF using the Contentful Media Library

Linking directly to a PDF in the Contentful Media Library is a bit of a mystery. There are a few ways to do it, and I'm hoping to outline an easy way to accomplish each.


The Basics

We can begin by adding a PDF to the Contentful media library. First, navigate to the 🖼️ Media tab and click the blue button in the top right corner that says Add Asset.

It should look something like this:




This is where you can drag and drop your PDF, and give it a title and description.


Now that you've uploaded it, let's say you want to get a URL you can use to send people to your PDF: click on the ⬇️ download icon, which will open the PDF in a new tab.



You can then use this link to share your PDF 🎉


Taking it a step further

One issue with this solution is how Contentful updates these URLs over time.


"Contentful updates the URL for the asset every time you update the asset itself. So what should I do for PDFs that change over time?"

Fortunately, there's a solution to this issue.


Content Model

You can create a 🧩 Content Type for a PDF that looks like the following:



When using this Content Type, you can either reference an existing PDF in the Contentful media library in this PDF file or create a new one.


Technical side

To connect this component to a live web page, you can pull this data from the Content Delivery API and funnel it into a native HTML PDF viewer (note the type="application/pdf"):


<object width="100%" data={//data from Contentful} type="application/pdf" style={{ height: '100vh', minHeight: '100vh' }} > <iframe width="100%" style={{ height: '100vh', minHeight: '100vh' }} src={//data from Contentful} > <p>Unfortunately, this browser does not support PDF rendering</p> </iframe> </object>


Then, you can publish this page to a URL on your site and send visitors there. Whenever the PDF updates in Contentful, it will automatically pull the most recent version of the asset.


What if there was a process you could follow to make Contentful successful for your team specifically?


It's called the Waterfall method.


Teams I've worked with that follow this process were far more likely to set up a successful Contentful project than those who didn't.


Why? Because the process uses your current challenges to inform a vision their entire team can work towards, and make Contentful the tool to pull it all together.