WEBSITE X5
Как создать галерею изображений «Полная ширина», которая занимает всю ширину окна браузера
WebSite X5 Evolution и Professional с версии 17
Каждый день веб-страницы должны идеально адаптироваться к «экстремальным» ситуациям: от крошечных экранов смартфонов, где все сжато и упорядочено, до больших настольных экранов с высоким разрешением, где один и тот же контент рискует «потеряться» на больших пространствах.
Задача состоит в том, чтобы найти эффективные решения, которые позволяют страницам оптимально функционировать во всех этих ситуациях, предлагая зрителям наилучший пользовательский опыт.
С версией 17 вы можете позволить объекту, например галерее изображений, растягиваться, чтобы соответствовать ширине окна браузера, даже если это окно изменено в размерах или выполнено в полноэкранном режиме.
Вот как это сделать:
Как подготовить изображения
При создании галереи одним из наиболее важных шагов является подготовка изображений, чтобы все они имели одинаковый формат и соответствующие размеры.
Поскольку мы хотим создать галерею, которая может расширяться, чтобы соответствовать всей ширине окна браузера, наши изображения должны быть достаточно большими, чтобы заполнить все это пространство, не будучи слишком тяжелыми. Поэтому мы можем подготовить изображения с шириной 1920 пикселей, которая соответствует наиболее распространенному максимальному разрешению.
Совет. При подготовке файлов изображений для вашего проекта не забывайте переименовывать файлы: правильные имена помогают вам лучше управлять своими ресурсами, а также полезны для SEO.
Как настроить галерею изображений для полной ширины
Теперь, когда изображения готовы, мы можем перейти к добавлению галереи на нашу страницу. WebSite X5 предлагает различные виды галерей.
- Откройте ваш проект в WebSite X5 и перейдите на страницу, которую вы хотите редактировать.
- Нажмите на объект галереи, перетащите его в сетку макета и вставьте в ячейку в первом ряду. Убедитесь, что строка в сетке не содержит других объектов, кроме галереи.
- Дважды щелкните на вставленном объекте «Галерея» (или выберите его и нажмите на кнопку), чтобы открыть окно со всеми вариантами его настройки.
- В разделе «Список» нажмите кнопку «Добавить», чтобы импортировать все подготовленные изображения.
- Откройте раздел «Стиль» и выберите «Классическое слайд-шоу» в качестве типа галереи. Установите Максимальный размер 1920 x 350 пикселей (так же, как вы использовали для подготовки изображений).
Используйте доступные параметры для настройки галереи по своему усмотрению, затем подтвердите, чтобы вернуться в окно «Создание страницы».
В сетке макетов выберите объект «Галерея», который вы только что создали, и нажмите кнопку «Расширить до ширины окна браузера». Как вы можете видеть в предварительном просмотре таблицы, галерея теперь расширяется за ширину страницы (определяется на основе модели), занимая все окно браузера.
Как ведет себя галерея приразных размерах экрана
Теперь вы можете наслаждаться плодами своего труда. Нажмите кнопку «Просмотр», чтобы открыть страницу в окне автономного просмотра и посмотреть, что произойдет, если вы измените размер экрана браузера.
Галерея должна отображаться корректно даже на мобильных устройствах. Для этого измените размер окна браузера до значения ниже точки останова рабочего стола. Вы увидите, что галерея становится меньше, но высота и ширина изображений остаются пропорциональными.
Если вместо этого вы попытаетесь расширить окно браузера до разрешений, превышающих точку останова рабочего стола, вы увидите, что галерея расширяется и занимает всю доступную ширину. Однако при использовании объекта Галерея изображения не будут расширяться за пределы их первоначальных размеров, которые в нашем примере были 1920 на 350 пикселей.