Skip to main content

How to use the Image component in Strapi

If you want to create a kind of collage of images on your homepage or landing page, the Image Component is a good option.   It is possible...

Updated over a week ago

If you want to create a kind of collage of images on your homepage or landing page, the Image Component is a good option.

It is possible to place images on a 3x3 grid for Desktop view (see image 1)

component image 1.png

It is possible to add a Call to Action in the form of text or a button per image.

The component can be seen in Strapi in image 2.

component image 2.png

Images: Add the images here (image properties)

Per image property it is possible to choose to show a background color, rounded or angular corners and blending.

Image layout: You can choose per image how you want to show the image.

Image fit:

Cover: image shows outside the frames when zooming in or out and

Contain: image remains neatly outside the frames.

Image focal point: you can focus on a specific part of your image

Link:

Here you can add a call to action for your image

Link alignment: where do you want to show the Call to Action

Theme: Which theme do you give the image

Width: How does the image fit in the grid. (1 third / 2 thirds or full width) If you choose 1 third, the next image will automatically appear next to it if it is 1 or two thirds.

Show as Button: Call to action button or text

Button theme: Which theme for the Call to action.

Did this answer your question?