Images and Files

Media Manager

To upload a picture

• Save images to your own computer first
• Find the image or file you want to use in an article and save it to your PC Picture Folder.
• IMPORTANT – name your images in lower case with no gaps (you can use underscore_ or dash-), e.g. view_of_nelson_city_1
• Crop and resize if necessary

To preload photos to the Media Manager (not essential)

• Go to Media Manager > choose a folder/subfolder
• Click Upload > Choose files > find the image/s (you can upload several at one time) > Open - the title of the image will file shows > Start Upload
• A green message at top of screen shows if completed correctly

Method 1 - From inside an article:

• Click where you want to insert the image
• Click the Image button at bottom of screen > choose the folder (e.g. Stories / subfolder Photos) where you want to store the image
• Scroll to the bottom of the window and click Choose Files
• Select the image from your computer > Open - the name of the image shows > Start Upload > green message at top of screen shows if completed
• Check the directory is correct (/stories/photos)
• Select the uploaded image > Align (optional) > Insert

Method 2 - From inside an article (via the JCE Editor):

• Click the JCE picture icon (the one with the star), it opens the Image Manager box
• Find the folder/subfolder the image is stored in (e.g. Stories/Photos)
• Select the image you want – a preview of the image shows (check the URL path)
• Change the properties of the image if necessary (align, size, etc) – e.g. Align Left, Margin 5, Remove "Equal values" option unless you want same distance all round.
• Insert
• You can adjust the size a little once the image is in the article, but it is better to resize before uploading.

Video Tutorial on Images:

https://www.youtube.com/watch?v=P93FAynrGLE

HINTS: For images in SeniorNet Nelson articles

• Dimensions: Proportional
• Alignment – Left or Not set
• Margin - 5 to 10 in Right box. Clear "Equal values" option unless you want the same distance all around the image.

Creating a Popup Image

If you want an image to pop up:

There are 3 methods for creating a popup:

1. Creating a popup for an image that has an associated thumbnail - 
   This method assumes that the image to be used as the main popup image already has a thumbnailed version present in the thumbnail folder, either created during the upload process or using the Thumbnail Editor.
   
   
2. Creating a popup for an image that does not have an asscociated thumbnail - 
   No thumbnail is present and one needs to be created using the Thumbnail Editor.
   
   
3. Creating a popup for an image using an alternate thumbnail image - No thumbnail is present and you wish to use a different image as the thumbnail (this can be any image at all, located in any folder).

Creating a popup for an image that has an associated thumbnail

As stated above, this method assumes that a thumbnail already exists. You can check this by selecting the image (click to the right of its name), and checking to see if the thumbnail icon is a Create Thumbnail icon or a Delete Thumbnail icon. If it is the latter, a thumbnail exists, and should be located in the 'thumbnails' folder in the same directory as the image. Proceed by following these steps:

• Click the Popup Tab.
• Select a Popup Type: JCE MediaBox - the default choice. This requires that the JCE MediaBox plugin is installed and published.
• Select the image that is to be used as the popup image by clicking on its name in the File Browser. A dialog will appear asking whether you would like to use the image's associated thumbnail. Click Yes.
• The URL field in the Popup tab will be filled with the popup image's url, and the relevant fields in the Image tab will be filled with the thumbnail image's values.
• To add a title and/or caption to the popup, enter text in the Title and Caption fields.link popup title.
• To create a gallery of images in the popup, assign each popup link to the same 'group' by giving each popup the same group value.

The Group or Album field is used to associate image popups, thus creating a popup gallery, where the visitor can naviagte from one image to the next from within a single popup. To use this feature, all the images must be on the same page (or end up on the same page within the various Joomla! content items) and have the same Group or Album name.

Example: I have created 3 popup images in my content item, and assigned them all the Group name of 'gallery'. When the visitor views any of the popups by clicking on any one of the images, navigation items are included in the popup allowing the viewer to move to the other images in the Group.

Creating a popup for an image that does not have an asscociated thumbnail

• Select the image to be used in the popup blicking to the right of the image's name.
• Click the Create Thumbnail button to open the Thumbnail Editor. Select the desired values in the dialog that appears. The default values are usually adequate. Click Save.
• Follow steps 1 to 6 above.

Creating a popup for an image using an alternate thumbnail image

The procedure for this method is quite different to the above two in that we must manually specify which is the popup image and which is the thumbnail image. It is however, relatively straight forward and only takes a few more clicks than the above methods!

• With the Image tab selected, click on the image name of the image that is to be the thumbnail, ie: the image that will be clicked to launch the popup.
• Click the Popup tab.
• Select a Popup Type, eg: JCE MediaBox
• Click on the name of the image that is to be the popup image in the File Browser, ie: the image that will be disaplayed in the popup.
• As above, if this image has an associated thumbnail, you will be asked whether you would like to use this thumbnail - Click No.

The final steps are the same for each one of these methods.

Assign values to the Image if necessary (Align, Margin, Border etc.)

Click Insert

To remove an existing Popup, set the Popup Type to -- Not Set --, then click the Update button.

Put a background image or colour on an article

(From Joomla! Documentation)

You can place a background image or colour in an article by following these steps:

• Open the article for editing with JCE editor.
• Press the "Edit HTML Source" button and enter the code indicated below at the very beginning of the article:

For an image:

<div style="background-image: url('/images/stories/key.jpg')">

For a color: 

<div style="background-color: #dddddd">

• Substitute your desired image or color in the code above. If you are using the JCE editor, you do not need to add the closing
• tag at the end of the article, since JCE will add this for you automatically.
• If you want to control the style from the CSS file, you can insert a class attribute instead of a style attribute. For example, follow steps (1) and (2) above, except insert this code:
  
  <div class="mynewclass">

