Мар
13
19

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

хак для изображенийСегодня хочу поделиться небольшим хаком (методом) для отображения картинок постов блога на главной и страницах архивов. Реализовать это можно по разному. Не будем рассматривать вариант, когда текст поста в цикле выводится через функцию 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)
Loading ... Loading ...

категория Категории: Хаки и секреты;
теги Теги: , , , , , , .
Заработай на сайте

Комментариев - 19 к статье “Совмещение миниатюр и скрипта первой картинки поста”

  • 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.

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


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

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

Последние посты
Облако тегов
Лучшее в категории
Скажи свое мнение!

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

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

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