2.1.14. CMS Pages Teaser

Owned by Karol Schönsee
Last updated: Mar 10, 2022
3 min read

The CMS Page Teaser component does allow including a grid of CMS pages’ image teaser on another CMS page. This approach does help creating a structure for CMS pages which is especially useful for blogs, how-to guides, FAQs etc. The CMS Pages Teaser component does include Image Teasers of a given CMS page which contain following elements:

 

·       CMS Page Image Teaser (set in the Image Teaser area of a given CMS page, see section CMS Page Image Teaser)

·       CMS Page title (set in the very top area when editing / creating a CMS page)

 

In order to actually display image teasers of CMS in this component it is necessary to firstly upload an image teaser of the given CMS page to be displayed (see section CMS Page Image Teaser). Also it is useful to work with CMS Pages tags (see section CMS Page Tagging).

 

When setting up the CMS Pages Teaser component you firstly need to define which CMS pages’ image teasers to display. This can be done either using CMS TAGS that need to be set on the actual CMS page to be included in this component. Please see section CMS Page Tagging how to achieve this. When the CMS pages tags have been selected in this multi-select field, all CMS pages with the given tag will be included in this component.

 

Alternatively, you can work with CMS PAGES IDS that can be read in the CMS pages grid overview (CONTENT / ELEMENTS / PAGES). The CMS page IDs can be entered comma separated. However, providing a list of comma separated IDs will result in ignoring any CMS tags (if specified). Only pages with specified IDs will be displayed in exactly the same order as they are provided in the field.

 

Next you can select the TEASER LIMIT from following options:

 

·       4 Teasers: Only 4 CMS Page Image Teaser will be included in this component. Further CMS pages, if specified by CMS tags or page IDs, will be ignored.

·       8 Teasers: Only 8 CMS Page Image Teaser will be included in this component. Further CMS pages, if specified by CMS tags or page IDs, will be ignored.

·       16 Teasers: Only 16 CMS Page Image Teaser will be included in this component. Further CMS pages, if specified by CMS tags or page IDs, will be ignored.

·       All available teasers: All CMS Page Image Teaser will be included in this component.

 

Further you can select the DISPLAY VARIANT, which controls the text location on the image teaser. Depending on the styling of the Magento 2 instance, the options are

 

·       Text vertically centered on the left

·       Text on the bottom, left corner

·       Text vertically centered in the middle

·       Text on the bottom – centered

 

In the last step you need to define the layouts for specific devices.[1]

 

On the DESKTOP LAYOUT you can choose:

 

·       2 IN ROW: Two CMS Image Teasers per row will be displayed on desktop devices. The amount of rows does depend on the amount of CMS Pages Teasers to be included in this component.

·       4 IN ROW: Four CMS Image Teasers per row will be displayed on desktop devices. The amount of rows does depend on the amount of CMS Pages Teasers to be included in this component.

 

On the MOBILE LAYOUT you can choose:

 

·       SLIDER: One CMS page image teaser will be displayed. Further CMS page image teaser will be accessed using the slider functionality.

·       GRID: Two CMS page image teaser will be displayed per row. The amount of rows does depend on the amount of CMS page image teasers to be included in this component.

 

 

 

 

When the settings have been made, click SAVE.

 

 

 



[1] [1] The breakpoints for the devices are: mobile up to 767px, tablet 768 - 1023px, desktop 1024px