Галерея (Gallery)

Обзор

Поле «Галерея» предоставляет простой и интуитивно понятный интерфейс для загрузки нескольких изображений. Несколько изображений могут быть добавлены, отредактированы и отсортированы с легкостью!

Демо

Настройки

ИмяОписание
Мин. количество изображенийМинимальное количество изображений, без которых поле не пройдет проверку. По умолчанию 0.
Макс. количество изображенийМаксимально допустимое количество изображений. По умолчанию 0.
ДобавитьУказывает куда добавлять новые изображения: в начало или в конец.
БиблиотекаПозволяет выбрать откуда будет доступна картинка: только в текущем посте или во всей медиабиблиотеке.
МинимумУстанавливает минимальные значения ширины (px, число), высоты (px, число) и размера файла (mb, число). Размер файла также можно указать строкой. Например, «400 KB». Добавлено в v5.1.9
МаксимумУстанавливает максимальное значения ширины, высоты и размера файла. Добавлено в v5.1.9
Допустимые типы файловДобавляет проверку на тип файла картинки. Введите через запятую нужные типы файлов (.jpg, .png, .gif) для возможности загрузки только их. Оставьте поле пустым, если хотите разрешить загрузку файлов с любым типом. Добавлено в v5.1.9

Использование в шаблоне

Поле «Галерея» вернет массив изображений. Каждое элемент массива изображений представляет собой массив, содержащий информацию, такую как название, alt, описание, url и многое другое.

Для каждого изображения в массиве будет сформирован вложенный массив, выглядящий примерно так:

Array (
    [ID] => 2822
    [alt] => 
    [title] => Hot-Air-Balloons-2560x1600
    [caption] => 
    [description] => 
    [mime_type] => image/jpeg
    [type] => image
    [url] => http://acf5/wp-content/uploads/2014/06/Hot-Air-Balloons-2560x1600.jpg
    [width] => 2560
    [height] => 1600
    [sizes] => Array (
        [thumbnail] => http://acf5/wp-content/uploads/2014/06/Hot-Air-Balloons-2560x1600-150x150.jpg
        [thumbnail-width] => 150
        [thumbnail-height] => 150
        [medium] => http://acf5/wp-content/uploads/2014/06/Hot-Air-Balloons-2560x1600-300x187.jpg
        [medium-width] => 300
        [medium-height] => 187
        [large] => http://acf5/wp-content/uploads/2014/06/Hot-Air-Balloons-2560x1600-1024x640.jpg
        [large-width] => 604
        [large-height] => 377
        [post-thumbnail] => http://acf5/wp-content/uploads/2014/06/Hot-Air-Balloons-2560x1600-604x270.jpg
        [post-thumbnail-width] => 604
        [post-thumbnail-height] => 270
    )
)

Базовый список изображений

В этом примере показано, как перебирать значения поля «галерея» и отобразить список изображений. Также используется функция wp_get_attachment_image() для генерации HTML.

<?php 

$images = get_field('gallery');
$size = 'full'; // (thumbnail, medium, large, full или произвольный размер)

if( $images ): ?>
    <ul>
        <?php foreach( $images as $image ): ?>
            <li>
            	<?php echo wp_get_attachment_image( $image['ID'], $size ); ?>
            </li>
        <?php endforeach; ?>
    </ul>
<?php endif; ?>

Вы также можете сгенерировать HTML элемент <img>, используя данные, доступные в массиве $image.

<?php 

$images = get_field('gallery');

if( $images ): ?>
    <ul>
        <?php foreach( $images as $image ): ?>
            <li>
                <a href="<?php echo $image['url']; ?>">
                     <img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
                </a>
                <p><?php echo $image['caption']; ?></p>
            </li>
        <?php endforeach; ?>
    </ul>
<?php endif; ?>

Создание слайдера

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

<?php 

$images = get_field('gallery');

if( $images ): ?>
    <div id="slider" class="flexslider">
        <ul class="slides">
            <?php foreach( $images as $image ): ?>
                <li>
                    <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
                    <p><?php echo $image['caption']; ?></p>
                </li>
            <?php endforeach; ?>
        </ul>
    </div>
    <div id="carousel" class="flexslider">
        <ul class="slides">
            <?php foreach( $images as $image ): ?>
                <li>
                    <img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
                </li>
            <?php endforeach; ?>
        </ul>
    </div>
<?php endif; ?>

Создании WP галереи

Следующий код использует несколько дополнительных параметров в функции get_field для поиска «сырых» значения. «Сырые» значения не форматируется и будут возвращены в виде массива изображений. Затем вы можете использовать этот массив для создания и запуска шорткода галереи.

<?php 

$image_ids = get_field('gallery', false, false);
$shortcode = '[gallery ids="' . implode(',', $image_ids) . '"]';

echo do_shortcode( $shortcode );

?>