Media Manager

As its name suggests, the Media Manager is the place to keep track of and organize all your media files within folders and subfolders. You can use it to upload files, delete old material, or create new folders.

Accessing and using the Media Manager

The interface within the Media Manager is graphical and similar to other file explorer programs you will have definitely used within a Windows environment.

Like any of the sections of the administration control panel, you can access the Media Manager either by:

• Clicking Site | Media Manager from the top menu
• Clicking the Media Manager icon on the Control Panel

You can switch your view of the files within the Media Manager to suit your preference, as both provide the same level of functionality:

• Click Thumbnail View to see small graphic versions of your files, handy when you want to find an image
• Click Detail View to see the names of your files along with the dimensions and sizes

The following screenshot illustrates the use of the thumbnail view:

The Folders section to the left of the Media Manager interface displays the site folders. Click one to open and reveal any subfolders within it.

Within your site there will most likely be a subfolder within the images folder called stories, that is, images | stories. This is generally where the site images will have been placed and is where the Image Upload button defaults to when you add an image to an Article. You can also create new folders in here to store additional media.

Using the Party People website, we have created a new article and now need to add an image that doesn’t fit in with the established folder structure.

Creating a new subfolder

It may be that after adding a new Section and/or Category, none of the existing image folder structures apply. Here we’ll create a new subfolder called glassware to accommodate the new material:

1. Navigate to the Media Manager through the top menu or by clicking the Media Manager icon on the home page of the Control Panel.
2. Click on the stories folder in the Media Manager. Note that the Media Manager opens directly into the images folder (this is set in the Global Configuration area and can be changed if necessary).
3. Type in glassware as the name of the new folder and click the Create Folder button. The new subfolder will appear instantly.

Now that we have the new glassware subfolder we can upload a new image to store in it using the Upload File tool.

A note on copyright

While you may have your own images and videos to use on your website, if you are considering using another artist’s material and content, always ensure you have copyright permission or the license to do so in order to avoid breach of any copyright laws. You should refer to your local authority for full details.

Many website developers and owners regularly purchase and use stock photography, illustrations, and videos. If you choose to purchase any material for your site, ensure you are purchasing it with the right license, as there may be restrictions on its use even after paying for the material. This may, in fact, be a license fee and not a transfer of complete ownership. Sites such as http://www.istockphoto.com/license.php have a page dedicated to licensing agreements around purchasing their material.

What you should know about image and video files

Have you ever visited a website where a large image takes forever to download? Or the video takes forever to start playing? Chances are that you gave up and left the site.

While it doesn’t happen quite so much now, take care to avoid this wherever possible. As a general rule, the larger the file size, the longer it takes to download into the browser, and not all users of your website may have fast download speeds.

To ensure your images are downloaded as quickly as possible, ensure your files are formatted and compressed into as low a resolution version as possible (without losing the quality) and the dimensions of the videos displayed kept to minimum viewing sizes. There is a trade-off between quality of the image and download speed; compromise is the key here. Audio, video, and animation files can be referred to collectively as multimedia, especially when they are combined within a project.

Choosing the best image file format

Images come in a variety of file formats and some are smaller in size than others. There are other image file formats, but the following are often used within websites:

• .jpg files are great for highly detailed images such as photographs. As a result, their file size is generally bigger due to the amount of information they require to present the detail.
• .gif files are suited to images requiring less detail, such as drawings or diagrams, and are smaller in file size as a result.
• .png files are similar to .gif files, as they are also low resolution images. They often have a transparent background so you can place them over a colored background and the color will appear behind the image.

Remember the following when applying images to your website:

• Use images with a purpose—to enhance or illustrate your content.
• Keep file sizes as small as possible. Consider a .gif rather than a .jpg if the image isn’t a particularly detailed one.
• Use photo editing software to reduce the resolution of your image to 72dpi for fastest download time. Anything higher is pointless, as computer monitors only present a certain number of colors and drop the excess. If you don’t have access to software such as Photoshop, there are a number of free possibilities. One is a program called GIMP (http://www.gimp.org). It’s a free program that allows you to retouch photos and create and edit images. The website has tutorials as well.

Adding and managing images

Having covered editing and adding text to an article, updating and/or adding new images or other media to your articles is easy too.

In this section, we’ll work on adding and deleting images and cover some general information on how they can work best for your site.

Uploading a new image

The File Upload tool within the Media Manager makes it easy to move your images from your computer into your website folders.

• Select the new glassware subfolder within the Folders structure. This places us in that folder.
• Click the Browse button under the Upload File section.
• Navigate to the image file in the pop-up window and click Open.
• Click the Start Upload button back in the Media Manager.

Now we have an image within the glassware folder, it’s ready to be used within anarticle. Note that the following screenshot presents the Details View.

Deleting an image

You might find that as your website consumes more space on the server, you may have to delete some image files. However, be careful doing this, as you don’t get a warning! Ensure your site does not require the image anymore, as you will end up with a blank area with a red square in it where the image should be, and that looks unprofessional.

Using Thumbnail View within the Media Manager, select the checkbox under the image thumbnail or next to the filename. Click the red “x” icon next to it in order to immediately delete that file, as shown in the following screenshot. You can also use the Delete button in the contextual toolbar at the top right.

Updating a Simple Image Gallery

Rather than a single image, you might have an article with a Simple Image Gallery embedded within it that presents a selection of thumbnail images to the browser through the article. The gallery plugin parameters can be accessed through the Extensions | Plugins menu along the top of the administration interface. The following screenshot is an example of how one looks on the Party People website.

Using the Party People website, we’ll update this New Balloons in Stock Now! gallery applying the Balloons folder we made earlier. However, remember that the authors of this plugin recommend only 16 to 20 images per gallery.

1. Navigate to the Media Manager and to the balloons folder.
2. Upload the additional images to the balloons folder using the File Upload tool as outlined in the Uploading a file section of this article.
3. Delete any outdated images, if necessary, by selecting them and clicking the Delete button, as outlined in the Deleting a File section of this article.

To display the new images from a different folder in the article, we will need to access the article through which the gallery is presented:

1. Navigate to the Article Manager and open the article containing the gallery of images. You will see something like the following code within the Article’s text editor:

   {gallery}galleryNameIsHere{/gallery}
   

2. Change this to balloons as in the folder where the balloon images are kept. The following screenshot illustrates the code snippet where you should change the folder name.
3. Apply your changes and review them before going live.

Changing the Simple Image Gallery’s dimensions

If the dimensions of the image gallery, such as the height and width, need to be changed, there are the following steps:

1. Navigate to the Extensions menu using the global menu at the top of the screen.
2. Select Plugin Manager from the drop-down list and navigate through the list until you see the Simple Image Gallery Plugin link in the list. To make this quicker, use the Select Type filter and choose Content.
3. Ensure this plugin is enabled in the Plugin Manager.
4. Click the link to view the parameters for this plug-in; change them as you like.

Note that your developer may have changed the name of the module when it was installed.

>> Continue Reading Managing Images and Videos in Joomla! 1.5: Part 2