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

How to Embed PDF files

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

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.

System - Install

select installation file

Package installed - confirmation

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.

Select Manage data-srcset=

Extensions”>

Search for PDF extension to enable

Click to enable embed pdf

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):

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.

Upload media in Joomla 4

Sharable media link in Joomla 4

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):

Add code block

Sample code 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:

PDF file embedded

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.

Discover how InMotion Hosting's virtual private servers can deliver power and performance for your Joomla site with our reliable Joomla Hosting plans.

Arnel Custodio Content Writer I

As a writer for InMotion Hosting, Arnel has always aimed to share helpful information and provide knowledge that will help solve problems and aid in achieving goals. He's also been active with WordPress local community groups and events since 2004.

Related Articles

2 thoughts on “ How to Embed PDF Files in Joomla! 4.0 with PDF Embed ”

henrymendisHenry says:

Thanks
Very helpful to display PDF in Joomla 4.x
PDF is right aligned, in mobile the displayed PDF is off the screen towards right
Can it be resolved?

Arnel Custodio says:

Hello HenrymendisHenry – Sorry for the problem with PDF being right-aligned. If this is a problem only with mobile, then it is probably an issue with whatever plugin is being used with Joomla to display the file. You may need to reformat the PDF file being displayed, or you can contact the developer of the plugin to see if there is an update and make them aware of the display issue on your mobile device. Display issues may be unique to the screen of your device. If you are not the website owner/developer, then you should contact the website owner and make them aware of the issue.

Was this article helpful? Join the conversation!