Описание
Поле изображения позволяет загружать и выбирать изображение с помощью стандартного медиамодального окна WordPress.
Скриншоты
История изменений
- Настройка
Minimumдобавлена в версии 5.1.9. - Настройка
Maximumдобавлена в версии 5.1.9. - Настройка
Allowed File Typesдобавлена в версии 5.1.9.
Настройки
Return Format
Определяет формат возвращаемых данных. Можно выбрать массив изображения (array), URL изображения (string) или ID изображения (integer).Preview Size
Размер изображения WordPress, отображаемый при редактировании значений.Library
Ограничивает выбор файлов только файлами, загруженными в эту запись, или позволяет использовать всю медиатеку.Minimum
Добавляет проверку загружаемого файла на минимальную ширину в пикселях (integer), высоту в пикселях (integer) и размер в МБ (integer). Размер файла также можно указать в виде строки с единицей измерения, например'400KB'.Maximum
Добавляет проверку загружаемого файла на максимальную ширину, высоту и размер.Allowed File Types
Добавляет проверку загружаемого файла на соответствие определённым типам. Введите список разрешённых типов через запятую или оставьте поле пустым, чтобы разрешить все типы.
Использование в шаблоне
Поле изображения возвращает массив, строку или целочисленное значение в зависимости от выбранной настройки Return Value.
Вывод изображения (ID)
В этом примере показан вывод выбранного изображения при использовании типа возвращаемого значения Image ID. Для генерации HTML изображения используется функция wp_get_attachment_image().
Эта функция также генерирует атрибут srcset, обеспечивая поддержку адаптивных изображений!
<?php
$image = get_field('image');
$size = 'full'; // (thumbnail, medium, large, full or custom size)
if( $image ) {
echo wp_get_attachment_image( $image, $size );
}
Вывод изображения (массив)
В этом примере показан вывод выбранного изображения при использовании типа возвращаемого значения Image Array. Этот тип возвращаемого значения предоставляет дополнительные данные об изображении, например альтернативный текст, подпись и размеры.
<?php
$image = get_field('image');
if( !empty( $image ) ): ?>
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
<?php endif; ?>
Настраиваемый вывод (массив)
В этом примере показан вывод выбранного изображения в пользовательском размере при использовании типа возвращаемого значения Image Array. Этот тип возвращаемого значения позволяет получить дополнительные данные об изображении, например размеры, ширину, высоту и другие параметры.
<?php
$image = get_field('image');
if( $image ):
// Переменные изображения.
$url = $image['url'];
$title = $image['title'];
$alt = $image['alt'];
$caption = $image['caption'];
// Атрибуты размера миниатюры.
$size = 'thumbnail';
$thumb = $image['sizes'][ $size ];
$width = $image['sizes'][ $size . '-width' ];
$height = $image['sizes'][ $size . '-height' ];
// Начало обёртки подписи.
if( $caption ): ?>
<div class="wp-caption">
<?php endif; ?>
<a href="<?php echo esc_url($url); ?>" title="<?php echo esc_attr($title); ?>">
<img src="<?php echo esc_url($thumb); ?>" alt="<?php echo esc_attr($alt); ?>" />
</a>
<?php
// Конец обёртки подписи.
if( $caption ): ?>
<p class="wp-caption-text"><?php echo esc_html($caption); ?></p>
</div>
<?php endif; ?>
<?php endif; ?>
Вывод изображения (URL)
В этом примере показан вывод выбранного изображения при использовании типа возвращаемого значения Image URL. Этот тип возвращаемого значения позволяет эффективно вывести простое изображение, но не предоставляет дополнительные данные о нём.
<?php if( get_field('image') ): ?>
<img src="<?php the_field('image'); ?>" />
<?php endif; ?>
Обновлено: 30.09.2026