Картинка в анонсе wordpress со своими настройкамиКак я уже писал в прошлых записях картинку в анонсе можно вывести несколькими способами – вывести картинку из дополнительного поля, или же как скриптом вывести первую картинку из полной записи.

Сегодня я расскажу вам как вывести эту первую картинку со своими настройками, то есть вывести ее так как вам этого захочется, любого размера и с любым CSS свойством. Для этого мы будем использовать маленький скрипт и стандартные возможности блогового движка wordpress.

Итак скрипт называется TimThumb, его написал сторонний разработчик и предназначен он для обрезания и кеширования картинок в постах на wordpress блогах.

Его удобно использовать во множестве случаев, например вывести первую картинку в анонсе с любым размером, например 200х150 пикселей, а хотите 120х70 пикселей, а хотите квадратную 150х150 пикселей, не проблема. Вывести картинку при помощи TimThumb можно как из дополнительного поля, так и первую картинку из поста, как вам угодно. Следующий случай использования – вы видите на моем seo блоге в сайдбаре два блока тизеров? Это случайные статьи и самые комментируемые статьи – я вывел их при помощи скрипта TimThumb.

TimThumb берет картинку обрезает до тех размеров, которые вы укажите, сохраняет обрезанную картинку в папку-кеш (чтобы постоянно не обрезать, первый раз он обрезает ее, а потом выводит уже обрезанную картинку) и выводин на страницах блога. Кстати я уже придумал как использовать этот скрипт на сайтах на DLE.

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

1
2
3
4

<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<img src="<?php bloginfo('stylesheet_directory'); ?>/timthumb.php?src=<?php echo get_post_meta($post->ID, 'minipic', true); ?>&amp;h=90&amp;w=120&amp;q=75&amp;zc=1"
width="120" height="90" class="mypic" alt="<?php the_title(); ?>" />
</a>

Как вы видите в первой строке тег ссылки, в котором в качестве title используется заголовок поста the_title(); далее указываем что скрипт TimThumb лежит в папке с темой функцией bloginfo(’stylesheet_directory’); get_post_meta(…) – функия вывод дополнительного поля, причем там используется название дополнительного поля из которого выводим картинку minipic, далее идут параметры обрезаемой картинки – высота 90 пикселей и ширина 120 пикселей, качество изображения 75%. Размеры картинки прописываем два раза, как для скрипта, так и в теге img, alt опять берем из заголовка поста.

Вы заметили что я в тег img добавил класс mypic, теперь посредством CSS мы сможем изменить свойства изображаемой картинки, например добавить выравнивание по левому краю или обвести черной рамкой.

Теперь сделаю тоже самое только при помощи функции, которая определит первую картинку в посте и преподнесет ее скрипту TimThumb. Вот как это делается

1
2
3
4

<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<img src="<?php bloginfo('stylesheet_directory'); ?>/timthumb.php?src=<?php echo catch_that_image(); ?>&amp;h=90&amp;w=120&amp;q=75&amp;zc=1"
width="120" height="90" alt="<?php the_title(); ?>" />
</a>

Только не забывайте откуда взялась функция catch_that_image(); – прочитайте тут чтобы освежить память – как скриптом вывести первую картинку из полной записи.

Ну в принципе и все, в следующих постах напишу как вывести блоки с самыми комментируемыми и случайными новостями при помощи этого скрипта TimThumb.