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.
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.
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.
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.
Images should be less than 20 MB and need to be image files (for example, JPEG, PNG, SVG, and so on).
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:
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:
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.
To change the name of the image, input the new name in the overlay and click Save:
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.
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:
You can use the Tag list dropdown to filter by the tags you've added:
Start typing the tag for a quick find.
Or you can use both the name and the tag together:
