Text With Image component

add text and image content

  • multiple image display settings
  • multiple text display settings

The Text With Image component is the main component to add images or textual content to a page. It provides a wide variety of image and text display settings.  

on this page:
Component settings , Opens In New Window Front-end examples , Opens In New Window
Step by step , Opens In New Window Grid Position , Opens In New Window
Layout , Opens In New Window Positioning (text/image) , Opens In New Window

Introduction

The Text With Image component is the main component to add textual content and/or single images to a page. It is possible to set the image and text position (left /right), predefined image widths, a (virtual) grid position and multiple other text and image alignments and rendering options.

Glossary:

Example:

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Component settings

The Text With Image component is highly configurable, but for a standard use, all fields are pre-set with a default value that should fit most use cases. Simply fill in text and image and define the positioning and layout.

tab: General
Theme Common Theme element to add a background color to the component. Mandatory.
Grid position

Defines in which main content grid position the component should start from.

Available options:

  • 0 = left edge of main content width
  • 1 (default)
  • 2
  • 3

The main content width is divided by a grid into vertical columns and indents the component by the stated position. So with a grid position of 1 the component is not positioned on the very left side but indented by 1 grid column. Mandatory. jump to example
Positioning Defines if the text part or the image should be displayed first (either left of or on top of, depending on the set Layout).
Mandatory. jump to example
Layout

Defines the width of the text part and the image in relation to each other. Mandatory.

Available options:

  • 100% (full width), default
  • 10% image, 90% text
  • 20% image, 80% text
  • 30% image, 70% text
  • 40% image, 60% text
  • 50% image, 50% text
  • 60% image, 40% text
  • 70% image, 30% text
  • 80% image, 20% text
  • 90% image, 10% text jump to example

Example: Grid position

Grid position = 0

Grid position = 1

Grid position = 2

Grid position = 3

Editorial hint:

Grid position  

It is recommended to use the grid position in a stringent way, meaning to define a standard position (e.g. =1) and then create all of the Text With Images accordingly. This provides a stringent user experience as text parts are then also recognizable by their identical layout.

Attention:

Grid position behaviour in Columns component

Please note that the grid position is not functioning if the Text With Image is used in a Columns component.

Example: Positioning

Image first (with layout 50% image, 50% text)

Image first (with layout 100%)

Text first (with layout 50% image, 50% text)

Text first (with layout 100%)

Example: Layout

Layout = 10% image, 90% text

Layout = 20% image, 80% text

Layout = 30% image, 70% text

Layout = 40% image, 60% text

Layout = 50% image, 50% text

Layout = 60% image, 40% text

Layout = 70% image, 30% text

Layout = 80% image, 20% text

Layout = 90% image, 10% text

Layout = 100% (full width), image first

tab: Text
Rich Text Editor Common RTE element to add textual content. Optional.
Text Alignment Horizontal

Defines how the text is aligned horizontally. Mandatory.

Available options:
Text Alignment Vertical

Defines how the text is aligned vertically. Mandatory.

Available options:
Read More Button Label Defines the text of the read more button in the mobile version of the page. If filled in, only a small part of the Text With Image text is displayed and the button offers to show the entire text. On a click on the button, the hidden text appears. Optional. jump to example

Example: Text alignment horizontal

Text Alignment Horizontal
= Left

Text Alignment Horizontal
= Center

Text Alignment Horizontal
= Right

Example: Text alignment vertical

Text alignment vertical
= Left

Text alignment vertical
= Middle

Text alignment vertical
= Middle

Example: Read More Button Label

under
construction

tab: Image

tab: Image properties
Image alt Defines the image's alternative text.
Floating Defines if the textblock floats around the image / surrounds it. Optional. jump to example
Image alignment

Defines the horizontal alignment of the image within its column. Mandatory.

Available setting:

  • Left (default)
  • Center
  • Right
  • Stretch

This setting only applies if the image is less wide than the available width of its column. In the example below, the image width is 120px but the available column width is 342px. Therefore, the image gets aligned accordingly. The setting Stretch stretches the smaller image to the available column width.jump to example
Image alignment Vertical

Defines the vertical alignment of the textblock. Mandatory.

Available settings:

  • Top (default)
  • Middle
  • Bottom

This setting only applies if the text column is higher than the image height. In the example below, the image height is 97px but the available column height is 338px. Therefore, the image gets aligned accordingly. jump to example
Image rendition

Defines the width of the image. It is a set of predefined widths in order to scale down the image width. Mandatory.

Available widths:

  • W85
  • W120
  • W210
  • W280
  • W360
  • W450
  • W570
  • W770
  • W950 (default)

W = width, numbers = in pixels jump to example
Image annotation text

Defines small annotation text, that is displayed underneath the image (e.g. "copyright .."). Optional.
Download image link label

Defines a link label to offer the image for download. Optional. If not set, no link is displayed.
Show download image sizing

Defines if the image size is displayed next to the Download Image Link. Optional. It is only displayed if the Download Image Link Label is set.

Example: Floating

Floating = checked

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum.

Floating = unchecked

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
rebum.

Example: Image alignment vertical

Image Alignment Vertical = Top

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Image Alignment Vertical = Middle

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Image Alignment Vertical = Bottom

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Example: Image alignment

Image alignment = Left

Image alignment = Center

Image alignment = Right

Image alignment = Stretch

tab: Links

tab: Spacing

Front-end examples

Used as text only

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Used as image only

Used in a Columns component

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

With links

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

2 components combined without spacing

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Step by step

1

2

3

Related topics

Used recurring elements