M-T.PRO content manager: # sign. Photo slider for embedding photo galleries into page text

What this solution does

M-T.PRO module for content managers: hash sign #. Photo slider for embedding galleries within page text.

High-quality text formatting is essential not only for modern website design but also for SEO optimization. It is often necessary to alternate text blocks with multiple photos on a single page.

This module offers a simple solution that streamlines the workflow for content managers and SEO specialists.

Ease of use: The photo slider is integrated with the information block, allowing multiple photos to be added at once. This eliminates the need to create numerous separate elements for a single slider.

Flexible placement: Each information block element functions as an independent slider. It can be used in product cards, news items, section descriptions, or on static pages.

The module includes three built-in slider templates: two carousel options and one with thumbnails. Users can create custom templates to customize the appearance. An accordion template is planned for future release.

Slider width is adjustable in percentages via Infoblock properties, with a default value of 100%. Templates 1 and 3 feature a lightbox function with a magnifying glass icon, allowing users to enlarge images on click.

The component supports SEO optimization by automatically adding Alt and Title attributes to images. Its styles are isolated and do not conflict with the site's design, ensuring correct and aesthetic rendering of all elements.

The M-T.PRO module enables the creation of photo sliders for insertion into page text. Image titles and descriptions are displayed dynamically from the Media Library; changes to Title or Alt fields in the library automatically update the site content. Users can configure the text color, navigation arrow color, and background color behind the text. The background supports transparency to match the site design. In carousel templates (Slider 1 and Slider 2), the caption block is fixed at the bottom of the slide. Upon installation, Slider 1 is active by default with standard colors: text and arrows #429AD5A6, background #FFFD74. New slider elements are automatically added to the visual editor's snippet list, which may require a list refresh. Slider parameters, including the template, are adjusted via the element in the editor; changes apply to all pages using that specific slider.

Deleting the module does not remove the information block, allowing you to reuse the data later. The component operates without jQuery, minimizing potential layout conflicts. Sliders support cyclic navigation; automatic sliding is disabled to avoid user irritation. When the 'fit to height' setting is active, the height of sliders 1 and 2 remains constant during navigation. Image titles and descriptions are displayed when viewing photos in the lightbox. The module simplifies image management and enhances site functionality.

To place text and photo sliders, follow these steps: create a section structure in the Media Library to group images, immediately set image titles and descriptions, and then add an element to the information block created by the module.

The M-T.PRO module enables content managers to embed photo sliders directly into page text. Images are added to the module element from the Media Library. Configuration options include slider width as a percentage of the page width, color, and slider template type. Default values are configured in the infoblock settings.

After saving, snippets become available in the visual editor. They can be inserted on any site page, whether static or dynamic, either through the visual editor interface or manually using the code #MTPS_77_2343#, where the numbers correspond to the infoblock and element IDs.

It is recommended to clear the cache after making changes. To maintain visual consistency, mixing horizontal and vertical images in a single slider is not advised; a specific setting is available to handle this.

General iT can install and configure this module and check how it works on your website.