Обзор
Поле «Галерея» предоставляет простой и интуитивно понятный интерфейс для загрузки нескольких изображений. Несколько изображений могут быть добавлены, отредактированы и отсортированы с легкостью!
Демо
Настройки
| Имя | Описание |
|---|---|
| Мин. количество изображений | Минимальное количество изображений, без которых поле не пройдет проверку. По умолчанию 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 );
?>