Как вывести первое изображение из поста, а если его нет, то показать случайно выбранную картинку-заглушку

Как вывести первое изображение из поста, а если его нет, то показать случайно выбранную картинку-заглушку | n-wp.ru
Пример кода, выводящего первую картинку из поста. Если же картинок в посте нет, то будет отображаться одна из заглушек, выбранная случайным образом.
👍 Научим бесплатно правильно создавать сайты на WordPress. Подробнее →

Как вывести первое изображение из поста, а если его нет, то показать случайно выбранную картинку-заглушкуДля того, чтобы выводить изображения из постов в анонсах (например, на главной странице), можно использовать встроенную функцию, создающую миниатюры. Это хороший, универсальный способ, который подходит к использованию в 95% блогов. Но всегда есть 5%, в которых он не очень удобен. Объясню, почему. Взять, например, блог, в котором картинки используются не в каждом посте. Тогда миниатюру в каждую запись придется добавлять вручную – уже лишняя трата времени. Или же взять, к примеру, блог, в котором используются очень большие картинки в постах, а в анонсах на главной странице отображаются маленькие миниатюры. Если создать маленькую миниатюру большой картинки, то теряется детализация, и иногда становится совершенно непонятно, что изображено на миниатюре. В таких блогах лучше использовать специальную функцию, которая выводит не созданную миниатюру, а первое изображение.

Для вывода первого изображения записи создадим специальную функцию, автоматически находящую изображение и выводящую код ссылки на него. Стоп – можете возразить вы – ну а если в посте нет изображения? Это резонное замечание, и специально для такого случая функция будет выводить заранее приготовленную нейтральную картинку-заглушку. Если таких постов будет много, то в них будет выводится одна и та же картинка-заглушка, что не очень красиво. Поэтому сделаем так, чтобы выводились каждый раз разные картинки-заглушки.

Создайте в корневой папке вашего блога папку images, и положите туда любое количество картинок. Чтобы картинки выглядели красиво, не забудьте, что они должны быть пропорциональными и одинакового размера (например 300 на 200). Переименуйте все картинки по порядку, например так: default-thumb-01.png, default-thumb-02.png, default-thumb-03.png, default-thumb-04.png, и так далее.

Откройте файл 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)){
$images = array(
'default-thumb-01.png',
'default-thumb-02.png',
'default-thumb-03.png',
'default-thumb-04.png',
'default-thumb-05.png',
'default-thumb-06.png',
'default-thumb-07.png',
'default-thumb-08.png',
'default-thumb-09.png',
'default-thumb-10.png',
'default-thumb-11.png',
'default-thumb-12.png',
'default-thumb-13.png',
'default-thumb-14.png',
'default-thumb-15.png',
'default-thumb-16.png',
'default-thumb-17.png',
'default-thumb-18.png',
'default-thumb-19.png',
'default-thumb-20.png',
'default-thumb-21.png',
'default-thumb-22.png',
'default-thumb-23.png',
'default-thumb-24.png',
'default-thumb-25.png',
'default-thumb-26.png',
'default-thumb-27.png',
'default-thumb-28.png',
'default-thumb-29.png',
'default-thumb-30.png',
'default-thumb-31.png',
'default-thumb-32.png',
'default-thumb-33.png',
'default-thumb-34.png',
'default-thumb-35.png',
'default-thumb-36.png',
'default-thumb-37.png',
'default-thumb-38.png',
'default-thumb-39.png',
'default-thumb-40.png',
'default-thumb-41.png',
'default-thumb-42.png',
'default-thumb-43.png',
'default-thumb-44.png',
'default-thumb-45.png',
'default-thumb-46.png',
'default-thumb-47.png',
'default-thumb-48.png',
'default-thumb-49.png',
'default-thumb-50.png',
'default-thumb-51.png',
'default-thumb-52.png',
'default-thumb-53.png',
'default-thumb-54.png',
'default-thumb-55.png',
'default-thumb-56.png',
'default-thumb-57.png',
'default-thumb-58.png',
'default-thumb-59.png',
'default-thumb-60.png',
'default-thumb-61.png',
'default-thumb-62.png',
'default-thumb-63.png',
'default-thumb-64.png',
'default-thumb-65.png',
'default-thumb-66.png',
);
$image = $images[array_rand($images)];
$first_img = "/images/" . $image . "";
}
return $first_img;
}

В том месте шаблона, где вы хотите вывести изображение из поста, используйте код:

"/>

Функция выведет картинку из поста без изменений. Эта картинка будет являтся одновременно и ссылкой на пост. Если же в посте нет картинок, то функция выведет одну из картинок-заглушек. Чем больше таких картинок-заглушек вы приготовите, тем меньше вероятность, что встретятся две одинаковые подряд. Резонно, что на ширину или высоту выводимой картинки дизайном блога накладываются ограничения, поэтому изменить картинку в размерах можно заранее, указав максимальную высоту или масимальную ширину:

Пример кода, выводящего картинку, пропорционально уменьшая ее до ширины в 300 точек:

"/>

При перезагрузке страницы в анонсах постов с изображениями будут выводится первая картинка из поста, а в анонсах постов без изображений каждый раз будет отображаться новая картинка-заглушка.

Создай свой первый сайт на WordPress

tiaurus

Автор n-wp.ru — блога о WordPress для новичков.

Оцените автора
Добавить комментарий