J4.x

How to use the new Media Manager/Working with Images

From Joomla! Documentation

< J4.x:How to use the new Media Manager

Introduction

The Media Manager in Joomla! 4 provides an easy to use interface for uploading and managing images.

You can set up folders to organise images, rename, edit and delete images.

Upload an Image

To upload a new image, click on the Upload button on the top left corner of the Media Manager.

J4x media manager upload-en.png

After clicking on the Upload button, a dialogue box will open for you to browse to and select the file you want to upload.

Select and open the file and it will be uploaded to the Media Manager.

Quick Tips
  • If your image is to be placed in a subdirectory, navigate to the correct directory before clicking on the Upload button

Rename Image

  1. Select and hover over the image in the Media Manager.
  2. Click on the 3 horizontal dots in the top right corner to display the available options. After that, hover over the icons and click on Rename item.
  3. When the Rename dialogue box opens, enter your new filename in the Name field and click on Save.
  4. The new name will be displayed in the Media Manager.
Screenshot

J4x media manager rename-en.png

Quick Tips
  • Folders can be renamed in the same way as images

Crop an Image

J4x media manager select edit image-en.png

Hover over the image in the Media Manager and then click on the 3 horizontal dots in the top right corner to display the available options.

Now hover over the icons and click Edit item.

When the Media: Edit panel opens, by default it will open on the Crop tab.

J4x media manager crop image-en.png

By default the Media Manager will set the Quality - it is recommended to leave the setting as it is.

The width and height of the existing image will be displayed.

The bottom drop-down list will be set to Default aspect ratio. This drop-down list provides a number of helpful pre-set ratios and an option of None that allows you to manually set the crop area.

J4x media manager crop ratios-en.png
Using the Pre-set Aspect Ratios

The pre-set aspect ratios offer a range of options for your images.

You can choose from landscape and portrait settings as well as a 1:1 option (square).

This is particularly useful for maintaining consistency across your website.

For example, you may decide you want to create a thumbnail image from each of your header images. Joomla makes this achievable without the need for a photo editor. You can upload a copy of your header image then use the 16:9 ratio to crop the image.

The aspect ratios are proportional so your crop section will maintain the aspect ratio if you resize the intended crop area.

Note: When you select an aspect ratio it will place a grid on your image. You can move this around and resize it.

Choose the None option is you want to manually set the crop area.

Defining the Crop Area

In this example we will create a thumbnail to include only the flower from an image.

In the Media Manager we have navigated to the folder we want to create the thumbnail in then uploaded the header image we want to crop.

J4x media manager define crop area-en.png

Set the aspect ratio to 16:9. This will place a grid on the image. Dependant on the image shape, the grid will be the height or the width of the image.

Hover over the grid and a cross hair icon will appear. This will allow you to move the grid to the area of the image you wish to crop. You will see these changes in the X and Y axis fields of the editor.

On the outer edges of the grid, at each corner and the middle of each edge you will see small squares (adjustment handles).

Use them to adjust the size of the grid. The corner handles proportionally enlarge or reduce the area. The ones in the middle of the top, right, bottom and left edges reduce the height or width of the grid. You will see these changes in the width and height fields of the editor.

Once the crop area is defined click Save&Close. All parts of the image outside the grid will be removed leaving only the cropped area we defined.

The cropped image will be saved into the Media Manager.

J4x media manager cropped image-en.png

Quick Tips
  • Make sure images you want to crop are placed in the folder you want them to be stored
  • Remember that a cropped image replaces the original when it is saved
  • Keep images sizes consistent when cropping. Use the the width / height fields in the editor
  • Specific folders for cropped images will make managing them easier, for example thumbnails

Resize an Image

As shown above, at the start of section Crop an Image, hover over the image you want to resize in the Media Manager and then click on the 3 horizontal dots in the top right corner to display the available options.

Now hover over the icons and click Edit item.

The Media: Edit panel will open.

Click on the Resize tab:

J4x media manager resize tab-en.png

On the Resize tab you will see the current dimensions of the image and it is here that you change the dimensions to resize the image. The unit of measurement is pixels (px). In the following screenshot the width has been changed to 500:

J4x media manager resize width-en.png

When the Media Manager resizes an image it is resized proportionally, maintaining its aspect ratio.

You can resize by height or width though it is more common to resize by width. In the Width field, change the value to the width you require. For this example we entered 500. Pressing enter on the keyboard or clicking into the height field automatically adjusts the image height proportionally.

Click on the Reset button to discard your changes if you want to change the size.

Click on the Save&Close button to resize the image.

Quick Tips
  • Whilst it can be done, you should avoid resizing an image to make it larger as it will reduce the quality of the image

Rotate an Image

As shown above, at the start of section Crop an Image, hover over the image you want to resize in the Media Manager and then click on the 3 horizontal dots in the top right corner to display the available options.

Now hover over the icons and click Edit item.

Click on the Rotate tab:

J4x media manager rotate tab-en.png

The Rotate panel allow you to rotate an image clockwise with pre-defined angles or by entering your own:

J4x media manager rotate image-en.png

4 rotate pre-defined angles are available via the Angle Buttons. In this example we choose 90 to rotate the image 90 degrees clockwise.

It is also possible to use an arbitrary angle by entering a value in the Angle Field.

Click on the Reset button to discard your changes if you want to use a different angle.

Click on the Save&Close button to save the rotated image.

Delete Image

The Media Manager provides two ways to delete an image.

The first method is to select the image and then click the Delete button in the Media Toolbar:

J4x media manager delete image top-en.png

The second method is to hover over an image and delete it via the image actions icons:

J4x media manager delete image-en.png

Hover over the image and click the 3 horizontal dots in the top right corner.

Click the trash bin icon to delete the image.

Quick Tips

  • These methods can also be used to delete folders