Joomla Media Manager

Transcription

1 Joomla Media Manager The Joomla Media Manager allows you to upload and store images and document files to your web site. The images can then be inserted for display within your Articles. Document files can then be linked from within your Articles. It is important to note that there is a LIMIT to the file size you can upload and link to your web site. The maximum size is approximately 10MB. Large files are difficult to view/download from a web site. The smaller your files, the faster web users will be able to view, access, or download them. Keep your files as small as possible. The following are types of files that you may upload via the Media Manager: PDF documents (.pdf), Word documents (.doc), Excel documents (.xls), PowerPoint documents (.ppt), images/graphics (.gif,.jpg,.png). Please note that the files MUST be properly named and the name MUST include the appropriate file type extension (listed in parentheses above). For document files, we recommend PDF format, as this format is available to ALL web users. For assistance creating PDF files, please see PDF Creation under Web Tools on the Web Central site. For photographic images, we recommend JPG format in most cases. Photos should ALWAYS be resized and saved for the web BEFORE uploading through the Media Manager. (NOTE: You can NOT upload images taken directly from your camera, as they are too large for display.) For assistance resizing and creating appropriately sized JPG files, please see the Photo Resizing instructions in the Joomla Photo/Art Gallery section of the Web Central site. If you are interested in posting small video files to your web site, please contact webmaster@wps60.org for approved file types and file-naming procedures. Note: Size limitations of 10 MB apply to any file stored in the Media Manager for your Joomla web site. USING THE MEDIA MANAGER If you are not already logged into your Joomla web site, do so now. From the Control Panel, click the Media Manager button or you may select Media Manager from the Site Menu dropdown.

2 This will take you to the Media Manager screen. The Media Manager opens by default to the images folder. The stories folder is displayed within the images folder and is circled below on the Media Manager screen. The default path to where you will store images and/or document files on your site is images/stories. Click on the stories folder icon (or the stories listing in the left navigation column) to open it. In most cases, you will find that some folders have already been created within the stories folder to hold files and/or images that were created for your site when it was transitioned from its previous Manila version. In the case of the Greenwood Elementary School site (as displayed above), there are already folders called artgallery, documents greenwood_images and photogallery. You may, of course, add images or document files to existing folders. It is a very good idea to keep documents or images of the same kind together. However, you may also create new folders to store a new set of files or images.

3 To create a new folder within the stories folder, type in the name of the folder (use all small letters no spaces or special characters) and then click the Create Folder button. Once created, the new folder will appear in your Media Manager display in alphabetical order. The newsletters folder (created above) will now be available for uploading and storing your newsletter files. IMPORTANT PLANNING TIP: If you are planning to create more than one image gallery to display using Joomla s Simple Image Gallery plug-in, you need to make a SEPARATE folder for each gallery you want to display. In the Greenwood sample, there is an artgallery folder and a photogallery folder. You might want to have several different photo galleries each displaying a different event. In that case, you will create folders for each set of images. Example Folder Names: fieldday_gallery, geobee_gallery, redribbon_gallery, blackhistory_gallery, etc. See the Simple Image Gallery instructions for details about how to link to your galleries for display. UPLOADING A FILE OR IMAGE Once you have created the folder or folders to store your document files and/or images, you are ready to upload the images or document files that you have prepared to display on the web. From the Media Manager stories folder. Double click the appropriate folder to open it. Use the Upload File section at the bottom of the Files display to Browse to the first image or file you want to upload. Then click the Start Upload Button. The image or file will appear as a thumbnail within the folder.

4 Repeat the upload process until you have added all the photos or files you want to the folder. (In this example, the folder is photogallery and the uploaded files are images.) In the example below from the Glenwood web site, the folder is called glenwood_pdf (outlined in red in folder bar) and the uploaded files are PDFs of the school newsletters and monthly calendars in English and Spanish. A sample file is also outlined in red below. Using the Media Manager, you can always return to the appropriate folder to add more files or images or to remove files and images as described next. DELETING A FILE OR IMAGE It is easy to remove files or images from a folder. Use the Media Manager to access stories/images/ and then the folder containing your images or files. Click the red X by the image or file you want to remove. BEWARE!! There is NO warning! The file or image is deleted immediately when the red X is clicked!!

5 INSERTING AN IMAGE INTO AN ARTICLE There are two ways to display images in Joomla Articles. You can either insert the images one a time into an Article or Articles or you can use the Simple Image Gallery Plug-in to display all of the images within a specific folder as a gallery of thumbnails that enlarge to display the full-sized graphic. Single Image Insert: To insert an image into an Article, begin by creating a new Article or editing a current Article. Unless you are using a table layout on your web, you will be placing your image wherever you place your cursor. You will use the Joomla Image button (outlined in green above) and not the Content Editor image button (circled in red above) to insert a graphic from the Media Manager. Click the Image button. A window will open displaying the folders (within your stories folder). Click on the folder that contains the image you want to display, to open it.

6 Once the folder is open, click the image to select it. See examples above. There is only one image in the wps60_images folder (directory). Note the Directory is indicated at the top left of the window (outlined in turquoise). Once you click to select the image you want to insert, the Image URL will appear in Image URL line (outlined in red). Please note the Image Description line and fill it in. (This text is used as the ALT tag and is important for users with disabilities who use screen readers to view our web sites.) To insert the image into your Article, click the Insert button at the top right of the window (outlined in green above.) The image will now appear in your Article where the cursor was positioned. Be sure to APPLY or SAVE your Article once your image is added.

