Get the post thumbnail url

Всем привет! Сегодня на seo-mayak.com урок на тему: миниатюра записи в анонсе WordPress. Заодно мы разберем работу функции the_post_thumbnail() и поговорим о размерах миниатюр.

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

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

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

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

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

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

Прежде всего необходимо определится, какой размер миниатюры мы хотим вывести в анонс. Давайте разберемся, какие размеры нам предлагает WordPress по-умолчанию и как их можно изменить. Поехали!

Размеры изображений WordPress

В настройках WordPress ( Настройки -> Медиафайлы ) по умолчанию заданны следующие размеры:

Размер миниатюры — 150х150 пикселей;
Средний размер — 300х300 пикселей;
Крупный размер — 640х640 пикселей;
Исходный размер не задается.

Каждому указанному размеру WordPress присваивает обозначение или название, как угодно:

150х150 — thumbnail;
300х300 — medium;
640х640 — large;
Исходный размер — full.

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

Здесь важно понимать, что если вы уже загружали на сайт n-количество изображений и при этом не меняли настройки, то миниатюры будут созданы исходя из размеров по умолчанию. Поэтому не стоит удивляться, если миниатюры будут выводится в обрезанном виде.

В данной ситуации есть два решения.

Решение №1. Выставить нужные пропорции в настройках и перезалить все изображения, тем самым избавив сервер от лишней нагрузки, связанной с необходимостью менять размеры картинок, так сказать, на лету. Это решение, я считаю, будет самым правильным.

Решение №2. Можно обойтись без перезаливки изображений, тем самым забив на рекомендации PageSpeed и изменить размеры в самой функции.

Итак, самое время познакомить Вас с функцией вывода изображений, которая называется the_post_thumbnail().

Функция the_post_thumbnail()

Скажу сразу, функция the_post_thumbnail() — это тег шаблона, который работает только внутри цикла WordPress.

На заметку! Функция the_post_thumbnail() работает на основе get_the_post_thumbnail().

Единственное отличие функции the_post_thumbnail() от get_the_post_thumbnail() в том, что в ней нельзя указать ID записи, в качестве параметра, так как функция всегда берет миниатюру с текущего поста в цикле.

Функция the_post_thumbnail() может принимать один или два параметра. Первым параметром всегда идет размер изображения, например:

<?php the_post_thumbnail('medium'); ?>  

На данном примере, в качестве первого и единственного параметра, я указал средний размер миниатюры, который был задан в настройках WordPress.

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

<?php the_post_thumbnail(array(50,50)); ?>

Где 50,50 — новые размеры для миниатюры.

Вторым параметром функция может принимать CSS класс, например:

<?php the_post_thumbnail('medium', array('class' => 'miniature')); ?>  

В файле style.css, для класса .miniature, можно прописать следующие стили:

