Picking Images

Image pickers come in a few varieties. One of the most common ones is the standalone image picker component. For example, the ‘Logo' picker within ‘Menu and Navigation':

Another image picker exists within list items, such as the Price List module:

Image of logo, within Menu and Navigation

As you can see, their design matches closely, as does their functionality. Thus, even with components being in different places, we will always strive to keep them recognisable and all functionality the same.

Changing an image

When you click anywhere on the image (not just the circular icon in the lower right), the image gallery overlay opens, allowing you to select a new image. This is what the image gallery overlay looks like:

Image of the image library overlay

If you had already selected an image previously, this image will be highlighted with a pink outline. If not, then clicking any image will add the pink outline, marking it as selected for insertion. When you select the ‘Insert'-button, the image you selected replaces the one that was shown in the component before.

Tip

Just selecting a new image does not save your change. You still have to select one of the save buttons at the bottom of the page. This will make the new image show up in your preview site.

Uploading a new image

From within the image library overlay, you may also upload images directly. To do this, you need to select the ‘add' button:

Image of the add button within the image gallery overlay

This will open a file browser (which will be different for every operating system / device), where you may select an image up to 2MB big. We support .JPG, .SVG, .GIF and .PNG images. Any image above 512kb will be compressed, to ensure your website stays fast for your visitors.

Cropping an image

Image of crop insert

If you want to define a new crop for an image, you may select ‘crop insert', to define an area of the image to use within your module.

Image of crop screen

Alt text

Image of the alt text field for the image picker

Most images need to have a so-called "alt text", which is a text-only placeholder, shown when an image does not load, or read out loud by screen readers. This means it is essential for accessibility.