Как использовать поле Gallery

Обзор

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

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

Поле Gallery — одна из функций ACF PRO, в который также входят другие сложные типы полей, поддержка страниц настроек и ACF Blocks.

Регистрация и настройка полей

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

Для регистрации поля Gallery требуется совсем немного действий. Создайте новую группу полей Gallery в ACF, добавьте поле Gallery, укажите метку поля, выберите формат возврата и решите, должны ли изображения загружаться в запись или могут выбираться из всей медиатеки.

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

Как показывает видео, поле Gallery — отличный способ быстро и легко создавать эффектные подборки изображений в самых разных форматах. Оно практически гарантированно сэкономит ваше время, но главным его преимуществом может быть то, какие возможности оно предоставляет владельцам сайтов и редакторам контента.

Обеспечение редакционного качества и стандартов

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

Настройки валидации — и аналогичные настройки в поле Image — чрезвычайно полезны для соблюдения редакционных стандартов. На многих сайтах действуют правила, касающиеся размера изображений, количества изображений в галерее и других параметров. Настройка этих правил на вкладке «Валидация» позволяет применять их автоматически.

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

У небольших клиентов — или клиентов, для которых контент не является приоритетом, — может вообще не быть редакционных правил для изображений. Расскажите им о таких преимуществах, как единообразный размер и качество изображений, и сообщите, что с небольшой помощью ACF PRO вы можете обеспечить соблюдение любых стандартов, которые они решат установить.

Расположение и отображение

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

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

Редактирование и ввод данных

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

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

После выбора нужных изображений ACF проверяет их в соответствии с правилами валидации, настроенными при создании поля Gallery. Изображения, не соответствующие требованиям, будут отклонены, а уведомление объяснит, почему изображение нельзя использовать.

Затем редактор контента нажимает Выбрать, чтобы закрыть модальное окно и вернуться к редактированию записи. После этого фотографии можно переставить вручную перетаскиванием или использовать массовые действия для сортировки по дате, заголовку и другим параметрам. Редакторы контента могут нажать на любое изображение, чтобы изменить его альтернативный текст, описание и подпись.

Логика вывода в шаблонах

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

Мы добавили пример файла page-gallery.php на GitHub, который отображает поле Gallery, созданное для вымышленной технологической компании Qorp.

Разберем некоторые части этого файла. Сначала добавим стандартные элементы, обычно присутствующие в верхней части файла шаблона WordPress.

<?php
/**
 * Страница: Gallery
 *
 * @package WordPress
 * @subpackage QORP
 */

get_header();

Почти все остальное, что нам нужно добавить, размещается внутри цикла The Loop. Мы используем get_template_part, чтобы подключить content-single.php и использовать его как основу для записей. Затем применяем тег style, чтобы задать цвета, отступы и другие параметры отображения.

/* Начало цикла */
while ( have_posts() ) :
    the_post();

    get_template_part( 'template-parts/content/content-single' );
    ?>

    <style>
        .acf-gallery {
            display:grid;
            grid-gap:1.5rem;
            grid-template-columns:repeat(auto-fill, minmax(8ch, 1fr));
            margin:var(--wp--preset--spacing--lg) auto;
            max-width:var(--wp--style--global--content-size);
        }
        .acf-gallery a img {
            display: block;
            filter: grayscale(100%);
            height: auto;
            transition: filter 0.7s ease;
            width: 100%;
        }
        .acf-gallery a:hover img {
            filter: grayscale(0);
        }
    </style>

Теперь нужно добавить логику получения и отображения метаданных записи. Для получения данных поля можно использовать функцию ACF get_field(), перебрать каждое поле и получить нужные атрибуты ($image[‘ID’], $image[‘url’]), чтобы добавить их в итоговую разметку.

    <div class="acf-gallery">
        <?php
        // Поля Gallery ACF.
        $images = get_field( 'gallery' );

        if ( $images ) :
            // Получаем каждое изображение.
            foreach ( $images as $image ) :
                $image_id      = $image['ID'];
                $image_src     = $image['url'];
                $image_caption = $image['caption'];
                ?>
                    <a href="<?php echo esc_url( $image_src ); ?>" title="<?php echo esc_html( $image_caption ); ?>" class="thickbox">
                        <?php echo wp_get_attachment_image( $image_id, 'thumbnail' ); ?>
                    </a>
                    <?php
            endforeach;
        endif;
        ?>
    </div><!-- .acf-gallery →

В конце шаблон завершает The Loop и подключает подвал страницы.

    <?php
endwhile; // Конец цикла.

get_footer();

Использование WordPress ThickBox с полями Gallery

Для простоты мы воспользуемся существующей зависимостью ThickBox ядра WordPress, чтобы предоставить пользователям модальное всплывающее окно. Однако возможности вывода изображений практически безграничны. Если вы предпочитаете слайдер, обратите внимание на Swiper.js.

Добавьте приведенный ниже блок кода в файл темы functions.php, если хотите использовать WordPress ThickBox вместе с полями Gallery. Также можно подключить другую стороннюю зависимость, например Swiper.js, заменив вызовы wp_enqueue_script() и wp_enqueue)_style() на вызовы выбранной вами зависимости для отображения.

Этот код используется для создания модального окна, показанного в видеоруководстве. Полный файл доступен на GitHub; он поможет понять, как код используется в шаблоне.

/**
 * Подключает зависимости Thickbox для лайтбокса.
 *
 * @link https://developer.wordpress.org/reference/functions/add_thickbox/
 *
 * @return void
 */
function qorp_enqueue_thickbox() {
    // Только на странице 'gallery'.
    if ( is_page( 'gallery' ) ) {
        wp_enqueue_script( 'thickbox' );
        wp_enqueue_style( 'thickbox' );
    }
}
add_action( 'wp_enqueue_scripts', 'qorp_enqueue_thickbox' );

Заключение

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

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

Как и наши статьи о том, как использовать поле Repeater и как создавать макеты с помощью поля Flexible Content, воспринимайте это руководство как отправную точку для работы с полем Gallery, а не как исчерпывающую инструкцию. Это связано с тем, что любое поле ACF, включая поле Gallery и другие поля в ACF PRO, можно использовать вместе в практически безграничном количестве комбинаций.

Напишите нам в Twitter и расскажите, как вы использовали поле Gallery. Уверены, вы сможете нас удивить.

Обновлено: 30.09.2026