Получение первой картинки с поста в WordPress
В последнее время вы могли заметить, что многие блоги используют картинки-анонсы к своим постам — это хороший способ заинтересовать пользователя материалом, так как большинство пользователей просто пробегаются по заголовкам и, возможно, удачно подобранная картинка-анонс сподвигнет пользователя к прочтению всего материала.
Существует множество способов создания превью к постам, в частности, в последних версиях WordPress появилась собственная функция создания миниатюр, о которой мы поговорим чуть позже. В этой же статье мы рассмотрим простой способ получения первой картинки с поста, которую в дальнейшем можно использовать в анонсах.
Открываем файл functions.php и добавляем следующий код:
// Получение первой картинки с поста
function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];
// Если изображение отсутствует, то выводим изображение по умолчанию (указать путь к изображению)
if(empty($first_img)){
$first_img = "/images/default.jpg";
}
return $first_img;
}
Приведенная выше функция выводит первую картинку, которая находится в вашем посте, если картинки не существует, то показывается изображение по умолчанию, путь к которому необходимо указать, либо добавить в папку /images/ вашей темы изображение в формате .jpg и с именем default.
Не забываем сохранить файл functions.php и переходим к шаблону, в котором мы хотим выводить изображение, предположим index.php и вставляем функцию, отвечающую за показ картинки:
<?php echo catch_that_image() ?>
Функция должна находится в пределах основного цикла, выводящего запись в шаблоне, она покажет только ссылку на изображение, которую нужно поместить в тег <img>:
<img src="<?php echo catch_that_image() ?>"/>
Теперь пойдем немного дальше и создадим «умную» картинку анонс, для этого добавим атрибут alt с названием поста и сделаем картинку ссылкой на сам пост, проделанные операции добавят дополнительный вес нашему топику с точки зрения поисковой оптимизации:
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"> <img src="<?php echo catch_that_image() ?>" alt="<?php the_title(); ?>"/> </a>
Все хорошо, но единственная загвоздка — картинки отображаются таким же размером как и в посте, что не очень впишется в любой дизайн. Есть несколько решений данной задачи, самое элементарное мы рассмотрим сразу, а второе, более продвинутое и очень удобное в следующей статье. Чтобы изменить изображения, мы можем воспользоваться масштабированием картинок с помощью стандартных атрибутов высоты и ширины:
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"> <img src="<?php echo catch_that_image() ?>" alt="<?php the_title(); ?>" width="550"/> </a>
Мы задали изображению ширину в 550px (можно так же задать в %), высота будет уменьшена пропорционально теперь изображение может вписаться в дизайн сайта, с такой же структурой как и у меня, но есть и отрицательные стороны этого метода: изображение масштабируется браузером, и при загрузке анонсов пользователь загрузит исходное изображение. Второй способ заключается в автоматическом ресайзе изображений с помощью PHP-скрипта, о котором я напишу в следующей статье.
Спасибо громаднейшее!!! Давно уже мучилась с выводом картинок (отображалась только ссылка на изображение).. У меня уже чуть депрессия из-за этой проблемы не случилась.. А тут так чётко и подробно всё описано – сразу же разобралась, в чём дело. Какое же облегчение! Ещё раз спасибо!
=) а как отменить вывод картинки которая в посте, у меня получается уменьшенная копия и после сама громаданя картинка, и ещё как вообще уменьшить картинку автоматически. что бы пользователь использующий тему не писал каждый раз?
Вставьте код, выводящий картинку там, где она нужна, чтобы картинка не показывалась в основном цикле два раза, то по идее нужно прятать вторую картинку за ссылку читать далее, а уменьшаю я картинку с помощью скрипта TimThumb PHP.
Конечно, это банальное и очевидное решение, скорее у вас сложнее ситуация, опишите подробнее или ссылку киньте, я собирал на WordPress полноценную галерею, перепробовал много различных способов, думаю, смогу вам помочь.
цикл взял со след поста (Скрипт TimThumb PHP). ошибка та же. скорее всего я чтото упустил, а что не пойму. не так хорошо понимаю WP.
Скинь свой файл index.php мне на почту.
А как добавить анонс?Т.е. отрывок из самой записи, с нужным количеством слов (знаков).
Замени
< ?php the_content(); ?>на< ?php the_excerpt(); ?>в том месте, где нужно выводить часть записи, а дальше через хак в functions.php:function new_excerpt_length($length) { return 30; } add_filter('excerpt_length', 'new_excerpt_length');30 – это кол-во слов выводимых в анонсе.
У меня не выводилась картинка /images/default.jpg оказалось надо прописать полный путь wp-content/themes/ваша тема/images/default.jpg (Для тех, кто не знает еще PHP (я тоже его не знаю). )
А как можно поправить эту регулярку, чтоб в массив попадали все изображения? И чтобы потом можно было вывести случайное из них?
Я навёл справки и получилось вот что:
function random_post_image() {
global $post, $posts;
global $more;
$more = 1; // отключил обрезку more и теперь выводится весь пост
$images = '';
ob_start();
ob_end_clean();
$output = preg_match_all('//i', $post->post_content, $images); // заношу совпадения в массив $images с помощью вашей регулярки
$number_of_images = count($images); // узнаю сколько нашлось в посте изображений
$random_number = rand(0, $number_of_images); // делаю рандом от 0 до кол-ва изображений
$result = $images[1][$random_number]; // заношу в конечную переменную? подозреваю что проблема здесь, но пойму какие индексы к массиву проставить чтобы он вывел то что я хочу... с мануалом по функции не справился...
echo $result; // возвращаю
}
но эта конструкция не работает, и возвращает мне постоянно не то что нужно. Буду крайне признателен если поможете
жаль нету продолжения статьи….вообще странно, что такой нужной фишки как превью с картинкой для постов не реализовано в модуле…
Функция миниатюр к постам появилась с версии 2.9.