Плейсхолдеры изображений

Функция "Плейсхолдеры изображений" — это мощный инструмент, который позволяет выводить изображения из галереи напрямую в контенте или шаблоне ресурса, не вызывая сниппет.

Специальный плагин один раз подготавливает все данные и делает их доступными в виде простых плейсхолдеров, таких как [[+g3x.0]] или [[+g3x.1.url]].

Как это работает

При загрузке страницы на сайте плагин, работающий на событии OnLoadWebDocument, выполняет следующие действия:

1. Проверяет, включена ли эта функция в системных настройках.

2. Если да, он находит все активные изображения для текущего ресурса, сортируя их по полю position.

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

Системные настройки

Для управления этой функцией используются четыре системные настройки в пространстве имен gallery3x.

1. Включить плейсхолдеры на сайте

• Ключ: gallery3x.set_placeholders

• Описание: Главный "рубильник". Установите в "Да", чтобы активировать функцию. По умолчанию выключено, так как создает дополнительный запрос к базе данных на каждой странице. Включайте, только если вы действительно используете плейсхолдеры в шаблонах или контенте.

2. Чанк для плейсхолдеров

• Ключ: gallery3x.placeholders_tpl

• Описание: Имя чанка, который будет использоваться для оформления плейсхолдера вида [[+g3x.N]]. Если эта настройка пуста, то [[+g3x.0]] просто выведет массив данных картинки. Если указан чанк, его содержимое будет обработано с данными картинки.

• Пример значения: tpl.Gallery3x.placeholderItem

3. Включить для шаблонов

• Ключ: gallery3x.placeholders_for_templates

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

• Пример значения: 3, 8, 12

• Примечание: Если поле пустое, функция будет работать для всех шаблонов.

4. Размеры превью для плейсхолдеров

• Ключ: gallery3x.placeholders_thumbs

• Описание: Список размеров превью через запятую, которые нужно сделать доступными в плейсхолдерах. Это полезная оптимизация, которая не позволяет загружать лишние данные.

• Пример значения: small,medium

Примеры использования

Предположим, вы загрузили в галерею 3 картинки.

1. Простой вывод

Вы можете вставить эти плейсхолдеры прямо в контент ресурса или в его шаблон:

• [[+g3x.0.url]] — выведет URL оригинала первой картинки.

• [[+g3x.0.medium]] — выведет URL превью размера medium первой картинки.

• [[+g3x.1.alt]] — выведет alt текст второй картинки.

• [[+g3x.2.name]] — выведет название третьей картинки.

2. Вывод с форматированием (через чанк)

Это основной способ использования.

1. Создайте чанк, например, tpl.Gallery3x.placeholderItem со следующим кодом:

   HTML

   <a href="[[+url]]" class="image-link">
       <img src="[[+medium]]" alt="[[+alt]]" title="[[+name]]">
   </a>
   

2. В системной настройке gallery3x.placeholders_tpl укажите имя этого чанка: tpl.Gallery3x.placeholderItem.

3. Теперь вы можете вставлять в контент просто [[+g3x.0]], [[+g3x.1]] и т.д., и они будут автоматически обернуты в HTML из вашего чанка.

3. Продвинутое использование (с Fenom)

Если на сайте используется Fenom, вы можете легко перебрать все изображения в цикле прямо в шаблоне:

{if $_modx->resource.g3x.0}
    <div class="product-gallery">
        <div class="main-image">
            <img src="{$_modx->resource['g3x.0.medium']}" alt="{$_modx->resource['g3x.0.alt']}">
        </div>
        <div class="thumbnails">
            {for $i = 0 to 10}
                {if $_modx->resource["g3x.{$i}.small"]}
                    <img src="{$_modx->resource["g3x.{$i}.small"]}" alt="">
                {/if}
            {/for}
        </div>
    </div>
{/if}