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:
headline 1 , Opens In New Window headline 2 , Opens In New Window
anchor , Opens In New Window

Introduction

Lorem ipsum

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.

CMS settings

some introduction text

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. grid-position">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. positioning">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 layout">jump to example

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:

  • Left (default)
  • Center
  • Right text-alignment-horizontal">jump to example
Text Alignment Vertical

Defines how the text is aligned vertically. Mandatory.

Available options:

  • Top (default)
  • Middle
  • Bottom text-alignment-vertical">jump to example
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. read-more-button-label">jump to example

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. floating">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. image-alignment">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. image-alignment-vertical">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 image-rendition">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.

tab: Links

tab: Spacing

Front-end examples

text

 

Example: Grid Position

Grid Position = 0

Grid Position = 1

Grid Position = 2

Grid Position = 3

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

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

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

Image Alignment = Left

Image Alignment = Center

Image Alignment = Right

Image Alignment = Stretch

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.

Editorial hint:

dksajlödfjks

asdfasdfa

Attention:

Make sure that all Section With Headline components are acutally placed within the In-page Navigation and that no Section With Headline is placed within another one.

Step by step

1

2

Related topics

Used recurring elements