Мар

Совмещение миниатюр и скрипта первой картинки поста

Сегодня хочу поделиться небольшим хаком (методом) для отображения картинок постов блога на главной и страницах архивов. Реализовать это можно по разному. Не будем рассматривать вариант, когда текст поста в цикле выводится через функцию the_content() — тогда все картинки в начале статьи отображаются в блоге по умолчанию. Есть еще 2 ситуации — во-первых, это, конечно, миниатюры для постов (если начинаете новый проект, рекомендую использовать именно его) и, во-вторых, специальный скрипт для автоматического получения первой картинки поста. Второй вариант полезен для возрастных блогов со множеством статей, для которых нужно украсить страницы архивов и главную. Предлагаю эти 2 варианта совместить.

Собственно с данной ситуацией я столкнулся при усовершенствовании блога Вебдванольные заметки. Ему уже несколько лет, поэтому просматривать все посты (более 500) и делать для каждого из них красивую миниатюру, либо расставлять в тексте ссылку more — слишком неэффективный вариант. Поэтому я воспользовался скриптом для получения первой картинки поста. Для этого в файл 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 = "";
  }
  return $first_img;
}

Дальше в файл отображения архивов категорий archive.php или index.php поместим что-то вроде:

<div class="post-image">
<div style="border:1px solid #4a4a4a; height: 112px; padding: 2px;">
<div class="tumbr" style="border: 1px solid #333; width: 230px;height: 165px;background: url(<?php if(catch_that_image() != '') { echo catch_that_image(); } else { ?>http://www.web2me.ru/files/no-image.gif<?php } ?>) 0 0 no-repeat;"> </div>
</div>        
</div>

Для post-image можете добавить обтекание по краю float: left. После данных правок страница категорий стала выглядеть следующим образом:

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

Я предлагаю решить задачу добавив для подобных (отображаемых криво) постов поддержку миниатюр. Итак, что нужно сделать:

1. Заходим в файл functions.php и размещаем там в любом месте код активации миниатюр (если его нет):

if ( function_exists( 'add_theme_support' ) ) add_theme_support( 'post-thumbnails' );

2. Дальше открываем archive.php или index.php, находим место где был код предыдущего скрипта, описанного выше, и преобразуем его в следующий вид:

<div class="post-image">
<?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) { 
the_post_thumbnail(array(230,1500), array('class' => 'post_thumbnail')); } 
else { ?>
<div class="tumbr" style="border: 1px solid #333; width: 230px;height: 165px;background: url(<?php if(catch_that_image() != '') { echo catch_that_image(); } else { ?>http://www.web2me.ru/files/no-image.gif<?php } ?>) 0 0 no-repeat;"></div>
<?php } ?>
</div>

