Дек

Получение и отображение первой картинки поста

Среди последних тенденций в шаблонах wordpress за 2009 год большую популярность обрели так называемые «журнальные темы» (magazine). С их помощью можно придать блогу вид газеты или онлайн СМИ. Мне лично такие дизайны очень нравятся, так как позволяют на одной странице собрать множество источников информации из разделов и максимально точно дать представление о том или ином проекте. То есть ты заходишь на главную и видишь последние публикации в категориях, понимаешь о чем здесь можно почитать – это более наглядно чем вывод последних 3-5 постов блога.

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

<div class="post-image">
<?php
$id =$post->ID;
$the_content =$wpdb->get_var("SELECT post_content FROM $wpdb->posts WHERE ID = $id");
$pattern = '!<img.*?src="(.*?)"!';
preg_match_all($pattern, $the_content, $matches);
$image_src = $matches['1'][0];
?>
<div class="tumbr" style="border: 1px solid #333; width: 140px;height: 110px;background: url(<?php if($image_src != '') { echo $image_src; } else { ?><?php bloginfo('template_directory'); ?>/images/no-image.gif<?php } ?>) 0 0 no-repeat;"> </div>

В итоге с главной и страниц категорий получалось до 10-15 лишних запросов к базе данных, что, конечно, при посещаемости в 2-3к уников давало о себе знать.

Пришлось искать альтернативное решение – и оно нашлось! Итак, заходим в файл 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)){ //Defines a default image
    $first_img = "/images/default.jpg";
  }
  return $first_img;
}

После этого сохраняем и закрываем файлик. В результате вызова данной функции вы получите ссылку на первое изображение из поста. Если такового не найдется, то будет выводиться картинка по адресу images/default.jpg (или можете задать свой).

Теперь для вывода ссылки на картинку нужно всего лишь вызвать функцию:

<?php echo catch_that_image() ?>

Но помните, что выводится лишь путь, который нужно вставить уже в HTML код для тега IMG! Например, вот так:

<div class="tumbr" style="border: 1px solid #333; width: 140px;height: 110px;background: url(<?php if(catch_that_image() != '') { echo catch_that_image(); } else { ?>http://design-mania.ru/wp-content/themes/Hamasaki-wordpress-theme/images/no-image.gif<?php } ?>) 0 0 no-repeat;"> </div>

В общем, с помощью данного хака получилось сократить количество обращений к базе и сделать код более компактным. Надеюсь, совет вам пригодится – вроде штука нужная. Следует также добавить, что для отображения картинки из поста в WordPress 2.9 добавлена специальная функция post_thumbnail, поэтому, если у вас последняя версия системы — обратите на нее внимание.

Оцените статью:

(голосов - 9, средний балл: 5,44 из 7)

Загрузка...

Категории: Оптимизация; Хаки и секреты;

Теги: magazine темы, php, миниатюры постов, пишем функцию для wp, полезное для блога, правка шаблона.

комментарий 41 к статье “Получение и отображение первой картинки поста”

1 2 Далее →

Eremkin 01.01.2010
да, хороший способ, сам им пользуюсь. ТОлько вот один вопрос у меня…
Как сделать так, чтобы картинка выводилась уменьшенно-обрезанной дновременно?
Я испольую такой код:
<img src="" alt="" style="margin:0px 10px 5px 0px;display:block;float:left;width:120px; height:85px;border:1px solid #000;"/>
Tod 01.01.2010
Eremkin, у меня изображение идет в виде фона и получается, что выводится лишь его верхняя левая часть которая попадает в диапазов width: 140px; height: 110px; — см. первый пример кода в посте. Можешь попробовать у себя уменьшать по ширине, например, а потом картинку вставлять в качестве фона и получится что она обрежется по высоте.
Eremkin 02.01.2010
Как сделать с фоном разобрался, посмотрел код ДизайнМании. Спасибо.

Можешь попробовать у себя уменьшать по ширине, например, а потом картинку вставлять в качестве фона и получится что она обрежется по высоте

Ширину как понял, нужно в functions.php задавать, чтобы в background отдавалось уже уменьшенное изображение? Или я что-то не допонимаю…
Tod 02.01.2010
Eremkin, да нет, просто в img задаешь фиксированную ширину и оно по идее должно картинку ужимать:) Я особо в этом направлении не «копал», просто вывожу через background. Хотя опять же в 2.9 можно превью для поста вручную задавать, завтра напишу про это как и что.
Eremkin 02.01.2010
К примеру.
У нас есть картинка в посте, 400*300 px
Нужно, чтобы на главной выводилась картинка 200*100px
Уменьшаем картинку (сжимаем)
<img src="» alt=»» style=»width:200px;»/>
в рез-те получаем картинку размером 200*150px
так вот теперь эту уменьшенную картинку нужно обрезать до размера 200*100px. Вот я и не пойму, как её обрезать…
При использовании такого кода:
<div class="mainpost-img" style="background: transparent url( ) no-repeat scroll 0pt 0pt; z-index: 2; margin: 5px; float: left; width: 200px; height: 100px; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;»> — будет обрезаться исходная картинка, которая размером 400*300
Eremkin 02.01.2010
Сорри, поправка кода:
код1:
<img src="" alt="" style="width:200px; "/>
Код2:
<div class="mainpost-img" style="background: transparent url( ) no-repeat scroll 0pt 0pt; z-index: 2; margin: 5px; float: left; width: 200px; height: 200px; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;">
sup3rstar 08.01.2010
Я конечно извиняюсь, Саш объясни где вызывать функцию echo catch_that_image()
Tod 08.01.2010
sup3rstar, в шаблоне блога там где выводится заголовок поста, его текст, категория и теги.
Малый 13.01.2010
Прикрутил. Работает. Давно хотел сделать главную повеселее.
Пока просто ограничил размеры превью
width=»80″ height=»80″
Благодарю.
RodgerFox 20.01.2010
хм… странно функцию кидаю где выводится новости, но после этого у меня пишит ошибку
Call to undefined function catch_that_image() in …../wp-content/themes/i_tt/index.php on line 14
begenote 20.01.2010
Как получить первое изображение с галереи а не из поста? И еще, все настраивают размер превью с помощью css, а если сразу прикрутить скрипт timthumb.php?
Byzik 28.01.2010
Пост пригодился) Как раз искал информацию по этой теме…
RodgerFox 29.01.2010
кто нить подскажет что делать с проблеммой? или автору похуй?
Беркут 18.02.2010
Реально полезнй пост. Давно искал, все никак не было решения. Все выводят картинки через тхумбанал :) Спасибо, Саша, за дельный совет.
Taurus 24.03.2010
Да. надо заюзать сие творение.
surger 18.05.2010
Название функции не post_thumbnail, а the_post_thumbnail
rusya 23.06.2010
Спасибо,нужно будет испробывать…
VRS 18.08.2010
Спасибо. Вашим способом вывела картинки в слайдер.
daffin 27.10.2010
Спасибо, то что нужно было!
ban!as 08.02.2011
Спасибо
matara 14.07.2011
Как бы подкрутить функцию, чтобы выводило имг поста из определенной категории? Допустим, необходим вывод трех первых картинок из разных категорий. Собственно, очень важно при этом извлекать путь к записи.
Tod 14.07.2011
matara, для этого могу посоветовать почитать статью похожие статьи в wordpress без плагинов с использованием категорий блога а также некоторый хак для вывода миниатюр связных постов. Тогда можно будет придумать код для решения вашей задачи.
Елена 05.08.2012
Эх, не работает. Возможности вставлять миниатюры нет, а в ответ на ваш код появляется сообщение «function catch_that_image() { global $post, $posts; $first_img = »; ob_start(); ob_end_clean(); $output = preg_match_all(‘//i’, $post->post_content, $matches); $first_img = $matches [1] [0]; if(empty($first_img)){ //Defines a default image $first_img = «/images/default.jpg»; } return $first_img; }
Warning: Cannot modify header information — headers already sent by (output started at /home/vokrug/public_html/ekbgrad.ru/wp-content/themes/keko/functions.php:1009) in /home/vokrug/public_html/ekbgrad.ru/wp-admin/theme-editor.php on line 103″
Tod 06.08.2012
Елена, сложно что-то посоветовать, я бы проверил еще правильно ли вставлены все коды. А потом попытался бы добавить код попроще дабы проверить работает ли вызов функций вообще без ошибок и поискал бы что в данном коде вордпресс не нравится.
Stallone 06.09.2012
А зачем эта безсмыслица в коде?
ob_start();
ob_end_clean();
Tod 06.09.2012
Stallone, я находил ког в сети именно в таком виде, поэтому и привел его в посте.. что делают эти функции точно не помню, нужно попробовать будет ли работать хак без нет, если да, то можно смело удалять.
Андрей 22.10.2012
День добрый! А не знает ли кто случаем, как можно вывести все изображения из поста или определённое заданное количество? Буду оч признателен за совет)
Tod 22.10.2012
Андрей, ну, я так понимаю, можно попробовать считать в переменной $matches не 1-ую картинку, а поставить 2-3-ью заменив соответствующий параметр. Может поискать какой-то плагин, просто не ясно зачем именно вам все это нужно.
Андрей 12.12.2014
Здравствуй, подскажи как проделать такую же операцию, только с миниатюрой. Нужно вставить код который выводит ссылку на миниатюру.

Примерно вот так:

<meta property="og:image" content="» />

Вместо выводится ссылка на картинку, а нужно на миниатюру, заранее спасибо
Tod 13.12.2014
Андрей, к сожалению, код не отобразился, можете глянуть посты про миниатюры — может там что-то найдете. Можно также посмотреть описание функции the_post_thumbnail на официальном сайте, там есть полезная информация.