How to Embed PDF Files in Joomla! 4.0 with PDF Embed

Joomla! 4.0 provides an updated version of the TinyMCE interface for adding content.  One of the most common types of content added is when you embed PDF files.  By default PDF files are only viewable through a link when adding them into a Joomla article.  

The free plugin from Techjoomla called PDF Embed allows you to embed PDF files that can then be immediately displayed without having to click on a link. This tutorial will show you how to obtain the plugin, install it, and then use it within a Joomla article.

• Getting the PDF Embed Plugin
• Installing and Enabling the PDF Embed Plugin
• Embedding a PDF file into a Joomla Article

Getting the PDF Embed Plugin

The free plugin from Techjoomla is a great feature to add to your Joomla! Installation, but the main headache will simply be getting the file from the developer.  Follow these steps to obtain the installation file.

1. Go to the Techjoomla website.
2. Click on the Register option in the top right corner. Make sure to follow through their verification steps.  Trying to shortcut to the file download page without verification will just cause you to reload the page and log in once again.
3. After you have logged in as a registered user, click on the drop-down arrow of the Downloads button at the top of their website.
4. Select the Free Downloads section.
5. Scroll down until you find the PDF Embed- Content Plugin (version 2.3.0).  Click on the Download button. Note that this does NOT start the download.
6. You will see another page describing the file and there will be a green download button on the right side of the page,  Click on this Download button to download the file.
7. You will be given a choice to select where the file will be saved.  Note that the file is a zip file.  Select and remember the location where you saved the file.

Installation and Enabling the PDF Embed Plugin

Once you have the zip file for installing the plugin, you can proceed to your Joomla site to install and then enable the plugin.  Keep in mind that the developer refers to this plugin as a “plugin”, but Joomla calls these add-ons “extensions” in the installation section of the Administrator Dashboard. The dashboard refers to them as Plugins. You can find more information on the differences between the terms in a Joomla Community discussion.

Installing the Plugin

1. Log in to the Administrator Dashboard as an admin or super user.
2. In the main menu on the left side of the page, click on System.
3. This will bring you to the System Dashboard page.  Find the Install section near the top of the page. Click on Extensions.
   
   
   
   
4. You will then be on the Extensions Install screen.
   
   
   
   Click on the green button to select the zip installation file or drag it into that box.
   
5. Note that it may appear to be nothing at all, but give it a few seconds and the installation should complete.  You will see a confirmation screen along with instructions on how to enable the plugin. 
   
   
   
   

Congratulations! You have completed the installation of the plugin to your Joomla! site.   Keep in mind that you still have to enable the plugin before you can start using it. Additionally, note the information provided to you about the plugin and how to use the code.

This native viewer of the plugin is not compatible with mobile devices.

Enabling the Plugin

Before you can use the plugin, you will need to enable it in your Joomla installation.  Follow the steps below to enable the plugin in the editor interface.

1. Log into the Administrator Dashboard.
2. Click on Systems in the main menu.
3. You will then be on the System Dashboard page.  In the Manage section of the page, click on Extensions.
   
   Extensions”>
   
   
4. You will then see a list of all the extensions that are currently enabled or disabled for the Joomla site.  In the search box at the top of the page, type in “PDF” and hit enter.
   
   
   
   This will narrow the list down to just the PDF extensions.  Since we have only installed one extension, then you should see the Author as Techjoomla and only the PDF Embed package and plugin types displayed in the list.
   
5. Click on the grayed-out circled X’s to enable each option. You will see a green checkmark verifying that you have selected those components to be enabled.
   
   
   
   You can also select multiple options and then click on the Enable button at the top of the page.

This completes the process for enabling the plugin for your Joomla site!

Embedding a PDF file into a Joomla Article

Now that you have installed and enabled the PDF Embed plugin, you can finally start using it with PDF content in your Joomla articles. 

We will be demonstrating the use of the code option to display the PDF file.  In our current testing, the editor button option to embed a PDF does not work.  However, using the code is relatively simple.  Here are the different formats that you can use in the body of your article (using Javascript):

Native Relative path: {pdf=images/pdf/example.pdf|100%|500|native} or Absolute path – {http://sitename.com/images/pdf/example.pdf|100%|500|native}

For Google:  {pdf=http://sitename.com/example.pdf|100%|500|google}

For pdfjs: {pdf=http://sitename.com/example.pdf|100%|500|pdfjs}

For adobe: {pdf=http://sitename.com/example.pdf|100%|500|adobe}

Note that native viewer is not compatible with mobile devices.

Before you embed a PDF file into a Joomla article, it’s best to upload the file and establish a directory for your files if necessary.  You can then use the option to obtain the URL that you will need when embedding the PDF file. 

To learn more about adding files into the Joomla! 4 Media Manager, check out How to Upload Files in the Joomla 4 Media Manager.

Obtaining the PDF URL

Once you have the file uploaded, follow these steps to get the PDF URL.

1. Log in to the Joomla 4 Administrator Dashboard.
2. Click on Content in the main menu on the left side of the page. Then click on Media. You will see the file interface appear.
   
   

   

   
   
   You can see in this screenshot that a PDF folder was created specifically for the PDF files.  
   
3. When you hover over a file, you will see the 3-dot menu option appear in the top right corner of the file.  Left-click on the 3-dot button and several options will appear.
   
   

   

   
   
   
4. The option in the top right corner is the option to get a shareable link.  Click on it to copy the  link.

Paste the link or keep it in the clipboard so that you can use it when embedding the PDF file.

Embedding the PDF file in the Joomla 4.0 Editor

Your final step to embed the PDF file is to create or edit the article that you want to publish in Joomla.

1. Log in to the Joomla Administrator Dashboard (if you’re not already there).
2. In the main menu at left, click on Content, then either edit and existing article or create a new one.
3. Add the content to your article, then when you need to place the PDF, click on Insert Code Sample. The code options from above are listed in the screenshot below (do not replicate in your article):
   
   
   
   
4. Make sure to click on the blue SAVE button at the bottom of the Insert Code Sample box. Here’s how the code looks after being properly added:
   
   
   
   

Make sure to save and publish your article in order to see how it looks on the front end.  You can also preview the article.  In this case, the code from the screenshot above was used for a sample PDF file and we are showing in a preview here:




The viewer used per the code is Google. 

This completes our tutorial on embedding a PDF file using the PDF Embed plugin for Joomla 4.0.  To learn more about using Joomla or many other topics for your website, check out our InMotion Hosting Support Center website.