Skip to main content

4 min 54 sec — Images

​
What you will do

Replace an existing image, update a background image, and add a Media block with the right display settings.

​
Replacing an image

​
Adding a new image

In a column, select Add block and choose Media, then select an image from Uploads.Use the Media block controls to adjust how the image appears:
  • Alignment — left, centre, or right within its column.
  • Maximum width — choose a preset or enter a custom value such as 1000px. This is a limit, not a fixed width: the image can still shrink to fit its column on smaller screens.
  • Border radius — rounded corners on the image.
Use a source image large enough for the space it fills, or it may look blurry. An image’s description in Uploads is used as its alt text, so write a concise description for people who cannot see the image.
This transcript has been lightly edited for current inploi product terminology and readability.

​
0:00

This lesson covers replacing images in Studio. Select an image directly to change it, even when it is inside another block. For a background image, select the section and use its background image setting.

​
0:30

Select the replacement from Uploads. The picker opens in the current file’s folder; use the breadcrumbs to browse to another folder.

​
1:00

Select Crop to trim the image. You can choose an aspect ratio to keep repeated images, such as cards, consistent.

​
1:30

Adjust the crop to keep the important part of the image. Set a focal point to choose the area prioritised when the image is displayed.

​
2:00

The same replacement and crop controls apply wherever the image appears, including cards.

​
2:30

To add an image, add a Media block inside a column and choose a file from Uploads.

​
3:00

The Media block includes alignment controls, so you can place the image to the left, centre, or right of its column.

​
3:30

Set a maximum width with a preset or a custom value. It limits the image’s width without preventing it from becoming smaller on narrow screens.

​
4:00

You can also apply a border radius to round the image corners.

​
4:30

Finally, check the image’s description in Uploads. Studio uses it as alt text, so make it clear and useful for people using assistive technology.
Next up: Revert, save, and publish.