Как вывести первую картинку из поста

У вас в блоге не каждая запись с картинкой в начале? Но вы хотите на главной странице вывести анонсы с картинками.

Выход есть! Мы можем прописать функцию, которая будет извлекать из вашей записи первую попавшуюся картинку. Затем ее можно вывести рядом с анонсом.

Зачем вообще это? Чуток позже вы узнаете, в следующих записях эта функция используется для более широких целей.

Итак, сразу привожу код функции. Вы должны поместить функцию в файл functions.php, который находится в папке с вашей темой wordpress. Вот сам код функции:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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];
 
// no image found display default image instead
if(empty($first_img)){
$first_img = "/wp-content/uploads/2010/03/103.jpg";
}
return $first_img;
}

Как вы видите в первой строке кода само название функции catch_that_image(), которая собственно и извлекает из поста первую картинку посредством регулярной записи. В 11-й строке указана картинка по умолчанию, это очень удобно, когда в записи нет фото (картинки), тогда можно вывести стандартную картинку на которой будет написано “Нет фото”, например.

Сама функция вызывается вот так, это надо прописать в нужном месте в вашем wordpress шаблоне. А рядом можно прикрепить  генерируемый анонс поста (как выводить анонс из записи в wordpress блоге).

1

<img src="<?php echo catch_that_image(); ?>" alt="" />

Дальше можно отредактировать отображение картинки с помощью CSS стилей, добавив в код выше класс стиля.

1

<img class="first-image" src="<?php echo catch_that_image(); ?>" alt="" />

Вот примерный CSS код стиля картинки:

1
2
3
4
5
6
7

.first-image {
 display: block; //отображаем как блок
 width: 200px; //ширина 200 пикселей
 height: 150px; //высота 150 пикселей
 border: 1px solid #bbb; // рамка серого цвета шириной в 1 пиксель
 float: left; //выравнивание картинки с левого бока
 }

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

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