2.1.20. Mosaic

Owned by Karol Schönsee
Last updated: Mar 15, 2022 by Paweł Tylek
4 min read

With the help of the brand-new Mosaic CMS component there is a new and easy way to add asymmetric image teasers to your storefront. This CMS component provides the same configuration possibilities as the Image teaser and the Teaser and text component. You can use the admin panel to adjust the proportions of the images with ease.

The use of this component could look like this:

 

 

Before setting up a new Mosaic component you must first choose the TEASER WIDTH from one of the following options:

 

·       CONTENT WIDTH: The Mosaic area is limited by the container width.

·       BROWSER WIDTH: The Mosaic area does exceed the container and is limited by the window width.

 

Then you may choose the images PROPORTIONS. Selecting the first option allows the left image to take up more screen space than the right image (2/3 to 1/3 ratio). The second option increases the right images’ screen space instead (1/3 to 2/3 ratio).

 

 

The contrast optimizer contains following options:

 

 

Content tab

·       A slogan which can be displayed on teaser

·       A text description on teaser

·       A call-to-action (“CTA”) button including a link on teaser

·       An interactive content align option

 

Style tab

·       A contrast optimizer with different options

·       A text color scheme to adjust font color

 

In the CONTENT area you can now add and configure your images by clicking the “+” icon. Here following settings can be made:

 

  1. In the image upload area you can insert an image using the Magento 2 media explorer. [1] If you already have an image, you can remove it using the “bin” icon. By clicking “change” you can change an existing image. Regardless whether you have chosen an image or not there always will be shown a live preview with your slogan and description. There is also a possibility to add video - more 2.16. Video Teasers.

  2. In the CONTENT ALIGN area you are able to control the text appearance on the image teaser. Just click on the desired position field where the text should be shown.

  3. Enter the SLOGAN text which will be the most prominent text element on the image teaser (depending on the styling). Additionally it is possible to insert dynamic content in this text and any other text field component, e.g. HEADLINE and DESCRIPTION using Content Constructor Directives. By adding directives it will display your products’ price or a products’ discount percentage to your desired text field.

    1. Fetching a products’ price can be done with this directive:
      {{price sku=”your_product_sku” withCurrency=”true”}}
      When choosing “false” as your parameter there is no currency sign displayed.

    2. If you wish to display a discount percentage of a certain product use following directive:
      {{discountPercentage sku=”your_product_sku”}}

    3. However only an integer value will be shown.

  4. Enter the DESCRIPTION text which will be the text element located underneath the slogan on the image teaser (depending on the styling). Also Constructor Directives can be used here.

  5. Enter a CTA LABEL text in case you want to include a CTA button on the image teaser.

  6. Enter a URL in the CTA TARGET LINK input in case you want to add a link to the CTA button (also the Magento 2 widget types CMS Page Link, Catalog Category Link, Category Product Link, File URL are supported).


In the STYLE tab you can make adjustments to the contrast of the text (only adjustable when text positioning is not below image)

  1. CONTRAST OPTIMIZER.

    1. Overlay: If you have chosen your text style to appear as ‘light’ then the intensity slider darkens the entire image depending on the slider’s position and vice versa when text style is set to ‘dark’.

    2. Gradient shadow: Similar to the ‘overlay’ option you can adjust the gradient shadow’s intensity with its slider. You can determine the gradient shadow’s direction by clicking the adjustment field next to it.

    3. Container: The Container option provides a frame behind the text. Depending on the chosen ‘text style’ and the intensity slider the frame appears in black or white.

    4. Text shadow: If Text Shadow is selected then a shadow is cast around the text. The slider controls the brightness of the shadows.

  2. The INTENSITY SLIDER is located directly below. It controls the intensity of the adjustments mentioned above. Ranging from 0 to 100 where the higher the number the more intensive the color gradient.

  3. On the right-hand side you can set DIRECTION. Click on one of the boxes to specify where the ‘Gradient shadow’ fade starts. (It is only available for ‘Gradient shadow’)

  4. TEXT STYLE option controls the coloring of the font appearing on the Image teaser. You have a choice between “LIGHT” and “DARK”. Light colors the slogan and description in bright text while dark results in black lettering.

  5. MIRROR IMAGE can be toggled on or off. This feature gives the possibility to flip your image horizontally.

 

Click on SAVE when your settings have been made.



[1] It is recommended to use JPG and PNG (RGB format) file types for images