.miniature{   background: #D2D2D2; /* задний фон */   border: 1px solid #888888; /* рамка */   border-radius: 8px; /* закругление углов */   float: left; /* Выравнивание по левому краю */   height: 181px; /* Высота изображения */   width: 250px; /* Ширина изображения */   margin-bottom: 5px; /* Внешний отступ снизу */   margin-right: 15px; /* Внешний отступ справа */   padding: 5px; /* Внутренние отступы */   }  

Вы наверное поняли, что стили, которые я привел выше, были применены на моем блоге и конечно Вы их можете изменить на свое усмотрение. Для работы со стилями советую пользоваться расширением Firebug.

Но прописывать свой CSS класс в функции вовсе не обязательно, так как всем миниатюрам, созданными функцией get_the_post_thumbnail(), WordPress присваивает общий класс .wp-post-image, но кроме того, миниатюры получают отдельный класс, в зависимости от их размера:

.attachment-thumbnail — размер миниатюры;
.attachment-medium — средний размер;
.attachment-large — крупный размер;
.attachment-full — исходный размер.

Итак, с функцией и ее параметрами мы немного разобрались, осталось выяснить, как с помощью the_post_thumbnail() миниатюра записи выводится в анонс.

seo-mayak.com

One of the WordPress theme features which allow the developers to add support when they are using an image for post or article is called featured image. It is also called post thumbnail by some WordPress functions and template tags. The Codex page of WordPress featuring representative images also addresses this feature as post thumbnails instead of the featured image. When you have WordPress post thumbnail feature you may ask the reason for getting WordPress feature image URL. Developers need the URL of the image if they want it as a background image instead of just a static image.

Use the built-in hooks of the WordPress to get the feature image URL by adding the code below. With the help of some codes, you can make changes in the feature image URL and how it should appear in the background of the theme.

wp_get_attachment_url( $id );

1. For WordPress theme

   Post Thumbnail is a theme feature for the WordPress. Many themes used by the developers usually support the post thumbnail or featured image by default. If you are ambiguous about your theme compatibility, you can check by going to the post editor. Featured image option usually appears in the meta box when you create a new post.
   A simple snippet when added to the theme’s functions .php file can help to insert the featured image. Developers can then configure how to handle the uploaded images to WordPress. They have the option to choose the thumbnail size, styling and the ability to switch on and off the display of featured images.

2. How to add post thumbnail

   When you start a new post, you can find the set featured image link. Click on it and you can find a metabox inside the media library. The user can now upload stock images from the gallery in the computer or images saved in the library. After selecting the required image, simply click on the set featured image located at the bottom. Images appear quite different from what they look on your theme. It depends on the theme features and how it handles photos.

   For example, take a look at online magazine posts. They tend to add small thumbnail images next to summaries of the post. But when you write a single post article, the featured image is fuller and larger. It is up to the choice of the content developer to alter the settings as to how to display the featured images.




3. Adding post thumbnail for unsupportive themes

   Even though most of the themes support the featured image, there are some themes which are not compatible with such features. A little coding knowledge will help you to tweak your theme and makes it post thumbnail-friendly. The ‘post-thumbnails’ should be embedded in the added theme support code line of the theme functions .php file.

   add_theme_support( ‘post-thumbnails’ );

   This code is sufficient for the pages and posts to add the featured image to them. However, this code will only enable the theme to add post thumbnail feature but not necessarily display it in the WordPress theme.

   If you are keen on displaying the featured image in your theme, you need to start editing your templates and add a new code. Add this below code inside the post loop in which you need the feature image to appear.

   Once you add the feature image in the post, you need to customize its size suitable for the article or post. You can add a code with set width and height parameters to customize the post thumbnail. Add the code given below in the functions .php file of the theme.

   set_post_thumbnail_size( width, height);

   As mentioned earlier if you need to introduce different size thumbnails for different articles, add this below code for the single-post thumbnail.

   add_image_size( ‘single-post-thumbnail’, 590, 180 );

   With the help of coding, you can add any image and customize its size as per the need.

Featured images generally set the mood of the contents of the post or page. Add unique custom header images in your post to make it look interesting. Depending on the place where you need the feature image to be displayed, you need to insert the image appropriately in that position. For example, if your post contains no images and if you insert a featured image then the picture appears on the top of the post. If you want to add an image relevant to the post, then you need to add the featured image inside the post.

In one such case when you do not add a featured image to the post, the image embedded in the post will serve as the thumbnail and it is placed beside the post. Most of the time, feature images position and size and how they appear depends on the theme you have chosen.

gracethemes.com

Фильтр post_thumbnail_size

Фильтр позволяет задать размер миниатюр, используемых на блоге (везде на блоге).

$size

(строка|массив) — аналогичен параметру $size из самой функции.

В следующем примере мы устанавливаем размер для всех миниатюр на блоге medium:

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

с параметром $size равным thumbnail заменяем размер на medium, остальные размеры миниатюр не трогаем:

Фильтр post_thumbnail_html

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

Количество параметров данного фильтра не может не радовать, это означает, что мы можем творить с возвращаемым HTML-кодом всё, что нам угодно.

$html

(строка) HTML-код, возвращаемый функцией по умолчанию,

$post_id

(целое число) ID поста, миниатюру которого нужно получить,

$post_thumbnail_id

(целое число) ID миниатюры,

$size

(строка|массив) размер миниатюры,

$attr

(массив) массив HTML-атрибутов, которые были заданы при вызове функции, если не заданы, то пустой массив;

А теперь несколько интересных примеров.

Пример 1. Автоматическое проставление ссылок на пост

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

Круто, да? А главное — всё очень просто.

Пример 2. Возвращаем только URL миниатюры

Ещё одна полезная вещь, которую можно сделать при помощи фильтра post_thumbnail_html

. Допустим, нам не нужен весь HTML-код с тегом <img>, допустим, нам нужен только URL. В таком случае:

misha.blog

Функция wp_get_attachment_image_src

Используется для получения информации о картинках-вложениях. Ее синтаксис следующий.

Где $attachment_id — ID вложения, $size — требуемый размер картинки (thumbnail, medium, large, full и др.), $icon — должно ли изображение использоваться как иконка.

После выполнения функция возвращает 4 параметра:

1. ссылку на картинку (тот самый thumbnail url, что мы ищем);
2. ширину изображения;
3. высоту изображения;
4. true|false значение в зависимости от того представляет ли файл вложения сгенерированную картинку или полноразмерную, загруженную пользователем.

Кроме того, если функция не нашла соответствующее изображение, она возвращает значение false.

Самый простой пример ее использования:

Здесь считывается картинка-вложение с ID = 3. Если она найдена, то ссылка, а также ее размеры вставляются в простой HTML код вывода картинки через img.

Итого. Получить в wordpress ссылку на миниатюру можно с помощью функции wp_get_attachment_image_src, которая кроме thumbnail url передает также ширину/высоту изображения.

wordpressinside.ru