Аншлаг thumbnails php. Get_the_post_thumbnail() — позволяет получить изображение миниатюры поста

В недалеком прошлом, когда я был совсем еще зеленым в мире программирования, в тот зимний вечер, я трудился над своим первым шаблон для WordPress. Мне нужно было настроить вывод миниатюр к записям. К тому моменту я уже познакомился с рядом шаблонов для WordPress, в которых встречалась реализация этой задачи. А реализовывалась она посредством, наверняка, известного вам скрипта timthumb.php (создает уменьшенную копию изображения по передаваемой ссылке на это самое изображение). Скрипт этот я конечно в итоге прикрутил к шаблону и был доволен результатом, но это продолжалось недолго.

Все работало нормально: вставляешь в запись изображение, брешь ссылку на него и добавляешь её в, специально созданное произвольное поле. В шаблоне ссылка с этого поля считывается и по ней создается миниатюра. Но спустя какое-то время, постоянное копирование ссылки и добавление её в произвольное поле, стало для меня утомительным занятием - рутина. К тому же бывало, что я вообще забывал вставить эту пресловутую ссылку и после публикации приходилось возвращаться к редактированию записи. Знакомо?

В итоге, я написал функцию, которая ищет изображение в посте, вырезает из него ссылку и создает произвольное поле для этого поста и все это автоматически автоматически. Позднее эта функция претерпела некоторые изменения, а потом еще, и в итоге получился плагин, с которым вы можете познакомиться ниже.

О плагине создания миниатюр для WordPress

После активации, плагин ничего не делает, чтобы он начал работать нужно будет редактировать шаблон (вызывать функции в том месте, где необходимы миниатюры изображений). Если просто установить и активировать плагин, он ничего делать не будет!

В целом, скрипт очень похож на timthumb.php, однако отличается и в чем-то лучше:

1. Не нужно вручную создавать произвольное поле со ссылкой на картинку. Поле создается автоматически.
2. Работает немного быстрее timthumb.php (timthumb.php – универсальный скрипт и поэтому там много лишних операций-проверок);
3. Ссылка на картинку будет выглядеть валидно /images/название файла.jpg , а не /functions.php?src=/images/название файла.jpg&w=100&h=100&q=80;
4. Кэш чиститься по необходимости. В timthumb.php кэш постоянно проверяется, старые файлы удаляются. На проверку уходят ресурсы (мелочь, но все же). На этом можно можно безболезненно сэкономить;
5. Ресайзинг можно использовать прямо в посте, указав картинке class mini и нужные размеры;
6. Гораздо удобнее использовать при интеграции в тему WordPress: не нужно получать значение произвольного поля, проверять существует ли поле, чтобы вывести картинку заглушку. Все это будет делаться автоматом.
7. На timthumb.php много хакерских атак, что, если не позволит взломать сайт, то привлечет лишнее внимание хакеров и нагрузку на сервер.

Принцип работы Kama Thumbnail

Создает папку кэша: wp-content/cache/thumb . В нее будут создаваться миниатюры.

При публикации или обновлении поста, плагин ищет ссылку на оригинал картинки и записывает её в произвольное поле поста, затем в теме по этой ссылке создается миниатюра. Ссылка определяется в следующем порядке:

1. Если у поста установлена миниатюра WordPress, её ссылка будет взята;
2. Если в тексте поста есть картинка, её ссылка будет взята. Если эта картинка является анкором ссылки на увеличенный вариант этой картинки, то будет взят УРЛ ссылки;
3. Если у поста нет ни миниатюры WP ни картинки в тексте, то плагин проверит нет ли у поста загруженной для него картинки (вложения). Если вложение есть, то ссылка будет взята от туда;
4. Если ничего не найдено, то в произвольное поле будет добавлена запись-заглушка: “no_photo”. Нужно это, чтобы не производить каждый раз эти операции по поиску ссылки.

При удалении плагин удаляет за собой все: произвольные поля, опции в базе данных, кэш картинок, папку кэша.

Скачать плагин

Установка

1. Распакуйте архив в каталог плагинов /wp-content/plugins , активируйте плагин в админ-панели. Или установите плагин из админ-панели WordPress: Плагины > Добавить новый > Загрузить > Выбрать > Установить.
2. Настройте плагин на странице админ-панели: Настройки > Медиафайлы (Settings > Media) . Рекомендую там в базовых настройках WP выставить нули у большого размера “большой размер (Large size)” и сделать размер поменьше у среднего размера “Средний размер (Medium size)” (например: 150 х 100). Нужно это, чтобы при загрузке изображения WP не создавал лишних размеров изображений. Эту функцию заменит данный плагин.

Блок настроек плагина на странице “медиафайлы” (media):

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

После установки плагина в шаблоне можно использовать функции:

• kama_thumb_src($args) – возвращает ссылку на созданную миниатюру
• kama_thumb_img($args) – возвращает готовую картинку (img тег)
• kama_thumb_a_img($args) – возвращает ссылку-картинку. Ссылка ведет на оригинал картинки.

Аргументы $args:

• w или width – ширина миниатюры (обязательный)
• h или height – высота миниатюры (обязательный)
• q – качество сжатия jpg (по умолчанию 85. макс.100)
• src – ссылка на оригинал картинки, который нужно уменьшить. В этом случае, картинка не будет парсится из контента.
• alt – alt атрибут картинки
• title - title атрибут картинки
• class – class атрибут картинки. Укажите класс mini и нужные размеры, чтобы создать миниатюру к картинке в статье.
• no_stub – указываем, если не нужно выводить заглушку. Вместо нее будет возвращен пустой результат.
• post_id – идентификатор поста. Его нужно передавать, когда функция вызывается не из Цикла WordPress (например, внутри какой-нибудь функции) или, когда переменная $post определяется неправильно (например, определяется картинка от другой записи или еще какие-нибудь глюки). Если передать этот параметр, то скрипт будет точно знать какой пост обрабатывать. Если этот параметр не передан, то будет обрабатываться пост, находящийся в текущий момент (когда вызывается функция) в переменной $post.

Заметки:

1. Параметры можно указывать:
   

   // строкой kama_thumb_img("w=200 &h=100 &alt=название картинки &class=aligncenter"); // или массивом kama_thumb_img(array("width" => 200, "height" => 150, "class" => "alignleft"));

2. Можно указать только ширину или высоту, тогда противоположная сторона (высота или ширина) будут подобраны пропорционально уменьшенной копии;
3. Параметр src нужен для случаев, когда нужно создать миниатюру, без использования произвольных полей (взять любую картинку и создать миниатюру к ней).
4. Если нужно проверить есть ли у поста картинка и если нет, то сделать что-то другое, то используйте такой код:
   

   $img = kama_thumb_img("w=150&h=150&no_stub"); if(! $img) echo "Картинки нет";

   $ img = kama_thumb_img ("w=150&h=150&no_stub" ) ; if (! $ img ) echo "Картинки нет" ;

Миниатюра картинки в тексте статьи (шоткод)

Если в статье нужно уменьшить картинку и сделать её ссылкой на оригинал, то укажите картинке класс mini и задайте нужные размеры (width или height).

Например, мы вставили картинку в статью:

Но нам не нужна такая большая картинка в статье и мы хотим её уменьшить не визуально, а реально, тогда добавляем к ней класс mini и указываем нужные размеры:

300 ” />

Высота, которую мы удалили будет подобрана автоматически, пропорционально.

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

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

Примеры использования

#1 Получаем миниатюру

Внутри цикла WordPress, где нужна миниатюра к посту, с размерами 150х100, используем такой код:

В результате на месте этого кода появится готовый тег :

#2 Не выводим картинку-заглушку

Чтобы картинка-заглушка не выводилась, если у записи нет картинок, то нужно определить параметр no_stub:

Вернет УРЛ миниатюры: /wp-content/cache/thumb/ec799941f_100x80.png . Этот УРЛ можно использовать, например, так:

" alt="" />

Если нужно сделать миниатюру, как картинку, кликнув на которую откроется большое изображение, то используйте такой код:

Flector 5

Это маленький, но весьма полезный плагин, чьей единственной функцией является перегенерация миниатюр в блоге. Любое изменение размера миниатюр в настройках блога коснется лишь новых залитых вами картинок, а все старые картинки останутся с прежними размерами. А что делать, если вы сменили шаблон блога на тот, в котором дизайн заточен под определенный размер миниатюр? Вот тут то вам и понадобится данный плагин. Установили плагин, перегенерировали миниатюры в нужном размере и все, плагин можно удалять. И не стоит бояться экспериментировать с новыми шаблонами и разными размерами миниатюр – плагин создает новые миниатюры, не удаляя при этом старые. Таким образом, вы всегда можете откатиться на свой изначальный шаблон без какого-либо ущерба (ну кроме лишних картинок в папке загрузок) для своего блога.

1 Распаковываем архив.

2 Копируем папку regenerate-thumbnails в /wp-content/plugins/ .

3 Заходим в админку блога на вкладку "Плагины " и активируем плагин.

Никаких настроек в плагине нет. Так что не забываем сначала зайти в "Параметры\Медиафайлы " и установить нужные вам размеры миниатюр.

После этого у нас есть два варианта:

1 Перегенерация всех картинок сразу. Зайдите в "Инструменты\Regen. Thumbnails " и нажмите кнопку "Regenerate All Thumbnails ":

Теперь вам остается лишь ждать, пока плагин пересоздаст все миниатюры. Это может занять от нескольких секунд до десятков минут в зависимости от количества картинок. Сотня картинок пересоздается примерно одну минуту.

2 Перегенерация избранных картинок. Можно пересоздать лишь выбранные картинки, для этого зайдите в библиотеку медиафайлов. Там вы сможете перегенерировать или несколько картинок сразу или каждую по отдельности:

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

Функция the_post_thumbnail (которую вы можете найти в файле index.php в папке шаблона) при этом выглядит примерно так:

the_post_thumbnail("thumbnail"); // миниатюра (150 на 150) the_post_thumbnail("medium"); // средняя (300 на 300) the_post_thumbnail("large"); // большая (640 на 640) the_post_thumbnail("full"); // полная (без ограничений)

Если этот код похож на тот, который есть в файлах вашего шаблона, то вам придется вручную подбирать те размеры миниатюр, которые будут хорошо выглядеть в новом шаблоне блога. Но, как правило, если указаны относительные размеры, то автор шаблона рассчитывает на то, что размеры картинок установлены со значениями по умолчанию.

the_post_thumbnail(array(500,150)); // 500 на 150

Именно эти размеры вы и должны указать в настройках блога, а потом пересоздать картинки именно с этими размерами. Только в таком случае шаблон будет выглядеть именно так, как задумал его автор. Если вы не укажите эти размеры в настройках блога, то будет выведена картинка максимально близкая к указанным размерам. На деле это означает, что вместо этого:

Будет выведено вот это:

Пример, конечно, надуманный. Но, тем не менее, он наглядно показывает, что дизайнер мог иметь ввиду одно, а получается совсем другое только потому, что у вас миниатюры заданы не тех размеров, которые использовал автор шаблона. В данном случае записи вообще налезают друг на друга и портят дизайн напрочь. Многие шаблоны так и отбрасываются пользователями, которые просто не могут понять, что кривизна дизайна этих шаблонов вызвана неправильными размерами миниатюр, а вовсе не кривыми ручками их авторов.

Выводит html код картинки-миниатюры текущего поста.

Этот Тег шаблона должен использоваться внутри Цикла WordPress.

Дополнительный размер картинки, которую затем можно получить с помощью этой функции, можно создать через add_image_size() . По умолчанию доступны следующие размеры: thumbnail , medium , large , full , post-thumbnail .

✈ 1 раз = 0.001739с = очень медленно | 50000 раз = 6.79с = быстро | PHP 7.1.2, WP 4.7.3

Хуков нет.

Возвращает

null (ничего). Выводит на экран строку. Функция выводит на экран html код картинки или пустое значение (null), если картинки не существует.

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

Размер миниатюры, которую нужно получить. Может быть строкой: thumbnail , medium , large , full или массивом из двух элементов (ширина и высота картинки): array(32, 32) .

Когда указан массив, новая миниатюра с указанными размерами не создается. А WP ищет самый подходящий размер из тех что уже есть, берет его и просто указывает высоту и ширину в пикселях для тега IMG, чтобы уменьшить картинку. Т.е. картинка уменьшается только визуально.

По умолчанию: "post-thumbnail", размер который устанавливается для темы функцией set_post_thumbnail_size()

$attr(строка/массив)

Массив атрибутов, которые нужно добавить получаемому html тегу img .

Можно указать строкой: alt=альт&class=alignleft или массивом:

$default_attr = array("src" => $src, "class" => "attachment-$size", "alt" => trim(strip_tags($wp_postmeta->_wp_attachment_image_alt)),);

Атрибуты можно указывать любые.
По умолчанию: ""

Примеры

#1 Миниатюра как ссылка на пост

Пример 1: Используйте следующий код, чтобы сделать картинку-миниатюру ссылкой на пост. Пример для использования внутри Цикла WordPress:

" title="" >

#2: Сделаем миниатюру ссылкой на пост

Для этого используем хук post_thumbnail_html . В этом случае картинка будет ссылкой на пост сразу при вызове функции the_post_thumbnail(); . Код нужно добавлять в файл шаблона functions.php :

Add_filter("post_thumbnail_html", "my_post_image_html", 10, 3); function my_post_image_html($html, $post_id, $post_image_id) { $html = "" . $html . ""; return $html; }

#3 Миниатюра-ссылка на оригинальный размер

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

#4 Регистрация нового размера

С помощью add_image_size() можно зарегистрировать новый размер и затем получить его по ключу:

// допустим в functions.php мы регистрируем дополнительный размер так: add_image_size("spec_thumb", 360, 240, true); // далее в цикле выводим этот размер так: the_post_thumbnail("spec_thumb");

Продолжая тему wordpress миниатюр (thumbnail), хочу рассмотреть очень полезный плагин, который здорово может облегчить работу в некоторых ситуациях. Представьте, что вы вели блог несколько лет, скажем, начали где-то в 2009, а теперь хотите модернизировать внешний вид (шаблон), добавив современных опций на сайте, например, те же . Учитывая, что поддержка thumbnail в wordpress была введена значительно позже, картинки у вас, судя по всему, находятся внутри статьи прямо в тексте.

Получается, что у вас есть 2 варианта решения задачи — использовать либо вручную для каждой статьи создавать миниатюры. В первом случае появляется ощущение «вынужденного» и не совсем оптимального решения, второй и вовсе может заставить вас потратить 4-5 часов на возню с картинками. К счастью, недавно нашел еще и третий вариант — плагин Auto Post Thumbnail .

Данный модуль позволяет генерировать миниатюры (thumbnails) из первой картинки в тексте для любых постов блога или записей пользовательских типов. Если первое изображение не найдено, плагин автоматически продолжит поиск пока миниатюра не будет создана. В том случае, если для записи thumbnails уже установлено, просто ничего не произойдет. Короче говоря, принцип работы предельно прост и логичен. Кстати, если же по каким-то причинам вы хотите запретить формирование миниатюры для того или иного поста, тогда создаете произвольное поле (custom field) skip_post_thumb в соответствующей записи.

Установка плагина элементарна и выполняется как всенла: классический метод путем скачивания файлов модуля с официального сайта , его распаковки и загрузки на ФТП в директорию /wp-content/plugins/ с последующей активацией в разделе «Плагины» из админки; либо в пункте меню «Добавить плагин» ищите модуль по названию «Auto Post Thumbnail», где скачиваете и активируете его. Вот и все!

После установки у вас появится новый пункт меню — Auto Post Thumbnail , где имеется всего одна кнопка для начала работы — Generate Thumbnails. Там же указано примечание, о котором я говорил выше — перед запуском просят установить произвольные поля skip_post_thumb для постов, где не хотите ничего генерировать. Если таковых нет, просто кликаем по кнопке.

О ходе процесса обработки всех постов блога будете проинформированы с помощью специального статусбара. После завершения обработки увидите соответствующее уведомление. Похожая автогенерация миниатюр проводится при изменении , но там для этих целей используют Regenerate Thumbnails.

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

Первое, о чем могли подумать — нужно удалить картинки из постов. Но не спешите этого делать, а то получается опять лишняя работа — можно было изначально тогда не запускать плагин, а пройтись по всем статьям блога вручную меняя картинку на миниатюру. Дабы исправить эти ошибки, мы просто внесем некоторые правки в шаблон.

Во-первых, открываете файлы, которые отвечают за отображение списка постов блога — index.php, home.php либо archive.php, catagory.php, tag.php, где находим функцию отображения текста the_content (я упоминал о ней в посте про ) и меняем ее на:

Этот код отобразит краткий анонс поста блога без выделений и картинок исключительно в текстовом виде. Дальше в файле шаблона для отображения полного текста заметки (single.php) мы наоборот находим функцию миниатюр the_post_thumbnail и удаляем уже ее. Как правило, она выводится со следующим кодом:

"alignleft post_thumbnail")); } ?>

В итоге должно получится, что на всех страницах со списками новостей будут отображать миниатюры + краткий текст, а на полных записях — все то оформление и изображения, которые вы задаете в редакторе. Решение, я считаю, достаточно гибкое, а плагин Auto Post Thumbnail работает на отлично! Кстати, если вы покупаете сайты и приходится иногда переделывать откровенные ГС в более-менее красивые проекты, данный модуль точно пригодится — могу сказать по личному опыту. Хотя, в принципе, есть еще один вариант решения задачи — это но там больше кода и нужно в нем ориентироваться получше.

Convenient way to create post thumbnails on the fly without server overload.

