Adding images, ALT text, changing cropping and focal points

Because of the component-based design of aalto.fi, all images uploaded to the site can be used in many different components and sizes. They are used as main images, liftup images, gallery images, etc. The maximum image size of an image is 10 MB, but keep the image size as small as possible without negatively affecting the resolution. Normally a maximum of 1 MB is sufficient for an image.

Only photos and images owned by Aalto University are to be used on the website. Do not use images from external image banks.

Main image

Main image will be shown as the main picture on a page, regardless of the content type (hub, article, news, events, etc.). The main image will also be displayed in liftups. Always use a horizontal image as the main image.

You can add a main image to a page after the basic information fields have been filled.

1. Click on “Main image” to add the image. You can set the display style of the main image to “default”, “medium no-crop” or “hide”. If you choose to hide the main image, it will not be visible on the actual page but will still be used for liftups used in other pages.
2. Select the image and upload the new picture using the "Upload" tab. Alternatively, you can click on "Select file" or drag & drop your picture to the grey area "Drop files here to upload them":

When adding a new image, fill in the following fields:

Name

Give an informative and descriptive name to the image and tell who took the picture, e.g., Interior of Ekonominaukio 1, Aalto University School of Business main building / John Smith. The name will be visible in the editing view.

• Note: The school name abbreviations are not to be used on the aalto.fi site.

Image

The image you just uploaded.

Alternative text (alt text)

This is one of the most important fields when adding a new image. Alternative text ensures accessibility, as it is used by screen readers and search engines, as well as being displayed if the image cannot be loaded. When writing the alt text, never just state what is in the picture. You need to keep in mind what is the purpose of the image in relation to other content on the page. Someone with a visual impairment should be able to understand the image based on the alt text.

Good alternative text:

Interior of the main building of the School of Business. People are walking down a staircase and some are seated at tables.

• detailed description tells what's happening in the picture

Poor alternative text:

School of Business main building

• general description doesn't tell what's happening in the picture

Caption

Adding a caption for the image is optional, but always give photo credits when available. You can use the same format as in the "alternative text" field described above (e.g., “Interior of the main building of the School of Business - photo by Aalto University, John Smith”)

Save

After filling in the fields, remember to click on "Save”.

You can check how the focal point affects the cropping of your image for different components by using the Images preview mode, which you can find below the image in Edit mode (see the image below). 

The different previews are named as "2.3_1380w_600h_n", where 2.3 represents the ratio between image width and height (width = 2.3 * height). This number is followed by the pixel sizes for the width and height (1380 pixels wide and 600 pixels high). A few image previews are named after the specific component that they will be used for, such as "small liftup".

Other pictures

Note that if you use images of diagrams or charts, the content must also be available in written text.

In addition to a main image, you can add pictures to your page by using the following content components:

• Quote (when adding a quote with a picture)
• Image with text (when adding text with a picture)
• Single image (adding a single image in size M, L or XL)
• Gallery (multiple images in one component including captions)
• Slider (when showcasing short texts with pictures)

See how these components lookAll of the above mentioned components can be hidden in the chosen language version(s). Just untick the "Show this component in this language" box.