С помощью этого хака было добавлено условие — если у поста есть миниатюра, тогда она будет показана. Иначе система найдет и покажет первую встречную картинку в статье. Если же и это не поможет, тогда выводится «пустое» изображение (у меня находится здесь — http://www.web2me.ru/files/no-image.gif, для вашего проекта поставьте другой путь).

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

Согласитесь смотрится получше предыдущей. При этом данная миниатюра никак «не испортит» статью при полном ее отображении — там картинки выводятся как и прежде. Превьюшки будут только на страницах архивов категорий, тегов, а также главной — в общем в какие файлы шаблона добавите там и отобразится.

UPDATE 9.02.2015. Данное решение можно назвать «слегка топорным», но мне не хотелось заниматься установкой миниатюр для прошлых постов (которых на сайте немало). Чуть позже я нашел плагин Auto Post Thumbnail позволяющий быстро просмотреть прошлые посты и установить им соответствующие миниатюры. Мне кажется лучше пойти несколько иным путем, нежели описанном в посте — сначала автоматически создаете миниатюры, а потом выводите их обычным способом в шаблоне.

P.S. Сейчас многие оптимизаторы решили участвовать в конкурсе SEOCAFEинфошность — своего рода проверка имеющихся знаний по продвижению.

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

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

Загрузка...

Категории: Хаки и секреты;

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

комментария 23 к статье “Совмещение миниатюр и скрипта первой картинки поста”

mixer 13.03.2012
а не проще использовать перед
the_content();
функцию
the_post_thumbnail();

http://codex.wordpress.org/Function_Reference/the_post_thumbnail
Stiler 14.03.2012
Здравствуйте!
У меня вопрос: как сделать так, чтобы выводилась не верхняя часть картинки, а середина из нее?
Спасибо!
Сергей 14.03.2012
К этим вариант у меня есть ещё одна идея, которая решит все проблемы и все картинки красиво выведет, но я её пока не реализовал.

Нужно написать функцию:
1.Проверяет есть ли миниатюра у поста, если есть — выводит;
2. Если миниатюры нет, то из первой картинки в посте создает миниатюру и соответственно её выводит;
3. Если нет миниатюры и нет картинок в посте, то выводит заготовленную картинку «Изображение отсутствует».

Возможно вам удастся это реализовать.
Tod 14.03.2012
mixer, как я уже сказал в статье, в блоге у меня уже было 500 записей, для каждого из них рисовать миниатюру — это день убить, если не больше. Функцию the_post_thumbnail() я как раз и использую, но в сочетании с другим методом.
Сергей, фактически в посте именно об этом и рассказывается)) Просто во втором пункте у меня выводится картина, а не «создается миниатюра», не знаю можно ли в wordpress вообще такое сделать.
Stiler, поскольку скриптом картинка выводится через свойство background, то возможно можно как-то с ним «поэкспериментировать», задавая смещение по 50%. Я лично не пробовал.
Stiler 30.03.2012
Tod, А не подскажете как это можно сделать?
Tod 02.04.2012
Stiler, ну это в css свойство background-position, более точно не подскажу, т.к не пробовал сам)
Антоха 02.04.2012
Спасибо! Скоро, думаю пригодится.
Алексей 20.06.2012
Вообще круто, спасибо….
MrGoodNews 17.07.2012
Благодарю за статью, помогла решить поставленные задачи :) Дополню только один момент:
Если нужно вывести не любую часть картинки через background, а нужно её полное отображение, то стоит добавить в строку

