How to insert a PDF file into a Joomla page (Article)

In this tutorial I'll show you how to embed an Adobe Reader (PDF) file in a Joomla article. For a live sample page, please, click here. (If you find any problems displaying the PDF file embeded in the sample page, it may be that even you don't have Adobe Reader's installed in your computer, or if you are using Internet Explorer's browser you may need to delete your temporary Internet files, cookies, and history by going: Toos > Internet Options > Delete, then from the "General" tab you would need to click on "Delete").

With this method it won't be necessary for you to install any third party extensions or plugins. The only thing you'll need is your PDF file, which (if you don't have it already) can be created with the software Adobe Acrobat or using any of the online services available. It's also important that if you don't have Adobe Acrobat installed in your computer, that you have at least the free version of it, which is Adobe reader (otherwise your browser won't be able to display the PDF file embedded in your article). For your information Adobe Reader can be downloaded from:

http://get.adobe.com/uk/reader/

Assuming you already have a PDF file, you need to make sure its name has no empty spaces in it. That will make it easier for you to figure out an important piece of information: the file's URL, which you'll need later on. It will also help if the name is in lowercase letters. You know you can rename a file by right clicking on it and then left clicking on "Rename".

Now let's get go to the fun part of this tutorial :)

1. Login into your Joomla Administrator's page. If you are a Joomla newbie, the administrator's page would be your domain name followed by "/administrator". For instance:

http://www.yourdomainname.com/administrator

Now from the top menu go:

Site > Control Panel

2. From Joomla's Control Panel click on "Media Manager", like this:

Once you access the Media Manager's page, on the left side of the page, you'll see the directory tree displayed, which is the folders and sub-folders where you will be able to upload your files. By default, you'll land on the "images" directory (on the directory tree you won't see the name "images". Instead it will say "Media". But if you look at the path, under "Files" on the right side, you'll see you are actually inside the "images" folder).

3. We'll create a sub-folder inside "images", which we'll call "pdf". How do we do that? Well, look where it says "Files". Underneath that you'll see the path of the folder where you are located at. On the right side of that rectangle you'll see an input area where you can type the name for the file you want to create. So, please, type there "pdf" (without the quotation marks), like this:

If you look at the directory tree again, you should see now the new folder "pdf" displayed as one of the "Media" sub-directories . Please, click on it. The path under "Files" should have changed to something like:

/xxxx/xxxx/public_html/xxxx/images/pdf

4. At the very bottom of the page you'll find a "Browse" button.

Please, click on it, browse your hard drive to locate your PDF file, select it and click on the "Start Upload" button.

5. Once you have uploaded your file, you'll need to determine the URL (online address) for that file. Here's how you do it. The URL for your file will be your domain name followed by /images/pdf/yourfile.pdf.

For example, if your domain name is domainname.com and your PDF file's name is my-file.pdf, then the file's URL will be:

http://www.domainname.com/images/pdf/my-file.pdf

To prevent misspellings on your file's name, you can right click on it (I mean the one on the one you have in your computer, not the one that is displayed on the Joomla Media Manager's page), select "Properties" and under the "General" tab you'll find the name. Just select it and copy it.

If you uploaded a file which name has uppercase letters, Joomla will automatically convert them into lowercase letters. So let's say your PDF file's name in your computer's hard drive is MyEBook.pdf, in the Joomla's folder it will show myebook.pdf.

What I usually do is I open a Notepad's file and type there the URL so I can copy that text and paste it into my web browser's address bar (just to make sure I got it right). If the URL is correct, the file will load on your page, otherwise, the browser will display a 404 error message. I would suggest you to do the same (test the PDF file's URL on your browser). Hopefully you didn't encounter any problems up to this point, but if you did, please, go over the instructions and try again.

6. OK, so here's what we will do next. We'll create a menu item that will be linked to your file. It's up to you to decide which one of the menus you'll choose, but for this tutorial we'll use the Main Menu. So, please, go:

Menus > Main Menu > New > Wrapper > Wrapper

Like this:

Just for this tutorial, our Menu Item Details will be:

Title: My PDF file
Alias: my-pdf-file (or just leave it blank)
Link: (don't change anything here)
Display in: Main Menu
Parent Item: Top
Published: Yes
Order: (don't change anything here)
Access Level: Public
On Click, Open in: Parent Window with Browser Navigation

Parameters (Basic):

Wrapper URL: (Important: type your URL here!)
Scrollbars: Auto
Width: (leave it as default, which is 100%)
Height: (leave it as default, which is 500)

Parameters Advanced:

Auto Height: No
Auto Add: Yes

Parameters (System):

Page Title: My PDF file
Show the Page Title: Yes
Show the Page Title: (leave this blank)
Menu Image: - None Selected -
SSL Enabled: Ignore

Of course this is just for you to learn the technique, but for any future menu items you will add your own text and change the settings according to your own personal preferences.

Now please, click on "Save" (on the top right corner of the page).

7. Open up your website. On your main menu you should see the new item "My PDF file". Please, click on it and it should load a page with the PDF file embedded. It may take a little while to load (it will depend on the size of your file and your Internet speed). It should look something like this:

As you can see, the PDF file will have a nice look inside your Joomla's default template, it will also be surrounded by the page menus, so people will be able to keep surfing your website, just like from any other regular HTML page.

And that's it. I hope you have enjoyed this tutorial and if you found it useful, please, feel free to share it with other people. Comments or questions at the bottom of this page will be more than welcome. Thanks and happy learning!