• Then open the CSS file (normally <joomla! home="">/templates/CSS/template.css) and add something like:
  
  div.mynewclass { background-color: red; }

• If you want to have different backgrounds for different Menu Items, you can also use the Page Class Suffix parameter of the Menu Item to create new CSS classes and then add styling commands in the CSS file.
  
  

  ---

  How to turn text into a button

  Inside an article or a module:

  • Type text at desired position
  • Highlight text
  • Go to link button on JCE Edit
  • Add link address (URL copied and pasted from original position)
    or use browse button to find item and click to upload
  • Set target to open in same window
  • Insert

  Open the source code editor on JCE Editor < >

  • Find the link name inside the < ………… >
    (key text to look for includes <href…(link address) target="_self">)
  • Click just in front of > and add class=”button”

Creating a Popup Image

If you want an image to pop up

There are 3 methods for creating a popup:

1. Creating a popup for an image that has an associated thumbnail - 
   This method assumes that the image to be used as the main popup image already has a thumbnailed version present in the thumbnail folder, either created during the upload process or using the Thumbnail Editor.
   
   
2. Creating a popup for an image that does not have an asscociated thumbnail - 
   No thumbnail is present and one needs to be created using the Thumbnail Editor.
   
   
3. Creating a popup for an image using an alternate thumbnail image - No thumbnail is present and you wish to use a different image as the thumbnail (this can be any image at all, located in any folder).

Creating a popup for an image that has an associated thumbnail

As stated above, this method assumes that a thumbnail already exists. You can check this by selecting the image (click to the right of its name), and checking to see if the thumbnail icon is a Create Thumbnail icon or a Delete Thumbnail icon. If it is the latter, a thumbnail exists, and should be located in the 'thumbnails' folder in the same directory as the image. Proceed by following these steps:

• Click the Popup Tab.
• Select a Popup Type: JCE MediaBox - the default choice. This requires that the JCE MediaBox plugin is installed and published.
• Select the image that is to be used as the popup image by clicking on its name in the File Browser. A dialog will appear asking whether you would like to use the image's associated thumbnail. Click Yes.
• The URL field in the Popup tab will be filled with the popup image's url, and the relevant fields in the Image tab will be filled with the thumbnail image's values.
• To add a title and/or caption to the popup, enter text in the Title and Caption fields.link popup title.
• To create a gallery of images in the popup, assign each popup link to the same 'group' by giving each popup the same group value.

The Group or Album field is used to associate image popups, thus creating a popup gallery, where the visitor can naviagte from one image to the next from within a single popup. To use this feature, all the images must be on the same page (or end up on the same page within the various Joomla! content items) and have the same Group or Album name.

Example: I have created 3 popup images in my content item, and assigned them all the Group name of 'gallery'. When the visitor views any of the popups by clicking on any one of the images, navigation items are included in the popup allowing the viewer to move to the other images in the Group.

Creating a popup for an image that does not have an asscociated thumbnail

• Select the image to be used in the popup blicking to the right of the image's name.
• Click the Create Thumbnail button to open the Thumbnail Editor. Select the desired values in the dialog that appears. The default values are usually adequate. Click Save.
• Follow steps 1 to 6 above.

Creating a popup for an image using an alternate thumbnail image

The procedure for this method is quite different to the above two in that we must manually specify which is the popup image and which is the thumbnail image. It is however, relatively straight forward and only takes a few more clicks than the above methods!

• With the Image tab selected, click on the image name of the image that is to be the thumbnail, ie: the image that will be clicked to launch the popup.
• Click the Popup tab.
• Select a Popup Type, eg: JCE MediaBox
• Click on the name of the image that is to be the popup image in the File Browser, ie: the image that will be disaplayed in the popup.
• As above, if this image has an associated thumbnail, you will be asked whether you would like to use this thumbnail - Click No.

The final steps are the same for each one of these methods.

Assign values to the Image if necessary (Align, Margin, Border etc.)

Click Insert

To remove an existing Popup, set the Popup Type to -- Not Set --, then click the Update button.

You first need to load it into thumbnails.
Then go to JCE Editor and use the icon for JCE Mediabox and select the popup tab.

FILES

To preload files to the Media Manager (not essential)

• Save the file to your own computer first
  IMPORTANT – name your files in lower case with no gaps (you can use underscore_ or dash-), e.g. view_of_nelson_city_1
• Go to Media Manager > choose a folder/subfolder
• Click Upload > Choose files > find the file/s (you can upload several at one time) > Open - the title of the file will file shows > Start Upload
• A green message at top of screen shows if completed correctly

To link to another article from inside an article

• Click at the place you want to add the article
• Click the Article button at bottom of screen > click the article from the list that appears (these articles must already be created).
• The link will be inserted with the title of the article.

To link to a file (doc, pdf, etc) from inside an article (via the JCE Editor):

• Type and/or highlight the text for the link.
• Click the JCE link icon, it opens the Link Manager box
• Find the folder/subfolder the file is stored in (e.g. newsletters)
• Select the file you want – check the URL path
• Choose the Target option
• Add a title to the Title section
• Click Insert

To link to a file (doc, pdf, etc) saved on your hard drive

• Type and/or highlight the text for the link.
• Click the JCE link icon, it opens the Link Manager box
• Click the Browse icon to the right of the URL box, the File Browser opens
• Choose the folder you would like the file to be added to (e.g. newsletters)
• Choose the Upload button (top right)
• Click Browse
• Select the file you want from a folder on your hard drive
• Click Open, then Upload, then Insert
• Click the name of the file you just uploaded
• The URL will appear in the URL box – check the URL path is OK
• Choose the Target option
• Add a title to the Title section
• Click Insert

IMPORTANT - Always check the links are correct from the front end of the website

The following link is to a CloudAccess tutorial on Linking Files to Articles