Images, videos, files, and other media are managed with the Joomla's Media component. In this tutorial we will use the Media component directly to upload and organize content that will later be used when creating articles. Other tutorials will demonstrate how it is used when working with articles.   

In this tutorial we will use the Media component to organize a collection of images and a file to be used in a future article on telescopes.

Prerequisites

Administrator access to a Joomla site (version 5 or above). See 1.0 Admin Login.

Several images and a PDF file to work with. The tutorial uses content in the public domain (see Attributions below for details).

Adding and Organizing Content with the Media Component

We will create a new folder for our telescope article, upload images, and edit them to a desired size. We'll create a separate telescope folder to contain a PDF file. 

Steps

Creating the Telescope Images Folder

1. Login to Joomla as an administrator and navigate to the Home Dashboard.
2. In the left side menu, expand Content and click on Media.
   • The Media component appears.
   • The interface resembles that of a file manager.
3. A file tree appears on the left displaying two main areas, images and files.
4. Click on images in the file tree
   • Images in the file tree is highlighted in bold text, indicating that it is selected.
   • All of the contents and sub-folders appear in the area to the right.
   • Above the contents is a toolbar called the top bar.
   • At the top of the page are controls to create folders and upload content.
5. Click on Create New Folder at the top of the page
   • A popup appears.
6. Enter a folder name (e.g. Telescopes) and click Create.
   • The new folder appears both in the file tree on the left, and in the contents of the images folder on the right.
   • Clicking on the folder (or any image) in the content area selects it for the purposes of working with the item (e.g. renaming or deleting).
   • Clicking on a folder in the file tree navigates into that folder.
7. Click on the new folder in the file tree.
   • The folder is highlighted in the file tree along with an open-folder icon.
   • The contents of the new folder are displayed on the right. The folder is empty.
   • A breadcrumb navigation appears in the toolbar.
8. Create two sub-folders.
   • Click on the Create New Folder button again.
   • Enter a different name for each folder, e.g. Optical Telescopes and Radio Telescopes.
   • The new folders appear in both the file tree and the content area.
9. Navigate down into one of the new folders by clicking on it in the file tree, e.g. Optical Telescopes.
   • Note the breadcrumb navigation in the toolbar contains links to navigate back up the tree. 

Illustrations

Uploading Images

1. Select a folder in which to upload images, e.g. images/Telescopes/Optical Telescopes.
2. Click the Upload button at the top of the page and follow the prompts to select and upload an image.
   • The new image appears in the content area.
3. Upload more images by dragging and dropping.
   • Open your file explorer or finder application and locate the image files on your computer.
   • Select several images and drag-and-drop them into the content area, where the first image appears.

Illustrations

Context Menu

An item's context menu is a small menu that applies to a single item. Hovering over the item will display an ellipsis icon in the upper-right. Clicking on this reveals the context menu.

Resizing Images

For this our upcoming article we want all our images to be 720 pixels (px) wide. This will reduce their file size so they download quickly, while maintaining a size and quality that will look great in our article. 

Important Note: Edits to images in the Media component are immediate and irreversible.  It is good practice to save a copy of images before editing. For this tutorial we recommend editing test images only, and not any actual content on your site.

1. If desired, download a copy of the image by selecting Download from the context menu.
2. Edit an image by selecting Edit from the context menu.
   • An editing window appears with three tabs: Crop, Resize, and Rotate. 
3. Select Resize and adjust the width to 720 px, then Save and Close.

Illustrations

Uploading Files

The Media component is used to manage different types of media, such as audio, video, PDF, spreadsheets, and more. For our tutorial we will upload a PDF file that will be used later on in an article. 

1. In the tree view click on files, then create a folder, e.g. Telescopes. 
2. Click on the new folder to display its contents (which will be empty).
3. Upload a PDF by either using the Upload button at the top of the page, or by dragging and dropping.
   • The file appears in the content area.
4. Rename the file to give it a friendly name, e.g. Telescopes and Light.
   1. Select Rename from the context menu and enter a new name.
5. Click on the file and select Preview from the context menu. 
   • The file opens in a pop-up frame.

Illustrations

The file and images are now uploaded to the website in an organized folder structure and readily available for use in articles and other content using the Media component, as we'll see in other tutorials. 

Concepts 

• The Media component provides a convenient and easy way to upload and organize images and files that are used in the website.
• Media is stored separately from articles on the website. 
• It can be invoked from within an article to easily add content (as will be demonstrated in other tutorials). 
• Images can be edited, but will be instantly and irreversibly altered. Images may be downloaded prior to editing. A comprehensive media strategy might include maintaining original images offsite and making edits prior to uploading.

Attribution

Images and files used in this tutorial are in the public domain and are available at the Wikimedia Commons website and the NASA public website.

• Napoleon II Telescope, University of Notre Dame with Warner & Swasey Equitorial Mount
• Newtonian Telescopes
• Telescope-122961
• Taking a Closer Look: Examining Light and Telescopes from For Educators: Educational Resources