🖼 Images and logos

The main elements to be configured on the platform homepage can be found in the tabs "Appearance" and "Home page"of the Settings.

The formats

The exact dimensions of the images depends on the size of your screen.

The platform constantly adapts the image to the screen size, always keeping the centre of the image as a reference point. Therefore, it is advisable to choose large-format, relatively square images (e.g. 800x800 px, with the essential elements in the centre rather than at the edges of the photo).

To ensure that the images will always be optimally displayed, we therefore recommend that you follow the formats and ratios shown in the table below.

The welcome banner

To add a welcome banner, go to the Settings tab and then to the Home Page sub-tab (for more information, click here). Click the"Pencil" icon in the block named"Main Image (hero)". Here you will be able to: 

• Change your welcome text: This is the text that appears above the image. In the example below: "Welcome to the Decidim demo platform".
• Upload or delete a welcome image: This is the main banner, in the recommended format of 1920 x 666 pixels.

Warning: We recommend using a plain photo or banner without text for this image, as the image is cropped. If you wish to use text, use the "Welcome text" field instead.

In desktop version

In mobile version

The highlighted content banner

The highlighted content banner can be activated and configured in the Settings tab, under " Appearance" (for more information, click here). To activate it, click on "Display the highlighted content banner" in the dedicated section, and fill in the different fields. 

The recommended aspect ratio for this image is 1600 × 308 pixels, which is a 5:1 aspect ratio. The image is then resized. Its height also depends on the length of the configured text and completed fields.

To make this block appear on the Home Page, go to the Home Page tab and skip to the "Featured Content Banner" block in the active content blocks. For more information on the Home Page tab, click here.

The header picture 

This image is set in the "Information" tab of each Process, assembly, etc. Once imported, the height of the image depends on the length of the title and subtitle of the space. For this image, we do not recommend putting text, and advise you to put important information and visuals to the left of the image. The transparent grey areas indicate the portion of the image that appears on the screen depending on the terminal used.

Indeed, a colour layer and the space stages map are present on the right of the header. The layer retrieves the primary colour of the platform, which you can change in the Appearance tab. For more information, click here.

The homepage image

This image is set up in the "Information" tab of each Process, assembly, etc.. This image will be displayed in several places on the platform: 

• as a thumbnail on the home page: the height is fixed at 128 px, but the width varies up to a maximum of 400 px.
• in large-format for a process highlighted within the list of participatory processes:
  • adapts its height according to the process description text (up to 614 px on a 13" screen) and its width according to the screen size (576 px on a 13" screen).
  • in the tablet format, the image adjusts horizontally to 750 x 240 px.

As you can see in the image below, this image indeed appears in different configurations of space cards.