Spring Forward Web Design

Build your own Site... Control your own Future!

Breadcrumbs

Adding a PDF Downloader

How to Add a PDF Downloader

Joomla has a button attached to every Joomla article which allows your readers to download a PDF of any page. But the PDF’s created by Joomla are not very good in terms of their formatting. If you would like to add a clickable button to download PDF documents to your website, this is the article for you. There are a number of Joomla extensions to choose from. But some do not do much while others are way to complex. A good middle of the road option is JDownloads. To get this free extension go to the JED:

http://extensions.joomla.org/extensions/directory-a-documentation/downloads/2849

To read about this extension click on Documentation. When done, click on Download.

Click on Download:

Then click on DOWNLOAD again.

After downloading this zipped folder to your computer, go to your website back end and click on EXTENSIONS > Install. Browse to this extension and upload it.

--> Upload directory /jdownloads created. CHMOD 0755 would be set.
--> Directory /jdownloads/tempzipfiles created. Writable: CHMOD 0755 - OK.
--> Example data successfully created!
--> Info: Uninstalling jDownloads will not delete the database. If you later install a new version of jDownloads, the current database will be used.

Installation successful!

Click on COMPONENTS > JDownloads > Control Panel:

You also need to install the JDownloads Plug In to insert PDF download option inside of articles.

http://www.jdownloads.com/index.php?option=com_jdownloads&Itemid=133&view=view.download&catid=25&cid=113

Click on DOWNLOAD:

Click on Download again: Then save this zipped folder to your computer.

While we are here, we should also get the Content Plug In Editor Button:

http://www.jdownloads.com/index.php?option=com_jdownloads&Itemid=133&view=view.download&catid=25&cid=202

Click on Download:

Then click on download again and save the file on your computer.

Now go to your website administrator control panel, Extensions > Upload and upload all of the above.

Now go to Extensions > Plug In Manager and Enable the Plug Ins:

Go to Configuration > Email:

Then put in your email address to send notices to each time files are downloaded.

Go to Categories and create a category to put your file into. There is an example of a category for you to look at. Double click it to open it and see the example settings. Note that you can choose anyone of several different download button options. Also note that you can place different pictures and text in the download section for each download.

Now create your own download category by clicking on new and picking out the icon you want to use and typing in a description. Then click SAVE.

Next click on DOWNLOADS.

To deactivate the summary page for your downloads:

Go to the configuration and activate the direct download option (see pic)
Activate in the Layout Administration a layout without checkboxes
You can also change your actually used layout. Then you must remove the checkbox placeholder and use the {url_download} placeholder

Adding a PDF download to a Joomla Article

First, you need to bring upload your PDF into the JDownload system. But in order to bring your PDF into the system, you first need to create a JDownloads Category. So from the JDownloads Control Panel, click on CATEGORIES.

There are a couple of pre-loaded categories which you can click on to see how they are configured. To create a new category, click on NEW:

Give the category a name, make sure it is published and click on SAVE. Now that we have our own category, we are ready to upload our own PDF.

UPLOADING A PDF TO JDOWNLOADS

From the JDownloads Control Panel, click on JDownloads

There is already a pre-loaded PDF example. To upload yours to this list, click on New.

There are several things you can fill out here. But most are optional.

Mainly you need a Title and you need to assign your PDF to a Category.

You can also fill out a short or long description and even add images and links with your text editor. For confirm license, click on NO.

Then click on the Files Tab to upload the file assigned to this Title.

Click on the Browse Button to find our PDF file on your computer. It is helpful if the file name on your computer is lower case with underscores instead of spaces.

Make sure the file is published and click SAVE.

ADDING THE PDF DOWNLOADER TO YOUR JOOMLA ARTICLE

Click on Article Manager > New Article. Write the title and text of your article. Click on Front Page if you want the Download PDF article to appear on the front page. Then place your cursor where you want the PDF Downloader to appear and click on the JDownloader Plug In “INSERT DOWNLOAD” Icon at the bottom of the article page. This will insert the proper code in the proper place.

Then click on APPLY or SAVE. To view the result, click on PREVIEW. What you are likely to find when you click on your download link is that JDownloader by default includes tons of information and Icons that you do not want and that would only confuse your readers. So the next step is to get rid of all this extra stuff by creating a new Download Page Layout to replace the default layout. .

Creating a New Download Page Layout

Layouts are controlled from the Layouts Administration Area:

In addition to the CSS file, where you can change the color of your layouts, there are four “levels” of layouts you can change. This is where you can decide what appears and does not appear on various download pages. The default layout comes with everything possible appearing. This can be quite confusing to your readers. So it is a good idea to create NEW layouts which contain only the items your readers need to see to download documents from your website.

