files & pdfs

Overview

This page shows how to create a popup link from an image to a file with JCE Editor Pro's Image Button.  Note: This can also be done in the standard JCE Editor.

Requirements

• JCE Pro with Image Manager Extended button enabled
• JCE Media Box 2 plugin installed and enabled

Procedure

Step 1: Click Insert/Edit Image button (the one with a star)

• Log into the Administrator interface using your NetID credentials.
• Find the article you want to edit and click on its title.
• In the text area, position the cursor where you would like your image to appear
• Click on the second "Insert/Edit Image" button; you can identify it by the star in the button (see below)
• If you do not have this featured installed, SUBMIT REQUEST and we can install it for you

Step 2: Select the image to be linked to the popup

• Navigate to the folder where the image is located (or, for a new image, where it should be saved) using the "Folders" pane (see #1 below). If you are adding a new image, click the Upload button (see #2 below):
  
  
• If you clicked Upload, choose the Browse button at the bottom of the "Upload" window and navigate to the location of the image on your computer (see #1 below). Alternately, you can drag and drop images to the 'Drop files here' area (see #2 below):
  
  
• Once you have located or uploaded your image, select its filename from the "Name" pane:
  
  

Step 3: Create the popup link

• Select the "Popups" tab in "Image Manager Extended" (see #1 below)
• For "Popup Type," select "JCE Mediabox" (see #2 below)
• Browse to the folder containing the file that should appear in the popup window and select the filename (see #3 below)
  • Note that you can upload a new file using the Upload button.
• Enter a title for the file in the "Title" field (see #4 below)
• Enter a caption for the file in the "Caption" field (see #5 below)
• Click Insert once complete (see #6 below)
  
  
• Save & Close your article.  The image you selected in Step 2, when clicked, will link to a popup window displaying the file you selected in Step 3.

Overview

You can link an image to a popup window that displays a larger version of the same image, another image, a PDF, or even a Joomla! article.

Requirements

• JCE MediaBox 2 plugin installed and enabled

Option 1: Make a popup link to a Joomla! Article

The "Apply Now" button at right is an example of an image that links to an article in a popup window.

1) Add the button image.

1. Click the Insert/Add Image tool and navigate and select the image to be linked to the popup window

2) Link the image to the article.

1. Select the image you added in Step 1.
2. Click the Insert Link button on the editor toolbar:
   
   
3. Under "Search...", click Content (see #1 below).
4. Click the name of the top-level category that contains the article you want to link to (see #2 below).
5. If your article is in a subcategory, click the name of the subcategory containing the article.  (If the article is in a category several levels down, you may need to repeat this step until you find the article).
6. Click once on the name of the article you want linked to the button.
   
   

3) Create the popup.

1. In the Link window, click the Popups tab (see #1 below).
2. In Popup Type, choose JCE MediaBox Popups (see #2 below).  (If you do not see the JCE MediaBox Popups, SUBMIT REQUEST asking us to add the JCE MediaBox Popups plugin to your site).
3. Select "Internal Links" for the Media Type option (see #3 below).  This will display the article content without the surrounding elements such as the banner and navigation menu.
4. Click Insert (see #4 below) and then Save & Close the article.
5. Test the page to check the display.  If the window needs to be a different size, go back to the JCE MediaBox Popups options and adjust Dimensions (see #5 below). The first field after Dimensions is width in pixels; the second field is height in pixels. 
   
   

Option 2:  Make a popup link to a File or Image

The "Rutgers Day" image at right is an example of an image that links to a PDF file in a popup window.  If adding a popup to an existing image or file link, skip to step 5.

1. Click the Insert/Add Image tool and navigate and select the image to be linked to the popup window. If the image already exists in the article, copy the link from the URL field.
   
2. Select the image you uploaded in Step 1.
3. Click the Insert Link button on the editor toolbar (See screenshot under Option 1, 2b above).
4. In the Link window, look to the right of the URL field for the "Browse" icon (it looks like a tiny piece of paper).  Click it and browse to the image or PDF that should open in the popup:
   
   
   
   
5. In the Link window, click the "Popups" tab (see #1 below).
6. In Popup Type, choose JCE MediaBox Popups (see #2 below).  (If you do not see the JCE MediaBox Popups, SUBMIT REQUEST asking us to add the JCE MediaBox Popups plugin to your site).
7. [Recommended] Enter a short description of the image or the file in the "Title" and/or "Caption" fields.
8. [Optional] Set dimensions for popup (see #3 below). The first field after Dimensions is width in pixels; the second field is height in pixels. (You may want to do this if what will be displayed in the popup is very large).
9. Click the Insert button (see #4 below).
10. Save & Close the article.
    
    
    
    

Get the public link to the Box file

General:  Be sure there is at least one other co-owner in your unit with full access to the files.

1. Click the Share button on the right side of the file.
2. Below Share Link, click the slider button for "Create shared link". Text will change to "Shared link is created" and a URL will appear.
3. Underneath the URL, change the access from "People in your company" or "Invited people only" to "People with the link". 
4. If the URL provided will work as it is, click Copy and move on to "Create link to the Box file" section. If a shortened or custom link is preferred, continue with next step in this section.
   
   
   
   
5. [optional]  Click "Link Settings".
6. [optional] Enter a custom path with no spaces (12-30 characters).
7. Click Save.
8. Click Copy to copy the URL to the clipboard for the next step.

Link to the Box file

1. In the Joomla article, select the text or image to be linked and click "Insert/edit link" tool.
2. Paste into the "URL" text box.
3. Select "Open in new window" for Target. This is standard for links to content on external websites though not used if the link opens in a popup. (See optional "Set the link to open in a popup window" section.)
   
   

   

4. Click Insert.
5. Save and Close.

Set the link to open in a popup window [optional]

1. While still in the Insert/Edit link window, click the "Popups" tab.
2. Select JCE MediaBox Popups in the Popup Type field.
3. Choose External Links/Iframe in Media Type.
4. Click Update or Save to save changes, whichever appears. If establishing the link initially,  Save will appear.  If the link is being modified, Update will show as the button text.  Both will save settings.
   

   

   
   
   
   

Get the public link to the Box file

General:  Be sure there is at least one other co-owner in your unit with full access to the files.

1. Click the Share button on the right side of the file.
2. Below Share Link, click the slider button for "Create shared link". Text will change to "Shared link is created" and a URL will appear.
3. Underneath the URL, change the access from "People in your company" or "Invited people only" to "People with the link". 
4. If the URL provided will work as it is, click Copy and move on to "Create link to the Box file" section. If a shortened or custom link is preferred, continue with next step in this section.
   
   
   
   
5. [optional]  Click "Link Settings".
6. [optional] Enter a custom path with no spaces (12-30 characters).
7. Click Save.
8. Click Copy to copy the URL to the clipboard for the next step.

Link to the Box file

1. In the Joomla article, select the text or image to be linked and click "Insert/edit link" tool.
2. Paste into the "URL" text box.
3. Select "Open in new window" for Target. This is standard for links to content on external websites though not used if the link opens in a popup. (See optional "Set the link to open in a popup window" section.)
   
   

   

4. Click Insert.
5. Save and Close.

Set the link to open in a popup window [optional]

1. While still in the Insert/Edit link window, click the "Popups" tab.
2. Select JCE MediaBox Popups in the Popup Type field.
3. Choose External Links/Iframe in Media Type.
4. Click Update or Save to save changes, whichever appears. If establishing the link initially,  Save will appear.  If the link is being modified, Update will show as the button text.  Both will save settings.
   

   

   
   
   
   

Overview

This document explains how to link text to a file that has already been uploaded to Media using JCE Editor Pro.

If you would like to upload and link to a document at the same time, see: Uploading and linking to PDF files using JCE Editor.

Procedure

• First, upload the file using JCE File Browser (JCE Editor PRO)
• Then, create or edit an article either in the front-end or the back-end
• In the article text area, type the text that will be linked to the file
• Highlight the text to be linked to the file
• Click the Insert/Edit link button on the editing toolbar:
  
  
• Click the "Browse" button to the right of the URL field (see #1 below)
  
  
• Browse the folder list to the left, then find the file that you uploaded earlier
• Click once on the name of the file you want to link to
• Click Insert to the lower right
• Recommended: Click the "Popups" tab (see #2 above)
  • For "Popup Type" select "JCE MediaBox Popups" (see #1 below)
  • Enter a title for the document in the "Title" field (see #2 below)
  • Click Insert to the lower right (see #3 below)
    
    
• Click Insert again
• Click Save & Close

Overview

In Joomla!, files such as PDFs and images (jpg, png, etc) are all stored in the "images" directory.  The exception is for files uploaded using a third-party document management extension such as DOCman.  These extensions have their own folder structure within the Joomla! website.

There are multiple ways to upload these files; follow the appropriate links below.

Uploading files to the "images" folder

The Media Manager in Joomla! and JCE Editor Pro both allow you to upload files to the "images" folder.

Media - for image files (gif, jpg, png, etc).

• Adding an Image to Media

JCE Editor File Browser - for PDF files

• Uploading and linking to files within articles using JCE Editor PRO
• Uploading a file using JCE File Browser

Uploading files with third-party extensions

DOCman, Ignite Gallery, and JEvents are all examples of third-party extensions that allow you to upload files to Joomla!.  The files are stored by the respective components within their own file structures, not the "images" folder.

DOCman

• Updating DOCman Documents with New Files
• Uploading and Publishing Documents using DOCman
• Uploading Multiple Files using DocMan

Ignite Gallery

• Uploading Images

JEvents

• Adding Images to Events using JEvents File Uploader Tool
• Adding PDFs to events using JEvents file uploader tool

Overview

When uploading a PDF or non-image format file, use JCE File Browser instead of Media (used for images).  A bug in Joomla! prevents PDF files from being uploaded via Media.

Procedure

1. In the Joomla! back-end (Control Panel), go to Components > JCE Editor Pro > Control Panel
   
   
2. Click on the File Browsericon:
   
   
3. Once in the File Browser, look under Folders to the left. 
   • To upload directly to "images," don't select a folder; just proceed to the next step ("Click the Upload icon...")
   • To upload to an existing folder, browse to and select the folder.
   • To upload to a new folder:
     • Browse to the folder where the new folder should be located
     • Click New Folder to the upper right (see #1 below)
     • Enter a name for the folder in the New Folder popup window.  Do not use spaces or any special characters other than a dash ("-")
     • Click Create
     • Click on the new folder you created
4. Click the Upload icon to the upper right (see #2 below)
   
   
5.  Click Browse to the lower right (see #1 below).
   
6. Select one or more files from your computer, then click Upload (see #2 above).
   1. If you get the message "Upload failed!", the file may already exist.  Delete the current file following the next step (7a), then try to upload it again.
7. Once a file has been uploaded, you can select it, then do the following:
   1. Delete it - see icon #1 below
   2. Rename it - see icon #2 below
   3. Move it, by selecting "Cut" (see icon #4 below), browsing to another folder, and clicking "Copy" (see icon #3 below)
   4. The "View" icon (#5 below) may not work on PDFs, but should work with images.
      
8. Note: if you rename, move, or delete a file, any links to those files will no longer work.
   
   
   

Overview

When uploading a PDF or non-image format file, use JCE File Browser instead of Media (used for images).  A bug in Joomla! prevents PDF files from being uploaded via Media.

Procedure

1. In the Joomla! back-end (Control Panel), go to Components > JCE Editor Pro > Control Panel
   
   
2. Click on the File Browsericon:
   
   
3. Once in the File Browser, look under Folders to the left. 
   • To upload directly to "images," don't select a folder; just proceed to the next step ("Click the Upload icon...")
   • To upload to an existing folder, browse to and select the folder.
   • To upload to a new folder:
     • Browse to the folder where the new folder should be located
     • Click New Folder to the upper right (see #1 below)
     • Enter a name for the folder in the New Folder popup window.  Do not use spaces or any special characters other than a dash ("-")
     • Click Create
     • Click on the new folder you created
4. Click the Upload icon to the upper right (see #2 below)
   
   
5.  Click Browse to the lower right (see #1 below).
   
6. Select one or more files from your computer, then click Upload (see #2 above).
   1. If you get the message "Upload failed!", the file may already exist.  Delete the current file following the next step (7a), then try to upload it again.
7. Once a file has been uploaded, you can select it, then do the following:
   1. Delete it - see icon #1 below
   2. Rename it - see icon #2 below
   3. Move it, by selecting "Cut" (see icon #4 below), browsing to another folder, and clicking "Copy" (see icon #3 below)
   4. The "View" icon (#5 below) may not work on PDFs, but should work with images.
      
8. Note: if you rename, move, or delete a file, any links to those files will no longer work.
   
   
   

Overview

JCE Editor PRO features a new "Insert/Edit File" button that can be used to quickly upload and link to a file while editing an article.  For websites with a small number of PDF files, this is a good alternative to DOCman.

If you anticipate that your website will need to include dozens of files, DOCman is a better option, since it allows you to move and rename documents without breaking any links to them. 

Procedure

• Select an article to edit following steps 1-3 of Basic Editing (front-end).
• Click the "Insert/Edit File" button:
• The "File Manager" popup window appears (see below)
• Select the folder where the file will be uploaded:
  • To upload to an existing folder, browse to and select the folder (see #1 below)
  • To upload to a new folder:
    • Browse to the folder where the new folder should be located (see #1 below)
    • Click New Folder (see #2 below)
    • Enter a name for the folder in the New Folder popup window.  Do not use spaces or any special characters other than a dash ("-")
    • Click Create
    • Click on the new folder you created
  • Click the Upload icon (see #3 below)
  
  
• Upload the file:
  • After clicking Upload, the "Upload" popup window appears (see below)
  • Click Browse to the lower right (see #1 below)
  • Select one or more files from your computer, then click Upload (see #2 below)
    
• Create the link to the file:
  • Select the file you uploaded (see #1 below)
  • Replace the filename in the "Text" field with a short description of the file.  This will appear in your article as text linking to the file (see #2 below)
  • Click Insert to the lower right (see #3 below)
    
    
•  Your file will appear as linked text within your article.

Example:

The link to your file will look like:

Campus Map

Overview

This page describes how to upload and link to a PDF file using the "Insert link" button.

To accomplish the same task, but with advanced options, see: Uploading and linking to files within articles using JCE Editor PRO

1) Find the Link tool.

• Select an article to edit following steps 1-3 of Basic Editing (front-end).
• Highlight the text in your article that will be linked to the file (see #1 below).
• Click the Insert/Edit link button on the editing toolbar (see #2 below).

2) Find the Browse button in the Link window.

• A Link popup window will appear.
• To the right of the URLfield, click the Browse icon.  It looks like a sheet of paper.

3) Navigate the File Browser.

• In the File Browser window, browse to the folder where the new file should be stored (see #1 below).
• Click Upload to the upper right (see #2 below).

4) Upload the file.

• Click Browse and navigate to the file to be uploaded (see #1 and #2 below).
• Click Upload (see #3 below).

5) Select the uploaded file.

• Make sure the newly uploaded file is highlighted in the File Browser window and the box to the left of it is checked (see #1 below).
• Click Insert to the lower right (see #2 below).
• Click Insert again at the Link popup window.

6) Save the changes.

Click Save (or Save & Close in the Joomla! back-end) to save the article.