Данный функционал появится в теме начиная с версии 1.5.6.
Теперь благодаря дополнительным параметрам страницы и установленному приложению Фото можно выводить слайдеры на любой странице в двух разных местах. Но обо всём по порядку.
Если у вас не стоит приложение Фото, то его нужно установить.
Загрузка слайдов в приложение Фото
Создайте новый альбом. Если не хотите, чтобы он был виден в фотопотоке и списках альбомов в приложении Фото, сделайте его скрытым.
Запомните его идентификатор.
Загрузите нужные фото в альбом.
Если не хотите, чтобы эти фото отображались в фотопотоке, то задайте этим фото тег hide.
Настройки максимального размера фото
По умолчанию в приложении Фото максимальный размер фотографий ограничен 970 пикселями.
Это значит, что если вы загрузите какое-нибудь изображение высокого разрешения, например, в ширину 1440px, то оно всё равно будет в ширину 970px.
Чтобы это исправить зайдите в настройки приложения Фото и задайте новый максимальный размер.
Самый максимальный размер – это 1920px. Шире разрешений, кажется, уже нет.
Заодно там же можно включить поддержку ретина-экранов, если ещё не включили или зачем-то выключили.
Публикация слайдера
Слайды загружены, настройки настроены. Теперь можно и опубликовать слайдер.
Откройте страницу, на которой хотите опубликовать слайдер. Затем откройте настройки этой страницы.
Там будет поле дополнительные параметры.
На всякий случай: Для чего нужны доп. параметры и как их добавлять.
Чтобы опубликовать слайдер на странице нужно добавить следующий обязательный доп. параметр:
slider=7
Где число 7 – это тот самый идентификатор альбома, который мы запомнили на первом скриншоте этой статьи.
После этого сохраните изменения на странице и слайдер появится на ней.
Полный список доп. параметров слайдера
Для более гибкой настройки слайдера я предусмотрел ещё несколько доп. параметров.Вот полный список:
- slider=N
Идентификатор альбома для слайдера.
Где N – идентификатор альбома, из которого брать слайды. - slider_top=N
Идентификатор альбома для слайдера, расположенного НАД контентом.
Где N – идентификатор альбома, из которого брать слайды.
Это аналог доп. параметра slider, только если вы используете этот доп. параметр, то слайдер будет расположен НАД контентом (включая сайдар),
а не В контенте (рядом с сайдбаром) как в первом случае. - slider_offset=N (по умолчанию* 0).
Пропуск фото в слайдере
Где N – количество фото в альбоме, которое нужно пропустить.
Например, если указана цифра 5, то в слайдер пойдут фото, начиная с 6 номера по порядку сортировки альбома. - slider_limit=N (по умолчанию* 10)
Общее количество фото в слайдере.
Где N – общее количество фото в слайдере. - slider_height=N (по умолчанию* 310)
Высота слайда в пикселях (единицы измерения не указывать).
Где N - высота слайда. - slider_auto=N
Интервал в секундах между автоматическими сменами слайдов. - slider_overlay=код_цвета, прозрачность цвета
Цвет подолжки слайда, если фото имеет описание.
Данный доп. параметр состоит из двух частей, разделённых запятой.
Первая часть код цвета, вторая – его прозрачность.
Пример: slider_overlay=#000,0.5 (черный цвет, прозрачность 0.5) - slider_nocover=1
По умолчанию фото в слайдере центрируются и фиксируются по высоте.
Всё, что не влезает по ширине в слайд – обрезается.
Данный доп. параметр отключает эту опцию.
При наличии этого доп.параметра изображение отображается в своём истинном масштабе (пропорциях) – не растягивается и не обрезается.
Если ширина изображения меньше ширины блока слайда оно центрируется.
Настройки высоты не действуют. Высота слайда подбирается под высоту изображения.
* – по умолчанию, если доп. параметр не задан.
Форматирование текста в слайде
Если вы хотите добавить текст на фото, то просто добавьте в приложении Фото описание для выбранного фото.
Вот пример текста.
<br> <br> <div class="h1 align-center bold" style="text-transform: none;text-shadow:1px 1px #fff;">Открой для себя простор!</div> <div class="align-center"><a href="#" class="button large">Кнопка</a></div>
Обратите внимание, что вертикальное смещение текста в слайде осуществляется тегом <br>.
Таким образом текст в примере кода выше смещён на две строки вниз.
6 комментариев
Почему-то такого рода ширины картинки не отображаются
https://spastroyservise.com/fo...
на странице-
https://spastroyservise.com/sh...
и еще какой-то квадратик появляется вместе с слайдером, слева сверху от него..
+ доп . вопрос на главной странице сайта, в промо карточках пишу описание и таймер, и ничего не выводится, где может быть проблема?
я же выше ответил - что из-за режима отображения. Вам нужно с режима масштабирования переключиться на режим обрезки. И использовать фото без текста.
Остальное в пн. у меня нет техники с собой.
про режим обрезки понял, на главной заработал таймер и описание! Спасибо.
На странице категории интересует - почему не отображаются слишком широкие фото (даже в полном режиме слайдера) и появился некрасивый квадратик
https://spastroyservise.com/sh...
Здравствуйте!
То ли вы уже разобрались, то ли я не вижу вашей проблемы.
Если ещё не разобрались, то покажите на скриншоте какой "квадратик" вас беспокоит.
Вижу, что есть широкие фото, но они отображаются корректно.
https://spastroyservise.com/sh...
в альбоме слайдера сейчас 8 изображений, отображается 4.
https://spastroyservise.com/fo...
а квадратик - (гугл хром, последняя версия)
Проверяйте все ли фотографии в альбом слайда имеют статус опублиованных.
И для каждой фотографии ещё проверьте.
Если с доступами всё ок, то проверяйте доп. параметры.
Возможно, вы используете доп. параметр: slider_offset=N
Потому что у вас не видны первые 4 фото.
На счёт квадратика.
Откройте тему для приложения Магазин - витрина - proStore - шаблоны - файл category.slider.html
В нём найдите код:
{if !empty($category.params.slider)} {$criteria = $category.params.slider} {/if} {if !empty($category.params.slider_top)} {$criteria = $category.params.slider_top} {/if} {if is_numeric($criteria)} {$criteria = "album/`$criteria`"} {/if} {$size = $wa->photos->config('max_size')} {if !empty($category.params.slider_offset)} {$offset = $category.params.slider_offset} {else} {$offset = null} {/if} {if !empty($category.params.slider_limit)} {$limit = $category.params.slider_limit} {else} {$limit = 10} {/if} {if !empty($category.params.slider_height)} {$slider_height = $category.params.slider_height} {else} {$slider_height = 310} {/if} {if !empty($category.params.slider_auto) && $category.params.slider_auto !== '0'} {$auto = $category.params.slider_auto} {else} {$auto = ''} {/if}И сверху него поставьте:
А снизу него: