Сегодня я расскажу вам как вывести эту первую картинку со своими настройками, то есть вывести ее так как вам этого захочется, любого размера и с любым CSS свойством. Для этого мы будем использовать маленький скрипт и стандартные возможности блогового движка Wordpress.
Итак скрипт называется TimThumb, его написал сторонний разработчик и предназначен он для обрезания и кеширования картинок в постах на wordpress блогах.
Его удобно использовать во множестве случаев, например вывести первую картинку в анонсе с любым размером, например 200х150 пикселей, а хотите 120х70 пикселей, а хотите квадратную 150х150 пикселей, не проблема. Вывести картинку при помощи TimThumb можно как из дополнительного поля, так и первую картинку из поста, как вам угодно.
TimThumb берет картинку, обрезает ее до тех размеров, которые вы укажите, сохраняет обрезанную картинку в папку-кеш (чтобы постоянно не обрезать, первый раз он обрезает ее, а потом выводит уже обрезанную картинку) и выводин на страницах блога. Кстати я уже придумал как использовать этот скрипт на сайтах на DLE.
В общем приступаем действовать. Вот код вывода картинки из дополнительного поля, я разбил ег она несколько строк, но это можно сделать одной строкой
PHP:
<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); ?>&h=90&w=120&q=75&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. Вот как это делается
PHP:
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<img src="<?php bloginfo('stylesheet_directory'); ?>/timthumb.php?src=<?php echo catch_that_image(); ?>&h=90&w=120&q=75&zc=1"
width="120" height="90" alt="<?php the_title(); ?>" />
</a>
