Using media

You can use Media to upload images to be used within your Frontend component when you edit your pages. These images will then be optimized and scaled by our CDN before being displayed to your customers.

Information icon

Any images you've attached in your backend, such as commercetools, will automatically be added, so you don't need to add them to the studio.

Click Media on the dashboard to open the media area.

40a6118 Click media on the dashboard

You can see all the previously uploaded images when you open the library. You can search for the names of the images, edit the information, delete an image, or add new images.

c601217 Media area in the studio

Adding an image

To add an image to the library, click the Add media button on the top right of your screen and select the image you want to upload or drag the image into the browser.

f8752bb Click add media in the media area in the studio

Information icon

Images should be less than 20 MB and need to be image files (for example, JPEG, PNG, SVG, and so on).

Error icon

Videos can't be uploaded to the media library. You can upload GIFs, but these will only display as images if you add them to a component.

Deleting an image

There are 2 ways to delete an image from the library. You can either click on the image you want to delete then click Delete on the overlay:

7992de3 Click on an image then click delete on the overlay

Or you can select the tick box on the left of an image (or more than one) and click the Delete button in the top right of the screen:

9dcf0f6 Select the tickbox next to the image then click delete

Editing image information

You can change some of the information attached to an image after you've uploaded it, like the name of the image, and you can add tags to make it easier to search for. Click on the image you want to edit the details on, and an overlay will open.

To add tags, input the tag you want to add by typing the word and pressing enter (or return) on your keyboard. Once you're done, click the Save button.

fc7fc7f Edit the tags of a media item

To change the name of the image, input the new name in the overlay and click Save:

bd4802d Edit the name of a media item

To see which components the image is being used on, expand the Image usage section. Then you can see all the pages where that image is used. If you click on the page name, you'll be taken to the page builder to the component where it's used.

a840370 Image usage section

Error icon

Your image can be used in project settings or on page folders but they won't show in this list.

Searching images

If you click on the search bar, you can search for images by their name:

0a23ead Searching for name of image

You can use the Tag list dropdown to filter by the tags you've added:

fb01a6a Search using the tag list

Information icon

Start typing the tag for a quick find.

Or you can use both the name and the tag together:

6682848 Using both search and tag list