M-T.PRO контент-менеджеру: знак #. Слайдер фотографий для размещения фотогалерей в текст страниц

M-T.PRO контент-менеджеру: знак #. Слайдер фотографий для размещения фотогалерей в текст страниц

Требование красивого оформления текста - это не только требование для современных сайтов, но и для SEO.

Также очень часто на одной и той же странице возникает необходимость добавить несколько красивых фотографий после текстового блока, продолжить текст, опять фотографии и так далее.

Мы предлагаем простое и очень удобное решение этого вопроса, крайне упрощающего жизнь контент-менеджерам и SEO-специалистам.

1. Удобство работы: Слайдер фотографий интегрирован с Инфоблоком, позволяя добавлять сразу несколько фотографий. Это существенно упрощает процесс, поскольку вам больше не нужно создавать множество отдельных элементов для одного слайдера. Всё организовано просто и удобно.

2. Гибкость размещения: Каждый элемент Инфоблока является самостоятельным слайдером, который можно использовать в различных частях сайта: в товарах, новостях, описаниях разделов или на статичных страницах. Это обеспечивает большую гибкость в адаптации контента.

3. Шаблоны и кастомизация: В стандартной комплектации идут три встроенных шаблона, но у вас есть возможность добавления собственных, что позволяет сделать слайдер уникальным и соответствующим вашим требованиям.

4. SEO-дружелюбие: Мы позаботились о SEO, добавив теги Alt и Title, что упрощает индексацию изображений поисковыми системами.

5. Стили: Слайдер не конфликтует с вашими стилями, что гарантирует безупречную интеграцию в общий дизайн сайта. Все элементы будут отображаться корректно и эстетично.

6. Выбор шаблонов: Встроено три шаблона слайдеров: две карусели и один с миниатюрами. Кроме того, планируется добавление шаблона «аккордеон», что расширяет возможности выбора.

7. Настройки ширины: Ширина области слайдера задается в процентах, по умолчанию — 100%. Это значение можно изменить в настройках свойств Инфоблока, позволяя вам настроить слайдер под любые требования.

8. Всплывающие фотографии: Для шаблонов Слайдер 1 и Слайдер 3 предусмотрена всплывающая функция с иконкой «лупы», чтобы пользователи могли легко увеличить изображения.

9. Информативность: Названия и описания фотографий выводятся динамически. Вы можете настроить цвет текста и стрелочек «влево-вправо», а также цвет подложки под текст. Подложка может быть полупрозрачной, что позволяет адаптировать вид под ваш стиль.

10. Расположение подложки: Подложка с названием и описанием фотографии прикреплена к низу, что особенно актуально для шаблонов «каруселей» (Слайдер 1 и Слайдер 2).

11. Динамическое обновление: Важно отметить, что названия и описания (Title и Alt) подтягиваются из Медиабиблиотеки. Изменив их там, вы автоматически обновите информацию на сайте.

12. Параметры по умолчанию: После установки слайдера по умолчанию установлен шаблон Слайдер 1, цвет слайдера и текста #429AD5A6, цвет подложки #FFFD74.

13. Упрощение работы с ID: Если вам нужно использовать новый элемент слайдера, он автоматически появляется в сниппетах в визуальном редакторе. Порой потребуется обновить список новых сниппетов.

14. Настройки после размещения слайдера в тексте: Вы можете менять шаблон слайдера и другие настройки, зайдя в соответствующий элемент. В публичной части сайта всё изменится на всех страницах, где размещен этот слайдер (если он был размещен не единожды, конечно).

15. Сохранение Инфоблока: При удалении модуля Инфоблок не исчезает, так что вы сможете его использовать позже, если это понадобится.

16. Работа без jQuery: Fancybox функционирует без использования jQuery, что минимизирует потенциальные конфликты в верстке.

17. Зацикленная прокрутка: Прокрутка слайдеров осуществляется по кругу. Автоматического пролистывания с определённым интервалом нет и не будет, так как это может раздражать пользователей.

18. Плавность высоты слайдеров: Слайдеры 1 и 2 не будут менять высоту при пролистывании, если выбрана настройка «вписывать по высоте».

19. Вывод информации при всплытии: При открытии фотографий также отображаются их названия и описания, что улучшает информативность.

Слайдер упрощает работы с изображениями и обеспечивает высокую функциональность на сайте.

Предположим, мы хотим разместить текст: один или несколько абзацев.

Далее хотим в нескольких местах разместить слайдеры фотографий.

Порядок действий:

1. Добавляем в Медиабиблиотеку раздел, подраздел и т.д. - так, как нам будет удобно группировать фотографии.

2. Сразу правим названия фотографий и описания их. Это важно, мы утащим их в слайдеры!

3. Добавляем элемент в созданном модулем инфоблоке
"Слайдер фотографий для размещения фотогалерей в текст страниц", и в элементе добавляем наши фотографии из Медиабиблиотеки! Указываем настройки: ширина в % на странице, цвет, тип слайдера (шаблон). Значения по умолчанию редактируются в настройках нашего инфоблока, кстати. Сохраняем.

4. Почти готово. Теперь в визуальном редакторе у нас появились сниппеты! Можем добавлять в любом месте на сайте, на любой странице (статической, динамической) сниппет через визуальный редактор, или просто кодом

#MTPS_77_2343#

(числа - это ID нашего инфоблока и элемента, соответственно)

Совет №1: Не забываем почистить кэш! (Ctrl F5, вдруг кто забыл...)

Совет №2: Мы советуем не смешивать горизонтальные и вертикальные фотографии в 1 слайдере. Это и выглядит не очень красиво. Отдельно - вертикальные, отдельно - горизонтальные. Соответствующая настройка есть.