7 For web editors who want exact control over the location of the image on your site, please review Table Layouts under Joomla Article Advanced Topics. The sample web page display below shows a single image inserted into the Principal s Message Article via the Media Manager but also aligned using Table Layouts. Simple Image Gallery Plug-in: To display ALL of the images within a folder using the Simple Image Gallery plug-in, you will simply call the gallery folder at the appropriate spot within your article. Where ever you want the actual images to display in the Article, type in the following line: {gallery}foldername{/gallery} where foldername is the name of the folder containing the images you want to display. Example: {gallery}photogallery{/gallery}

8 It is also easy to add multiple galleries to one article. For example, you could create an Art Gallery Article for your school with separate galleries for each grade level. To do this you would first create a folder for each grade level within the stories folder. You might call the folders art1, art2, art3, etc. Once you have placed the prepared images within the folders, you would create your Art Gallery Article using text something like the following. Welcome to our Art Gallery. We have sections for each Grade Level. Grade 1 Art Gallery: See our collages, finger paintings and shape animals. {gallery}art1{/gallery} Grade 2 Art Gallery: See our watercolors and paper weavings. {gallery}art2{/gallery} Grade 3 Art Gallery: See our clay animals and our cave paintings. {gallery}art3{/gallery} ETC Be sure to APPLY or SAVE your Article once your gallery link is added. Here is a web page display of multiple galleries linked from a single Article:

9 LINKING TO A FILE FROM AN ARTICLE (INTERNAL LINK) Linking to a document file (stored within the Media Manager) from an Article is relatively easy. The only trick is that you must know the PATH to the article and use it in your link. To begin, create a new Article or edit a current Article. Insert the text you want to use as the link and then drag your cursor through the text to SELECT it. Then click the Link icon in the Content Editor Toolbar (circled in red below). An Insert/Edit Link window will open. You will type in the Link URL (and just leave the default settings for everything else). The Link URL is the PATH to your file. Since images/stories is set as the default path for your Joomla web site, you will always enter that first followed by the name of the folder where you stored your files and then the specific file name. See the sample outlined in red. The file is called MediaMgr.pdf and it is stored within a documents folder that was created in the stories folder (which is in the images folder) on the Web Central web site. Therefore, the Link URL (or path to the file) is images/stories/documents/mediamgr.pdf.

10 As long as you follow the default settings, the format for every file Link URL can be generalized as follows: images/stories/yourfoldername/yourfilename.ext Where yourfoldername is the name of the folder where you stored the files (examples: glenwood_pdf, newsletters, documents) and yourfilename.ext is the name of your file including the appropriate extension (examples: news pdf, Oct09Calendar.pdf, parentletter11-12.pdf, MediaMgr.pdf) Once you have created your first internal link to a file, any others will be easy! Be sure to APPLY or SAVE your Article once your new link or links are added. NOTE: Always TEST your links as soon as you create them. If you do not already have your school site open, you can display it using the Preview button on the right side of the Joomla toolbar (outlined in blue below). Here is a sample school web page with internal links to newsletter files. NOTE: Links to files/documents stored within the Media Manager are called internal links. You only need to include the internal PATH to the file in the Link URL. For an external Link URL, you need the complete web address including the or (example: EDITING/DELETING LINKS To edit a link that was already created, click within the text that is currently linked and both the Link and Broken Link icons will become active (outlined in red in screen shot). Click the Link icon and the Insert/Edit Link window will reappear and you can edit the link.

11 To remove a link, click within the text that is linked and then click the Unlink icon (broken link outlined in red above) to the right of the link icon in the Content Editor toolbar. The link will be removed. Be sure to Apply or Save your Article once changes have been made. LOGOUT When you are done using your Web Site Manager, remember to LOGOUT correctly. Click the Logout button in the upper right-hand corner of your window. (See red outline below.) If the Logout button is not active, you may still have an article or menu item open for editing. Close or Cancel and try the Logout button again. ADDITIONAL NOTES BACKUP RECOMMENDATION: You should ALWAYS save copies of the document files and images you upload to your web site. Organizing your BACKUP files is important and will make it easy if you ever need to edit or update a file or image. Create a folder on your computer called WebSiteFiles or MediaMgrFiles (or something on that order) and then store your files and images within subfolders that match the names of the folders in your Media Manager. (See sample.) IMAGE PREPARATION: Be sure to prepare your images correctly BEFORE uploading them. Images should be 72 dpi and all of a standard size. 640*480 pixels or 480*640 pixels works well for most web site graphic displays. Your image files should also be saved for the web as jpg files (or gif if line art). The images should be named appropriately no spaces or special characters. (Example image names: fieldday1.jpg, fieldday2.jpg, choir_practice.jpg, bookfair.jpg, owlmascot.jpg). Also note that ALL images you place in the folder (used for a Simple Image Gallery) will be displayed.

12 After completing this tutorial, you should be able to use the Media Manager to create new folders and to upload images and document files to those folders. You should also be able to insert single images and a folder of gallery images into your articles and to link from an article to document files stored in the Media Manager.