Image teasers

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.

 

Image teaser inside elements (images with some content on it, or below) are referred as items or slides, even if magesuite slider is actually not activated and teaser is displayed as a grid.

There are many possibilities to configure teasers based on combined options below. However a small amount of scenario is not available, as there are some technical restrictions or a given scenario has some visual problems. All possible scenarios are listed on the components list (https://demo.magesuite.io/contentconstructor/components/index)

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

 

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.

 

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

 

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.

Namde

Screen

Info

Namde

Screen

Info

Dark scheme

 

  • dark slogan

  • dark description

  • button type (can be primary button, but also secondary or a custom type button)

Light scheme

 

  • light slogan

  • light description

  • button type (can be primary button, but also secondary or a custom type button)

 

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.

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.

 

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:

 

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.

Functionality

Screens

Comment / Dev hint

Functionality

Screens

Comment / Dev hint

An admin editor can choose custom background, slogan color or text color for a slide

 

Frontend Customizations - examples | Background for image teaser slide

Possibility of special styling for a teaser.

On the frontend it is possible to prepare custom styling for some image teasers. The simplest modifications are:

  • decrease or remove bottom space below given teaser

  • remove spacing between slides in a teaser (this styling can be also introduced as a general rule)

  • change font size/color of texts

  • make images scaled on hover

In order to learn if more advanced customizations are possible, consult frontend developer.

 

Frontend Customizations - examples | Add a special variant for image teaser

 

 

 

 

 

 

 

 

 

 

Projects customizations

URL

Mobile

Desktop

URL

Mobile

Desktop

https://megaport.de/

 

 

https://www.haar-shop.ch/en/

 

 

https://haka.com/

Slider, text below the image, part of second slide visible.

Content width, slider 2-in-row, with part of third slide visible, text below the image.

https://www.nkd.com/de_de/?forced=1

Mobile - grid 2-in-row

2-in-row, content width.

 

 

Teaser 1-in-row

Teaser 3-in-row

 

 

Â