Services

Image with text component engages your reader

Learn about media placements and default and adaptive settings.

Image with text component

The Image with text component presents a specific content in an engaging way. The component has two Media (image) placements:

Media on the right, or
Media on the left, both including either
a Default or an Adaptive setting.

See below for examples of how the image and long text behave with the different settings.

It is recommended to use both placements if you use this component several times on the same page.

Three students sitting next to a wooden table, and studying. Two of them have laptops in front of them. Photo: Unto Rautio — Image with text component with Media placement: Default image on the right

Title

This is the Image with text component with Media placement: Default image on the right. This setting will maintain the original image ratio, irrespective of the length of the text next to it. Longer text will wrap under the image.

This component can include the basic formatting as available in the tool bar.

The text below is in Latin and its purpose is to illustrate what this component looks like with a longer text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Title

This is the Image with text component with Media placement: Adaptive image on the right. The adaptive setting will stretch the image in relation to the text next to it. Longer text will not wrap under the image. This setting is recommended to be used for decorative images, that don't have a real focal point.

This component can include the basic formatting as available in the tool bar.

The text below is in Latin and its purpose is to illustrate what this component looks like with a longer text.

Title

This is the Image with text component with Media placement: Default image on the left. This setting will maintain the original image ratio, irrespective of the length of the text next to it. Longer text will not wrap under the image.

This component can include the basic formatting as available in the tool bar.

The text below is in Latin and its purpose is to illustrate what this component looks like with a longer text.

Title

This is the Image with text component with Media placement: Adaptive image on the left. The adaptive setting will stretch the image in relation to the text next to it. Longer text will not wrap under the image. This setting is recommended to be used for decorative images, that don't have a real focal point.

This component can include the basic formatting as available in the tool bar.

The text below is in Latin and its purpose is to illustrate what this component looks like with a longer text.

Components: how to create content for aalto.fi?

Get to know the aalto.fi components for creating versatility and visuality when delivering your content.

Single liftup

Single liftup is a great way to highlight an important aalto.fi source of information. Learn how!

On the right edge a person with shoulder-length hair is moving out of the picture; behind them is a black background with narrow light strings horizontally on it.

Advanced tips on using images

Using images is a big part of content creating at aalto.fi. In this blog post, we’ll go more into depth regarding what kind of images to use for your content, how to modify the images so that they look good on any device and what to avoid when choosing an image for your page.

People sitting in round holes in walls. Photo by Unto Rautio / Aalto University.

Image aspect ratio at aalto.fi

The new aalto.fi communications platform images feature different aspect ratios that allow the design to scale from small to big screens. Let’s learn how to control the image cropping and make sure that the images look good at any level of the platform.

Aspect Ratio Graphic with Aspect Ratio reading within a circle. The rectangle graph is in varying shades of red.

All Drupal instructions

This service is provided by:

Communications Services

Did you find what you were looking for? If not, please contact us.

Published: 31.10.2019
Updated: 15.12.2023

Image with text component engages your reader