TABLE OF CONTENTS

Summary

Image teasers are the heart of CMS pages in the shop, especially Homepages relies on a wide variety of image teasers to provide engaging content for a user.

Demo

A the demo shop the list of image teasers is available on the components list, check:

User guide

2.1.6. Image Teaser (2.0)

Magesuite standard

Basic configuration

There are some basic image teaser types:

Type	Admin screen	Demo link	Dev hint

Type	Admin screen	Demo link	Dev hint
Browser width / content width Content width means that a teaser is contained within page container ($page_max-width) and in window width mode teaser is as wide as	Open	Browser width - https://demo.magesuite.io/de/contentconstructor/components/index/page/itbrowserwidth/ Content width - https://demo.magesuite.io/de/contentconstructor/components/index/page/itcontentwidth/	browser width is called window-width in the code
Grid / slider If the grid options is selected, when there are more slides than defined amount of slides in a row, slides will be placed in another row, below the first row. When there is a slider selected, if there are more slides configured than slides per row, magesuite slider will be activated.	Open	Grid teasers - https://demo.magesuite.io/de/contentconstructor/components/index/page/itcontentwidth/ Slider teasers - https://demo.magesuite.io/de/contentconstructor/components/index/page/itcontentwidthslider/	Magesuite uses custom slider component located in theme-creativeshop/src/components/_slider
Layout on tablet/desktop (number of items per row) 1 in row 2 in row 3 in row 4 in row	Open	Check links above
Mobile layout teasers in column (one below another) slider grid with 2 items in row		Check links above
Text positioning over the image below the image		Check links above

Schemes

There are 2 content color schemes that can be defined separately for every teaser item by an admin editor: dark scheme and white scheme.

Content align

An admin editor can define 9 positions of content for every slide.

Optimizers

In order to make texts more readable on an image, it is possible to define some contrast optimizers. This feature is available only for teasers with texts over the image.

Open

Overaly

The overlay is placed on the entire image and below texts. Its intensity can be changed by an editor. For the dark scheme and light scheme, different colors of overlay are applied (can be defined per project).

Gradient shadow

By applying gradient part of an image (most often the part, where the text is placed) can be make darker/lighter in order to make text more readable;

Container

Light or dark (depending on an applied scheme) container with controlled transparency can be added below the content.

Text shadow

Light or dark text-shadow can be placed below each letter.

Mobile vs desktop

The quite often workflow for teasers is to set a separate component for mobile and a separate component for desktop/tablet. The main reason is image cropping - different images are needed for mobile to properly show the most important content. Sometimes there is a need to display different texts or just designs for mobile and desktop are so different, that it is not possible to set only one teaser (f.e. on mobile text is below the image, and on desktop text is over the image for the same section of a page. With Content Constructor separate components can be set for mobile and for desktop.

Slider scenarios

In Magesuite there are some built-in elements and behaviors that can help users to see that a given element is a slider and to interact with the slider component.

Navigation (arrows)

Arrows that can't be clicked at the moment can have opacity and can be greyed out or hidden. Navigation can be hidden on mobile and/or desktop.

Pagination

Pagination below a teaser informs the user about a number of slides and an active slide. Pagination can be hidden on mobile and/or desktop. Fraction pagination is by default shown where there are too many items. However, this behavior can be configured by a project.

Part of the next slide is visible

By default only a small part of the next slide is visible on mobile. However, the part of the next slide that is visible can be made larger.

Open

Desktop slider scenarios

Check below the possible behavior/configuration of the slider component on the desktop:

Slider content-width with next slides not visible (default)

Slider content-width with next slides visible

Slider browser-width

Slide without image

When there is no image uploaded for a slide text will be displayed with the corresponding background: light for dark scheme (dark texts) and dark for light scheme (light color texts).

Example:

Open

Magesuite customizations

To some extent, image teasers can be rather easily modified to achieve some custom effects. Below is a list of customizations that were introduced in child projects and have prepared documentation for developers.

Projects customizations