Дек
31
22

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

дизайн манияСреди последних тенденций в шаблонах 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, поэтому, если у вас последняя версия системы – обратите на нее внимание.

Внимание! Если у вас есть свой блог и желание помочь проекту развиваться – предлагаю обмен ссылками. Подробнее здесь. Всех с наступающим Новым Годом! Счастья и удачи побольше.

P.S. Иногда в жизни любого человека возникает вопрос или проблемы поиска новой работы. Именно в таких случаях вам может пригодится работа в Екатеринбурге от прямых работодателей – множество объявлений и вакансий ждут своих «будущих» сотрудников.

А еще можно опубликовать статью в своем блоге:
Опубликовать в twitter.com        
рейтинг Оцените статью:
Ужасная статьяНичего интересногоТак себеНормальноХорошоКлассный постВ закладки!
(голосов - 4, средний балл: 4,00 из 7)
Loading ... Loading ...

категория Категории: Оптимизация; Хаки и секреты;
теги Теги: , , , , , .
Еще интересно почитать:
Заработай на своих сайтах!
заработок в GoGetLinks

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

  • 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 без плагинов с использованием категорий блога а также некоторый хак для вывода миниатюр связных постов. Тогда можно будет придумать код для решения вашей задачи.

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

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

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

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

Заработай в GoGetLinks
Последние посты
 
Категории
Страницы
Архив
Полезное
Облако тегов
Лучшее в категории
Клуб читателей блога
Скажи свое мнение!

Где вы берете Wordpress шаблоны?

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

Loading ... Loading ...
Друзья проекта
Интернет новости
Последние новости
Все новости интернета »