PDFs and Files in Joomla Instructor for this Workshop – Laura Gordon

Web Development

School of Arts and Sciences

Joomla! Work with PDFs Joomla! 2018

2

TABLE OF CONTENTS Welcome..........................................................................................................................................3WhatisJoomla?.......................................................................................................................................................3

JCE–EditorProvs.Regular........................................................................................................3WheredowestoreFiles?............................................................................................................3UploadaFileinJoomla................................................................................................................4WorkwithFilesinJoomla...........................................................................................................6AddfilesintoArticleDirectly....................................................................................................7InsertFileusing‘link’option.....................................................................................................9UseImageManagerExtended..................................................................................................10

Page 3

PDFs / Files in Joomla!

WELCOME Instructor for this Workshop

School of Arts & Sciences, Web Development

Once you arrive:

1. Login to the workstation with your NetID 2. Open a web browser (Firefox or Chrome)

3. Go to the website: http://www.sas.rutgers.edu/cms/sandbox3

WHAT IS JOOMLA? Joomla! is Content Management System (CMS) software that runs on a web server, and allows you to update your unit's web site through a browser (such as Google Chrome, Mozilla Firefox, or Safari).

A content management system isolates the process of updating information from the more technical aspects of updating a website (such as administration, configuration, and design), and eliminates the need to edit HTML or use web design software.

Visit www.joomla.org and help.joomla.org for more information on Joomla!

JCE – EDITOR PRO VS. REGULAR Initially all of our websites have JCE Editor installed. Many of these functions can be done in both the editor ‘regular’ or ‘Pro’. The notes referencing editing at the article level (with the ‘document link’ are only available in JCE Editor Pro. If you would like that functionality, please create a work order and we can install it for you.

WHERE DO WE STORE FILES? Files, Pdfs and images are all stored in the IMAGES Directory.

There are multiple ways to store these files…

1. Media Manager in Joomla

content à Media

Currently this only works with image files (.jpgs and .pngs)

2. File Browser using JCE Editor

Joomla! Work with PDFs Joomla! 2018

4

Components à JCE Editor à Control Panel

UPLOAD A FILE IN JOOMLA Components à JCE Editor Pro à Control Panel

Click on FILE BROWSER

Page 5

Work with File Browser (manager)

When on the upload page, select the file (click green browse icon), then click UPLOAD

1. Click on PDF Files Folder

2. Or create a NEW Folder by clicking on New Folder button

Joomla! Work with PDFs Joomla! 2018

6

WORK WITH FILES IN JOOMLA Once the files exist, it is possible to:

- rename files, move files, copy files - Anything that you can do with a regular file manager - REMEMBER: If any files are MOVED LINKS WILL NO LONGER WORK! BE CAREFUL

Rename File

Trash File

Copy File

Cut File

VIEW File

Page 7

ADD FILES INTO ARTICLE DIRECTLY This functionality exists in JCE Editor PRO Only. To request to have it installed, please create a work order, and we can install it for your department. Eventually we will install it for all departments, but probably not until the next Joomla Security release. If you want it earlier, please create a work order and request JCE Editor Pro to be installed on your site.

1. Click on Insert / Edit File Icon

This ‘browser’ window works the same as the ‘image’ windows that we have used in the past. To upload a file, click the UPLOAD button.

1. Insert/Add File Icon

2. Insert Edit Image Icon

1. CLICKON FILE (once it is uploaded)

2. URL – This should have the file name in it (do not change)

3. Title – Title of the file, appears on hover

4. Text, this is displayed in the ARTICLE

5. Target: Set to NEW WINDOW

6. Layout: Click ICON (so pdf icon will display), can also display date of document

Joomla! Work with PDFs Joomla! 2018

8

2. Display in the Article Editor

3. Change it so the PDF uses a POPUP Window

Click on the item in the editor, then click on Insert/Edit File Icon

1. Click the Popups Tab

2. Select JCE Mediabox Popups

3. A title can be added (not required)

Page 9

INSERT FILE USING ‘LINK’ OPTION This option can work if you have the ‘regular version of JCE Editor installed’

Type in the ‘title of the link’, then highlight it, and click on the ‘LINK’ icon

Click on ‘LINK’ icon

Click on ‘Browse’ icon

Click on ‘UPLOAD’ icon

Be sure to select a folder first, to upload the file to.

This process is the same as before.

Joomla! Work with PDFs Joomla! 2018

10

USE IMAGE MANAGER EXTENDED This new button combines together the use of ‘images’ and pdf files together.

Click on Popups

1. upload or select image

2. Add Alt Text

3. Adjust alignment if needed

* All options are the same as the regular image manager

Page 11

End Result:

1. select JCE Mediabox Popups

2. Click on a PDF file (it will display in the URL)

3. Click UDATE or INSERT