Creating a New Category Layout

First, click on the CATEGORES icon.

To get rid of top bar, click on Category Layout and Click on Edit Header and Footer.

JDownloads comes with two preloaded category layouts – the default layout which has everything and a sample 4 column layout. You can click on the Standard layout to open it and see how it is formatted. We will create a new layout by clicking on the NEW button in the upper right corner.

Each new layout comes with the standard layout preloaded as a template which you can alter to whatever you want. Call our new layout Simple Category Layout. We want to delete several icons from the header. So click on the EDIT HEADER AND FOOTER tab.

At the bottom of this screen is a diagram explaining the HTML coding for each icon.

This is the default HTML

<div class="componentheading">{component_title}</div>

<td style="padding:5px;">{search_link}</td>

<td style="padding:5px;">{upload_link}</td>

<td style="padding:5px;" align="right" valign="bottom">{category_listbox}</td>

</tr>

</table>

Create a New category layout called Simple Category Layout.

Then delete the three rows of bold text.

Then SAVE. Then activate to Category Layout.

Click on the PREVIEW button and then click on the DOWNLOAD link to view the Download page and verify that the unwanted icons are now gone. (You may need to press F5 to clear and reload your browser.

The icons are still there. So perhaps creating a new file layout will get rid of the icons.

Creating a New File Layout

In order to get rid of the icons, we also need to change the File Layout. Click on FILE LAYOUT.

There are three pre-loaded File Layouts. Standard with checkboxes is the ACTIVE layout. Click on NEW to create a new layout.

Our NEW Layout comes with the Active Layout HTML preloaded. Name the new layout Simple File Layout. We want to delete a couple of header icons so click on EDIT HEADER and Footer Tab.

At the bottom of this screen is a diagram showing HTML tags for all icons.

We want to delete search_link, upload)link and category_listbox.

Here is the active HTML code for this header:

<div class="componentheading">{component_title}</div>

<td style="padding:5px;">{search_link}</td>

<td style="padding:5px;">{upload_link}</td>

<td style="padding:5px;">{upper_link}</td>

<td style="padding:5px;" align="right" valign="bottom">{category_listbox}</td>

</tr>

</table>

We want to delete the rows in bold creating:

Click on SAVE. Then select Simple File Layout and Activate it:

Then, to verify that the unwanted icons are now gone, click on PREVIEW and then click on the download file to open up the Download Page: (You may need to click on F5 to clear the browser and reload the page): The icons are still there! So perhaps creating a new Edit Summary Layout will get rid of them.

Creating a New Edit Summary Layout

This by itself will not eliminate these icons. We also need to do the same thing in creating a new Edit Summary Layout. Click on the Summary Layouts Icon:

There is one default Summary Layout. You can click on it to open it and see how it is formatted. Click on NEW to create a new one.

The New Layout comes with the default layout preloaded. You can change it anyway you want.

Call out new layout Simple Summary Layout.

We want to delete some of the header icons, so click on EDIT HEADER AND FOOTER tab.

At the bottom of this screen is a graph of HTML codes for each icon. We want to get rid of search_link, upload_link and category_listbox.

Here is the default HTML Code for the Header Layout Area:

<div class="componentheading">{component_title}</div>

<td style="padding:5px;">{search_link}</td>

<td style="padding:5px;">{upload_link}</td>

<td style="padding:5px;">{upper_link}</td>

<td style="padding:5px;" align="right" valign="bottom">{category_listbox}</td>

</tr>

</table>

Delete the four HTML rows in bold. Then click on SAVE. Then select our new layout and activate it:

Click on Preview and bring up the Downloads Page and you will see that the icons are still there. Hopefully, creating a new Download Details Layout will get rid of them – because we are starting to run out of options!

Creating a New Download Details Layout

Click on the Download Details Layout page:

There are two sample layouts with Standard 1.8 Full Info being active. This is the real problem.

To create a new layout, click on NEW: Create a new layout called Simple Layout. Note that this layout comes preloaded with the Active Default Layout HTML.

Since we want to delete some header icons, click on the EDIT HEADER AND FOOTER tab.

Scrolling to the bottom shows a diagram indicating the HTML for the icons. We want to delete home_link, search_link, upload_link and category_listbox.

The following is the default HTML for the HEADER:

<div class="componentheading">{component_title}</div>

<td style="padding:5px;">{home_link}</td>

<td style="padding:5px;">{search_link}</td>

<td style="padding:5px;">{upload_link}</td>

<td style="padding:5px;">{upper_link}</td>

<td style="padding:5px;" align="right" valign="bottom">{category_listbox}</td>

</tr>

</table>

Delete the five lines in bold to get:

