Article components – part 2

Images are an important part of any site. They make the site more visual, help keeping the readers interested, and they can provide additional information. On the new communications platform, there are two image type components – Single image and Image with text – and a gallery of images.

Single image

The Single image component is the basic component for images.

Currently, there are three size options in this component:

• Medium: displays your image within a fixed grey box, without any cropping.
• Large: displays your image as wider than the text, to a maximum width of 1380px. The height is fixed, meaning that some cropping might occur.
• Extra large: displays your image at full width! Use this option only for high-quality and high-resolution images! Also, because of its fixed height, some cropping might occur.

Below, you can find examples of these in the same order.

In time, there will be an additional small-sized single image, which will be optimal for vertical images, such as posters and infographics.

Image with text

The Image with text component is used to present an image with some text right next to it.

The editing platform gives you the option to choose whether the image is to the right or left of text. We suggest alternating between these, when using this component several times within the same space.

The current version expands the image according to the length of text next to it. In the future, there will be a version which always fits the image next to the text without cropping it, which enables adding infographics in the Image with text components.

Gallery

A gallery is a set of grouped images. The gallery can include a title and a description, and the number of images required. Each image can also have a short caption. This component has one display mode, only. The images are always organised in four columns.

Adding images – what you need to remember:

1. Name the image. In the name field, write the name of the image and the photographer in this format: Aalto University / name of the photographer
2. Write an ALT text for the image! Aalto University / picture description / photographer: name of the photographer, for example like this: Aalto University / students at Aalto University / photographer: John Smith. This is very important, because this text is used by screen readers, search engines or when the image cannot be loaded.
3. Add a caption, if wanted.
4. Remember to choose the preferred image size.

Remember with the Image with text components to choose the media placement (image on the left or on the right)

Stay tuned! There’s much more to follow.