Получаем превью изображения, добавленного через плагин Advanced Custom Fields в WordPress

Advanced Custom Fields – наверное, один из самых популярных и бесплатных плагинов для WordPress, с помощью которого можно организовать удобное добавление, вывод и управление дополнительных полей на вашем сайте.

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

Все дело в том, что при создании поля с таким типом перед нами встает выбор из трех типов вывода данных из такого поля. Это изображаемый объект, ссылка на изображение и ID изображения.

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

Если же мы остановили свой взгляд на втором типе – ссылке, то встает вопрос – а как же нам получить ссылку на превью этого изображения? Ведь мы знаем, что изображение может быть небольшим (это относится как к его весу, так и к его сторонам), так и большим, превышая иногда и 5-мегабайтный вес.

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

Итак, для начала вам необходимо в типе вывода данных выбрать «ID изображения». А дальше уже дело техники.

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

<?php
	
	$name_field = "images_1"; // Название поля
	$get_image_id = get_field($name_field);
	$size = "full";
	
	if($get_image_id) {
		
		$full_image_link = wp_get_attachment_image_url($get_image_id, $size);

		echo "Ссылка на полное изображение записи: ".$full_image_link;
		
	}
	
?>

Где «images_1» – это название вашего поля, его вы указывали при создании.

А для того чтобы получить как раз ссылку на превью (уменьшенное изображение), вы используете код:

<?php 
				
	$name_field = "images_1"; // Название поля
	$get_image_id = get_field($name_field);
	$size = "thumbnail";

	if($get_image_id) {
		
		$thumb_image_link = wp_get_attachment_image_url($get_image_id, $size);

		echo "Ссылка на превью: ".$thumb_image_link;

	}

?>

На что здесь стоит обратить внимание?

$size – это переменная, которая содержит в себе размер. Допустимые значения – это thumbnail, medium, large и full или массив вида:

array(300, 350)

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

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