Супербыстрый хостинг на SSD от 165р в месяц   •   Реклама
1 547 просм
5 комм
Поделиться:

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

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

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

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

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

Первый выводит массив с данными об изображении, который содержит в себе 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)

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

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

5
комментариев
Гостям запрещено участвовать в обсуждениях сайта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
Проверенный  |  3

Артем Мáлков, спасибо, то что нужно smiley

20.10 в 12:12
  • 1
Администратор  |  724

Ага Конечно, если у Вас нет ранее генерированного изображения с таким размером, то будет загружено другое, ближайшее к указанному размеру. В Вашем случае - это 300x225.

Чтобы решить эту проблему, попробуйте воспользоваться этой инструкцией - https://www.pandoge.com/stati_i_sovety/svoy-razmer-dlya-miniatyur-v-wordpress

19.10 в 15:48
  • 0
Проверенный  |  3

Артем Мáлков, спасибо что исправили, подскажите почему вот такой array(20, 15) не выводит запрошенный размер, вместо этого выводит https://site.ru/wp-content/uploads/2019/10/tild3964-3765-4533-b036-616333336431__0-02-04-5f1c8990a93a-300x225.jpg ? confuse

19.10 в 14:03
  • 0
Администратор  |  724

Ага Конечно, Здравствуйте!

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

18.10 в 00:08
  • 0
Проверенный  |  3

<?php

$get_image_id = get_field("gallery-img1"); // Название поля

$size = array(300, 350);

if($get_image_id) {

$thumb_image_link = wp_get_attachment_image($get_image_id, $size);

echo $thumb_image_link;

}

?>

Этот запрос выводит такой результат <img width="300" height="225" src="https://site.ru/wp-content/uploads/2019/10/tild3964-3765-4533-b036-616333336431__0-02-04-5f1c8990a93a.jpg" class="attachment-300x350 size-300x350" alt="" srcset="https://site.ru/wp-content/uploads/2019/10/tild3964-3765-4533-b036-616333336431__0-02-04-5f1c8990a93a.jpg 1280w, https://site.ru/wp-content/uploads/2019/10/tild3964-3765-4533-b036-616333336431__0-02-04-5f1c8990a93a-300x225.jpg 300w, https://site.ru/wp-content/uploads/2019/10/tild3964-3765-4533-b036-616333336431__0-02-04-5f1c8990a93a-768x576.jpg 768w, https://site.ru/wp-content/uploads/2019/10/tild3964-3765-4533-b036-616333336431__0-02-04-5f1c8990a93a-1024x768.jpg 1024w" sizes="(max-width: 300px) 100vw, 300px">

Как сделать вывод только пути к запрошенной картинке?

17.10 в 20:36
  • 0
Подняться наверх
«Pandoge» - помощник веб-мастера