код «background-size: 100%;»
(Вариации на тему w3schools.com/cssref/css3_pr_background-size.asp)
Tod 18.07.2012
MrGoodNews, спасибо за дополнение данного решения.
nokiacoolru 10.08.2012
Спасибо за интересный пост. Скажите, а можно как-то сделать, чтобы в случае, если нет ни миниатюры, ни единственной картинки — показывалась не «картинка-заглушка» (как у вас http://www.web2me.ru/files/no-image.gif ) — а вообще ничего не показывалось. Можно ли так сделать?
Сергей 17.09.2013
подскажите где вставить этот код ?

<div class="tumbr" style="border: 1px solid #333; width: 230px;height: 165px;background: url(http://www.web2me.ru/files/no-image.gif) 0 0 no-repeat;»>

Уже все перепробовал в своем файле когд у меня следующий.

<?php
if (have_posts()){

global $posts;
$post = $posts[0];

ob_start();

if (is_category()) {

echo '’. single_cat_title( », false ) . »;

echo category_description();

} elseif( is_tag() ) {

echo ». single_tag_title(», false) . »;

} elseif( is_day() ) {

echo ». sprintf(__(‘Архивы за день: %s’, THEME_NS), get_the_date()) . »;

} elseif( is_month() ) {

echo ». sprintf(__(‘Архивы за месяц: %s’, THEME_NS), get_the_date(‘F Y’)) . »;

} elseif( is_year() ) {

echo ». sprintf(__(‘Архивы за год: %s’, THEME_NS), get_the_date(‘Y’)) . »;

} elseif( is_author() ) {

the_post();
echo theme_get_avatar(array(‘id’ => get_the_author_meta(‘user_email’)));
echo ». get_the_author() . »;
$desc = get_the_author_meta(‘description’);
if ($desc) echo » . $desc . »;
rewind_posts();

} elseif( isset($_GET[‘paged’]) && !empty($_GET[‘paged’]) ) {

echo ». __(‘Архивы блога’, THEME_NS) . »;

}
theme_post_wrapper(array(‘content’ => ob_get_clean(), ‘class’ => ‘breadcrumbs’));

/* Display navigation to next/previous pages when applicable */
if (theme_get_option(‘theme_top_posts_navigation’)) {
theme_page_navigation();
}

/* Start the Loop */
while (have_posts()) {
the_post();
get_template_part(‘content’, get_post_format());
}

/* Display navigation to next/previous pages when applicable */
if (theme_get_option(‘theme_bottom_posts_navigation’)) {
theme_page_navigation();
}

} else {

theme_404_content();

}
?>

<?php wp_get_footer();
Tod 17.09.2013
Сергей, если я правильно понял, то вам нужно искать файл шаблона с «content» в названии… это новый тип шаблонов с кучей файлов. Для отображения постов вызывается другой файл шаблона get_template_part(‘content’, get_post_format());
Татьяна 01.03.2014
Здравствуйте. У меня в анонсе записи сейчас стоит миниатюра, когда открываю запись — она же открывается, только чуть-чуть большего размера. Когда я в запись добавляю большую картинку помимо миниатюры, то окрыв запись — там 2 картинки: и миниатюра и большая — все вместе. Скажите, пожалуйста, а как сделать, чтобы в анонсе картинка была как миниатюра, а открыв запись — эта же миниатюрная картинка увеличивалась до полного размера или до указанного размера. Спасибо
Tod 03.03.2014
Татьяна, можно просто убрать отображение миниатюры на странице с полной новостью (single.php), таким образом сможете добавить в пост картинку любого размера и куда угодно.
Игорь 08.02.2015
Здравствуйте, при вводе кода в functions.php, выдает такую ошибку:

Fatal error: Cannot redeclare catch_that_image() (previously declared in Z:\home\mysite.local\www\wp-content\plugins\featured-post-with-thumbnail\index.php:59) in Z:\home\mysite.local\www\wp-content\themes\mythem\functions.php on line 39
Помогите разобраться пожалуйста, и еще, картинки к постам расположены не в библиотеке, а в папках в корне сайта, имеет ли это значение. Заранее благодарен.
Tod 09.02.2015
Игорь, сложно что-то подсказать, я так понимаю скрипт конфликтует с плагином featured post with thumbnail. Вообще это было достаточно «топорное решение» потому как сайт давно наполнялся и не хотелось заниматься установкой миниатюр для прошлых постов. Это уже потом я нашел плагин Auto Post Thumbnail который позволяет выполнить задачу за минуту. Поэтому я советую создать миниатюры для всех постов, а потом выводить их обычным способом в шаблоне.
theNN 07.04.2016
Здравствуйте.

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

<div class="loop-thumbnail-overlay" style="»>
Tod 11.04.2016
theNN, картинка отображается, как правило, рядом с функцией вывод контента поста — the_content или the_excerpt. Ищите их в archive.php или index.php или category.php.
Анатолий 06.10.2017
Здравствуйте! Для каждого поста вставляю миниатюры размером 290 х 290, созданные вручную в фотошопе — так «кривые» картинки не выскакивают. В последующих постах собирался вставить миниатюры размером 450 х 290 для улучшения внешнего вида страницы, но все равно появляется искаженная миниатюра 290 х 290 (сплюснутая). В Мозилле запрашиваю информацию об этой картинке (миниатюре) и получаю ответ: Размеры: 450px × 290px (в масштабе 290px × 290px). Значит где-то осталось правило для вывода превьюшки 290 х 290. Установка размера миниатюры 450 х 290 в аминке (настройки медиафайлы) ведет к растяжению миниатюр по всем статьям сайта. Есть ли решение этой задачи? Спасибо.
P. S. Вопросы коммерческого характера, если таковые возникнут, можно решить в приватной беседе.
Tod 06.10.2017
Анатолий, я бы поискал в файлах шаблона функцию the_post_thumbnail, возможно, в ней действительно жестко задано выводить 290х290 картинки, и любые настройки в админке в таком случае не сыграют роль в отображении. Советую использоват утилиту WinGrep (если у вас винда). Если проблема не в этом, то тут нужно изучить макет, «на словах» мне сложно сориентироваться.
Валерий 22.11.2018
Здравствуйте. Подскажите пожалуйста в моей теме миниатюры выводятся с библиотеки а в пост после захода на статью картинки в полный рост нет. Какой мне выполнить пункт . Заранее спасибо
Tod 23.11.2018
Валерий, если я правильно понял суть вопроса, вам просто нужно вручную добавлять в текст статьи картинки, которые вы хотите там видеть — это максимально простой и универсальный вариант.