Дек
31
41

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

дизайн манияСреди последних тенденций в шаблонах 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)
Загрузка...

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

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

  • 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 на официальном сайте, там есть полезная информация.

Оставить комментарий

(предыдущая статья)

Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!

Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:

Поиск:
Последние посты
Лучшее в категории

Облако тегов
Скажи свое мнение!

В чем основные плюсы Wordpress?

Посмотреть результаты

Загрузка ... Загрузка ...
Друзья проекта
Последние новости