Then click on SAVE. Select our new layout and make it the active layout:

Then click on PREVIEW and select the download file to bring up the Download Page:

The unwanted icons are finally gone.

But there is still a bunch of extra stuff in the Download Details Section. Let’s get rid of most of that next.

Click on the new Download Details Layout we just created:

On the Edit Details page, you can scroll to the bottom to see the relationship between the HTML and the various items we want to delete:

If you do not want to display the Download hits, Language, License or other information, you can create a new layout by copying the existing layout HTML:

<tr>

<td height="38" colspan="3" valign="top"><span style="font-size:13pt;">{file_pic} {file_title} {release} {pic_is_new} {pic_is_hot} {pic_is_updated}</span></td>

</tr>

<tr>

<td width="313" height="370" valign="top">{screenshot_begin}<a href="{screenshot}" rel="lightbox" > <img src="{thumbnail}" align="right" /></a>{screenshot_end} {description_long}<br />{mp3_player}<br />{mp3_id3_tag}<br /></td>

<tr>

<p align="center" style="background-color:#CECECE; padding:2px;"><b>{details_block_title}</b></p>

</td>

</tr>

<tr>

<td height="20" valign="top">{filesize_title}</td>

<td valign="top" style="text-align:right;">{filesize_value}</td>

</tr>

<tr>

<td height="20" valign="top">{hits_title}</td>

<td valign="top" style="text-align:right;">{hits_value}</td>

</tr>

<tr>

<td height="20" valign="top">{language_title}</td>

<td valign="top" style="text-align:right;">{language_text}</td>

</tr>

<tr>

<td height="20" valign="top">{license_title}</td>

<td valign="top" style="text-align:right;">{license_text}</td>

</tr>

<tr>

<td height="20" valign="top">{author_title}</td>

<td valign="top" style="text-align:right;">{author_text}</td>

</tr>

<tr>

<td height="20" valign="top">{author_url_title}</td>

<td valign="top" style="text-align:right;">{author_url_text}</td>

</tr>

<tr>

<td height="20" valign="top">{price_title}</td>

<td valign="top" style="text-align:right;">{price_value}</td>

</tr>

<tr>

<td height="20" valign="top">{created_date_title}</td>

<td valign="top" style="text-align:right;">{created_date_value}</td>

</tr>

<tr>

<td height="20" valign="top">{created_by_title}</td>

<td valign="top" style="text-align:right;">{created_by_value}</td>

</tr>

<tr>

<td height="20" valign="top">{modified_date_title}</td>

<td valign="top" style="text-align:right;">{modified_date_value}</td>

</tr>

<tr>

<td height="20" valign="top">{modified_by_title}</td>

<td valign="top" style="text-align:right;">{modified_by_value}</td>

</tr>

<tr>

<p align="center"><font size="2">{url_download}</font><br />{mirror_1} {mirror_2}</p></td>

</tr>

</table>

</td>

</tr>

<tr>

</tr>

</table>

Then delete the above bolded rows in the LAYOUT HTML.

. <table width="100%" border="0" cellpadding="0" cellspacing="5">

<tr>

<td height="38" colspan="3" valign="top"><span style="font-size:13pt;">{file_pic} {file_title} {release} {pic_is_new} {pic_is_hot} {pic_is_updated}</span></td>

</tr>

<tr>

<tr>

<p align="center" style="background-color:#CECECE; padding:2px;"><b>{details_block_title}</b></p>

</td>

</tr>

<tr>

<td height="20" valign="top">{filesize_title}</td>

<td valign="top" style="text-align:right;">{filesize_value}</td>

</tr>

<tr>

<p align="center"><font size="2">{url_download}</font><br />{mirror_1} {mirror_2}</p></td>

</tr>

</table>

</td>

</tr>

<tr>

</tr>

</table>

Then click on SAVE. Assuming this is still the active layout, click on Preview and Click on the Download Document to bring up the Download Page to see how it looks.

The Downloads Page is finally looking about the way we want!

Last we will improve some of the Configuration settings:

Go back and open our simple layout file: Go to Configurations > Plugins Tab:

The default layout for the Plug In is still Standard 1.8. Thus, the next time we use the plug in, we will have the same problem. Click on Simple File Layout to have this be the new default layout.

Then click on SAVE.

Go to Configuration > Front End Tab. The following are settings to create a less cluttered download page:

Next go to Configurations > Pictures Tab. For size of the download icon, increade it from 20X to 40 Px:

Also increase the NEW number of days from 15 to 30.

And decrease the Popular Threshold from 100 to 3.

And increase the updated days from 15 to 30.

Then click on SAVE.

Now instead of a bunch of data, there is just a simple download button for your reader to click on.