The best alternative to scripts like «thumbnail.php».

Supports Multisite.

Применение

The plugin for developers firstly, because it don’t do anything after install. In order to the plugin begin to work, you need use one of plugin function in your theme or plugin. Example:

Using the code in the loop you will get ready thumbnail IMG tag. Plugin takes post thumbnail image or find first image in post content, resize it and create cache. Also creates custom field for the post with URL to original image. In simple words it cache all routine and in next page loads just take cache result.

You can make thumbs from custom URL, like this:

The URL_TO_IMG must be from local server: by default, plugin don’t work with external images, because of security. But you can set allowed hosts on settings page: Settings > Media .

All plugin functions:

// return thumb url URL echo kama_thumb_src($args, $src); // return thumb IMG tag echo kama_thumb_img($args, $src); // return thumb IMG tag wraped with . A link of A will leads to original image. echo kama_thumb_a_img($args, $src); // to get image width or height after thumb creation echo kama_thumb($optname); // ex: echo "";

$args (array/string)
Arguments to create thumb. Accepts:

• w | width
  (int) desired width.

  h | height
  (int) desired height.

  if parameters w and h not set, both of them became 100 — square thumb 100х100 px.

  notcrop
  (isset) if set crop parameter become false — crop=false .

  crop
  (isset) Control image cropping. By default always true .

  To disable cropping set here false/0/no/none or set parameter "notcrop" . Then image will not be cropped and will be created as small copy of original image by sizes settings of one side: width or height — here plugin select the smallest suitable side. So one side will be as it set in w or h and another side will be smaller then w or h .

  Cropping position

  Also, you can specify string: "top" , "bottom" , "left" , "right" or "center" and any other combinations of this strings glued with / . Ex: "right/bottom" . All this will set cropping area:

  • "left", "right" — horizontal side (w)
  • "top", "bottom" — vertical side (h)
  • "center" — for both sides (w and h)

  When only one value is set, the other will be by default. By default: "center/center" .

  // image will be reduced by height, and width will be cropped. // "right" means that right side of image will be shown and left side will be cut. kama_thumb_img("w=200 &h=400 &crop=right"); // image will be redused by width, and height will be cropped. // "top" means that the top of the image will be shown and bottom side will be cut. kama_thumb_img("w=400 &h=200 &crop=top"); // you can specify two side position at once, order doesn"t matter kama_thumb_img("w=400 &h=200 &crop=top/right");

  Reduce image by specified side

  In order to get not cropped proportionally rediced image by specified side: by width or height. You need specify only width or only height, then other side will be reduced proportional. And no cropping will appear here.

  Kama_thumb_img("w=200");

  So, width of our image will be 200, and height will be as it will…
  Теперь ширина всегда будет 200, а высота какая получится… And the picture will be always full, without cropping.

  q | quality
  (int) jpg compression quality (Default 85. max.100)

  stub_url
  (string) URL to no_photo image.

  alt
  (str) alt attr of img tag.

  title
  (str) title attr of img tag.

  class
  (str) class attr of img tag.

  style
  (str) style attr of img tag.

  attr
  (str) Allow to pass any attributes in IMG tag. String passes in IMG tag as it is, without escaping.

  a_class
  (str) class attr of A tag.

  a_style
  (str) style attr of A tag.

  a_attr
  (str) Allow to pass any attributes in A tag. String passes in A tag as it is, without escaping.

  no_stub
  (isset) don’t show picture stub if there is no picture. Return empty string.

  yes_stub
  (isset) show picture stub if global option in option disable stub showing, but we need it…

  post_id | post
  (int|WP_Post) post ID. It needs when use function not from the loop. If pass the parameter plugin will exactly knows which post to process. Parametr ‘post’ added in ver 2.1.

  attach_id
  (int) ID of wordpress attachment image. Also, you can set this parametr by pass attachment ID to ‘$src’ parament — second parametr of plugin functions: kama_thumb_img("h=200", 250) or kama_thumb_img("h=200 &attach_id=250")

  allow
  (str) Which hosts are allowed. This option sets globally in plugin setting, but if you need allow hosts only for the function call, specify allow hosts here. Set ‘any’ to allow to make thumbs from any site (host).

$src
(string) URL to any image. In this case plugin will not parse URL from post thumbnail/content/attachments.

If parameters passes as array second argument $src can be passed in this array, with key: src или url или link или img:

Echo kama_thumb_img(array("src" => "http://yousite.com/IMAGE_URL.jpg", "w" => 150, "h" => 100,));

Примечания