Вебмастерица.ру|Блог вебмастера женского пола

В посте про вывод превью средствами ВП ко мне обратился с таким вопросом Казбек: “… а если я уже использую картинки хранящиеся у меня на Web альбоме Picassa и они уже встроены в посты.. можно ли как нибудь их вывести теперь в анонсы этих постов” (орфография авторская, если что).

Так вот, существует еще один способ вывести превью автоматически. Когда-то я использовала именно его. Скажу сразу – способ не мой, я нашла его где-то в инете… Поскольку там рерайт на рерайте, автора метода найти не смогла. Если кто знает – укажите.

Как действует этот способ вывода превью?

Выводится и ресайзится (т.е., изменяется её размер) первая картинка из поста.

Чем удобно?
1. Если подгружены изображения с другого сайта, как у Казбека, то они ничтоже сумняшеся будут выводиться и в превью. Если использовать стандартный метод – нужно загружать фото на сайт.

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

Чем неудобно?
1. Фото, как правило, имеют разное соотношение сторон. Скажем, у одной фото 200х300 пикселей ширина и высота, а у второй – 300х300 пикселей. Поэтому, если мы просто отресайзим эти фото и укажем ширину-высоту, то их “перекорежит”. Я думаю, все видели сайты с такими превью… Это выглядит ужасно. Например, так:

А нормальная превью должна выглядеть так:

2. С другой стороны, если мы указываем только ширину картинки, чтоб её как раз не “корежило”, то тогда высота картинок будет разная, а это в анонсах некрасиво. Говорю, исходя из личного опыта. Когда 2 анонса рядом, и у одной превью 150х100, а у второй – 150х200, то это не айс. Опять же, многие дизайны к черту летят.

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

Кстати, ВП при заливании может создать 3 дополнительных картинки, их размеры можно найти через админку Настройки => Медиафайлы, там будет вот такое:

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

Но возвращаемся к самому способу. Я его выложу, а вы уж решайте сами, использовать или нет.

Способ вывода превью в WordPress без использования встроенных миниатюр

Итак, в файл functions.php нам надо добавить код (я всегда добавляю в самый конец файла):

<?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)){ //изображение по умолчанию
    $first_img = "/images/default.jpg";
  }
  return $first_img;
}
?>

После чего вот такая строка:

<?php echo catch_that_image(); ?>

будет выводить урл первой картинки в посте. И можно для вывода превью, соответственно, использовать, например, такой код:

<img title="<?php the_title(); ?>" src="<?php echo catch_that_image(); ?>" alt="<?php the_title(); ?>" width="150" />

Думаю, понятно, что тут задается:
width=”150″ – ширина картинки в пикселях
src – где лежит картинка, путь к ней (source)
class=”alignleft” – задан класс в css, как правило, в ВП-темах есть такой класс, делает картинку обтекаемой текстом
alt, title – ну, это все знают. описания картинок.

Надеюсь, поможет.

ЗЫ. PHP я только начала изучать, так что по самой сути кода сказать могу немного.