Сетка галереи

Сетка галереи используется для одновременного представления набора изображений в строках и столбцах.

1. Перейдите к странице, которую хотите изменить, и убедитесь, что переключатель переведен в положение Редактировать.
2. Добавьте компонент на страницу. Для компонента-сетки галерея заполнитель отображается, пока не будут выбраны изображения.
3. Чтобы добавить в галерею одно или несколько изображений, щелкните ее значок меню , выберите Настройки и на вкладке Общие щелкните Изображения.
4. Нажмите на значок Добавить изображения.
5. Выберите одно или несколько изображений.

   Примечание.:

   В данном окне отображаются все доступные файлы. Необходимо выбрать тип файла, соответствующий контексту. Например, выбирая файл изображения, необходимо выбрать допустимый формат изображения (GIF, JPG, JPEG, PNG или SVG).
   1. Найдите и выберите изображения, которые хотите использовать.

      Если цифровые активы не отображаются, нажмите и измените фильтр по коллекциям на вариант Все.

   2. Выбрав изображение в папке документов, можно создать ссылку на файл, не копируя его на сайт. Чтобы добавить ссылку на файл, установите флажок Использовать ссылку на исходный файл вместо копирования файла на сайт. В противном случае копия файла сохраняется на самом сайте. Добавление ссылки на исходный файл позволяет избежать дублирования содержимого. Кроме того, ссылка дает посетителям возможность посмотреть содержимое, даже если изменяются разрешения на доступ к файлу или просмотр файла.
   3. Нажмите ОК.
   4. Выбрав цифровой актив, можно выбрать определенное представление. Если не выбирать представление, будет использоваться исходный размер. Чтобы вместе с сайтом публиковалась последняя версия актива, установите флажок Использовать последнюю версию актива.
   Выбранные изображения добавляются в список изображений. Порядок изображений в списке (и в сетке) можно изменить перетаскиванием. По умолчанию в качестве заголовка каждого изображения используется имя файла без расширения.
6. Чтобы изменить заголовок, описание или другие настройки конкретного изображения, щелкните изображение в списке и внесите нужные изменения.
   С изображением в галерее также можно связать ссылку или другие действия.
   1. На панели "Настройки" для конкретного изображения щелкните поле "Ссылка".
   2. Выберите один из следующих вариантов:

      • Нет ссылки: по щелчку изображения никакие действия не выполняются.

      • Веб-страница: укажите полный URL-адрес внешней страницы или сайта и выберите, где следует открыть ссылку.

      • Страница сайта: используйте средство выбора страниц, чтобы выбрать страницу на текущем сайте, и укажите, где следует открыть ссылку. Можно указать дополнительные параметры URL-адреса в формате key1=value1&key2=value2. Поддерживаются пустые значения; например, key1=&key2=value2. Также можно указать URL-привязку, но необходимо добавить специальный макет раздела "Привязка" к месту на целевой странице сайта, где требуется разрешить ссылку на привязку, и указать такое же имя привязки в настройках макета, которые использовались при определении действия триггера.

        Примечание.:

        Макет раздела "Привязка", необходимый для использования URL-привязок, предоставляется в инструментарии OCE. Сведения о том, как получить набор инструментов, см. в разделе Разработка с помощью инструментария OCE.

      • Выгрузка файла: выгрузите указанный файл из репозитория. Выберите файл.

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

      • Элемент контента. Выберите элемент контента в связанном репозитории активов, выберите страницу сведений, которую требуется отобразить, и укажите страницу, которую нужно открыть в том же или новом окне.

      • Электронная почта: укажите действительный адрес электронной почты и, при необходимости, тему. Результирующее сообщение открывается или отправляется с помощью клиента электронной почты, используемого по умолчанию.

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

      • Карта: введите действительный адрес или координаты и выберите, где должна открываться карта, в браузерах для настольных компьютеров и мобильных устройств.

      • Телефонный вызов: введите действительный номер телефона.

   3. Чтобы вернуться к панели настроек изображения, нажмите кнопку Назад. Еще раз нажмите кнопку Назад, чтобы вернуться к списку изображений и выбрать для обновления другое изображение.
   4. Завершив обновление отдельных изображений, нажмите кнопку Назад, чтобы указать параметры галереи.
7. Для упорядочивания изображений в сетке используются разные варианты макета.
   • Каменная кладка
   • Столбцы
   • Пользовательские
   Эти варианты описываются в приведенных ниже действиях.
8. Выберите макет Каменная кладка, чтобы изображения автоматически располагались в строках с учетом доступного пространства.
   Получающиеся в результате строки обладают одинаковой высотой, но не имеют определенных столбцов.
   
   Описание иллюстрации GUID-4CAF671A-F931-4177-BB92-E5F082663996-default.png
   
   1. Укажите значение Высота, чтобы пропорционально масштабировать все изображения к указанной высоте в пикселях.
   2. Укажите Интервал между изображениями, чтобы увеличить или уменьшить интервал между изображениями в строке.
9. Выберите макет Пользовательский, чтобы упорядочить изображения по строкам и столбцам.
   1. Выберите элемент Масштабирование, чтобы настроить представление изображений в сетке.

      • Обрезать: наименьшее из двух измерений (ширина или высота) масштабируется, чтобы вписать изображение в доступное пространство, а наибольшее измерение обрезается, чтобы предотвратить растягивание.

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

      Например, в показанной ниже сетке с четырьмя столбцами шесть изображений масштабируются, чтобы вписаться в доступное пространство.
      
      Описание иллюстрации GUID-4AB0B5DD-89B4-492D-A968-45482B3953CE-default.png
      

      Такая же сетка с обрезанными изображениями:
      
      Описание иллюстрации GUID-3B1C55AE-E995-41C4-A9D9-F52FA75FF7E3-default.png
      

   2. Укажите характеристическое отношение, чтобы определить форму ячеек сетки.

      • Квадрат: характеристическое отношение 1:1.

      • Альбомная ориентация: характеристическое отношение 16:9.

      • Портрет: характеристическое отношение 9:16.

      • Пользовательское: укажите собственные числовые значения для характеристического отношения.

   3. Укажите число столбцов.
      Сетка настраивается автоматически, чтобы создать столбцы одинаковой ширины.
   4. Укажите Интервал между изображениями, чтобы увеличить или уменьшить интервал между изображениями в строке и столбцах.
10. Измените макет Пользовательский, чтобы упорядочить изображения по строкам и столбцам на основе указанных размера изображения и ширины.
    1. Выберите элемент Масштабирование, чтобы настроить представление изображений в сетке.

       • Обрезать: наименьшее из двух измерений (ширина или высота) масштабируется, чтобы вписать изображение в доступное пространство, а наибольшее измерение обрезается, чтобы предотвратить растягивание.

       • Вписать: каждое изображение масштабируется так, чтобы оно целиком вписалось в доступное пространство без искажения.
    2. Укажите значения Высота изображения и Высота изображения, чтобы определить форму ячеек сетки.
       Сетка настраивается автоматически, чтобы создать ячейки указанных измерений.
    3. Укажите Интервал между изображениями, чтобы увеличить или уменьшить интервал между изображениями в строке и столбцах.
11. Укажите параметры Выравнивание, Ширина и Интервал, чтобы задать положение сетки в ячейке.
    В поле Ширина укажите в пикселях ширину галереи в ячейке. Чтобы указать ширину, необходимо выбрать любой вариант выравнивания, кроме Заполнение. После задания ширины вариант Заполнение можно использовать для растягивания изображения на указанную ширину.