Magazine Explore the Core: Easily embed PDFs in your Joomla content
You probably know how to place images, maybe even videos in your Joomla articles. But did you know you can add PDFs that your visitors can read without having to open or download them first? It's super easy! And the good part: you don't even have to install an extension to do it. The functionality is built right into the Joomla 4 core. Here's how you do it.
Your first step is to create an article, or open the article that will have the PDF in it. Determine where you want it to show and put your cursor there.
In the editor (I use the built-in editor, TinyMCE), on the left above the content area, there's a nice button called CMS Content. If you click it, you see a list of things you can add. Pick Media.
The Media pop-up opens. Click the Upload button in the top left corner to upload a file from your computer.
I've uploaded a file from a restaurant called Lemongrass. The file is added in the Media folder. You can see it's a PDF, it has the PDF icon. Click it.
Now it gets interesting! A pop-up opens and you can choose whether this file should be downloaded or embedded.
Choose Embed. Now you can set the dimensions - Width and Height - of the block that will show the PDF in your article, or leave it as is (that's what I've done here). Click Insert media (lower right corner).
Your article now has a rectangle in it (I've colored it yellow so you can see where it should be) with a little play-icon. That's your embedded file. Save your article and you're done.
Now let's move over to the frontend of the website, we want to see what it looks like on the page. The article has a viewer with the PDF in it, you can read the whole menu without having to download it.
In close-up (this is page 2, are you hungry yet?):
If for whatever reason your browser doesn't support this, the file is shown as a link and the visitor can still download it:
So that's all! No extensions, just Joomla 4. Easy, right?
Translations
Read this article in German! It's here: Explore The Core: PDFs einfach in deine Joomla-Beiträge einbetten
Some articles published on the Joomla Community Magazine represent the personal opinion or experience of the Author on the specific topic and might not be aligned to the official position of the Joomla Project
About the author
By accepting you will be accessing a service provided by a third-party external to https://magazine.joomla.org/
Comments 10
I'd given up trying to embed pdf's in the past.
Just tried this, so easy - what a great Joomla! native function.
Thank you Anja.
Really interesting and useful.
As a JCE user I figured out how to achieve the same in JCE but the HTML generated by JCE is very different although apparently functionally the same. I don't know enough about HTML . IS it better to use ."object" and "embed" rather than "iframe" and what is the difference?
I don't know, but as always, Google is your friend . I found this, for example: https://9to5answer.com/difference-between-iframe-embed-and-object-elements
Hi, is there an advantage for SEO when you embed the PDF? Is the content of the PDF crawled when it is embedded?
Thx.
Bernhard
Hey Bernhard, I'm no expert but I believe Google does crawl PDFs on your site anyway so I don't see why this would be different when the PDF is embedded.
is it possible to allow a registered user to upload his pdf? when I try to do it as a registerd user in the frontend, it does nothing, I can't create a folder also.
You can't insert a PDF if the user isn't superadmin. How can insert or what permissions I need to modify to insert the PDF?
Good questions (both the registered user one and the one about super user). I don't know the answer, to be honest. But what I would do is compare the permissions for the user groups.
Hello, sorry I'm late to the party - only now trying to embed a PDF in a Joomla article!
I am using JCE Pro and I can em,bed the PDF which shoes as a grey box.
However, as soon as I save the article the PDF is stripped out.
This happens when I use the embed document feature of JCE or the native Joomla function.
Is this still a 'known' issue or has someone managed to find a solution?
Thanks
I've testet this on a new samsung mobile with Chrome, on an Iphone 7 (Safari and Chrome). All shows a download link, and a message that says, "You don't have a pdf plugin, but you can download the pdf file". Have you found a workaround, or at least a way to change the default message, to (in my case) something like, "your browser doesn't support pdf view, but you can download the pricelist here".