У вас в блоге не каждая запись с картинкой в начале? Но вы хотите на главной странице вывести анонсы с картинками.
Выход есть! Мы можем прописать функцию, которая будет извлекать из вашей записи первую попавшуюся картинку. Затем ее можно вывести рядом с анонсом.
Зачем вообще это? Чуток позже вы узнаете, в следующих записях эта функция используется для более широких целей.
Итак, сразу привожу код функции. Вы должны поместить функцию в файл functions.php, который находится в папке с вашей темой WordPress. Вот сам код функции:
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/04/103.jpg";
}
return $first_img;
}
Как вы видите в первой строке кода само название функции catch_that_image(), которая собственно и извлекает из поста первую картинку посредством регулярной записи. В 11-й строке указана картинка по умолчанию, это очень удобно, когда в записи нет фото (картинки), тогда можно вывести стандартную картинку на которой будет написано «Нет фото», например.
Сама функция вызывается вот так, это надо прописать в нужном месте в вашем wordpress шаблоне. А рядом можно прикрепить генерируемый анонс поста (как выводить анонс из записи в wordpress блоге).
<img src="<?php echo catch_that_image(); ?>" alt="" />
Дальше можно отредактировать отображение картинки с помощью CSS стилей, добавив в код выше класс стиля.
<img class="first-image" src="<?php echo catch_that_image(); ?>" alt="" />
Вот примерный CSS код стиля картинки:
.first-image {
display: block; //отображаем как блок
width: 200px; //ширина 200 пикселей
height: 150px; //высота 150 пикселей
border: 1px solid #bbb; // рамка серого цвета шириной в 1 пиксель
float: left; //выравнивание картинки с левого бока
}
Вот приблизительно так можно отобразить картинку, она отобразится слева от анонса благодаря свойству float.
Но в этом способе есть недостатки. Поэтому эта запись только начало, дальше мы научимся не только выводить первую картинку, но и обрезать ее до нужного размера, выводить похожие, популярные и самые комментируемые записи блога с картинками превьюшками.
h++p://arniwebdesign.com/kak-vyvesti-pervuyu-kartinku-iz-posta/
здравствуйте! подскажите как сделать что бы на главной в превью картинки были определенно заданного размера…а при открытии страницы..картинки были большего размера как и надо. Спасибо.
Или картинку для превью делайте через дополнительные поля, или через CSS можно уменьшить размер картинок…, но это долго объяснять…
Малаца батя грит харашо зделали. Помогло в проекте =)
Здраствуйте! вот в вырезке из первого кода
$first_img = «/wp-content/uploads/2010/04/103.jpg»;
говорится о том что картинки будут братся с папки uploads/ на сервере сайта.
А как прописать код что б картинка бралась из полной новости и уменьшалась до нужных мне размеров и распологалась по центру, между «title» и описанием Анонса?
Добавлю: что все мои картинки которые размещены в постах брались со стороних сайтов
Спосибо.
Jarold, «курите» поиск, изучайте основы WP и учитесь задавать вопросы правильно…
Очень помогло при реализации каталога. Автору большое спасибо.
Новость, хоть и давняя, помогла мне обуздать шаблон, — огромное Вам спасибо!
Теперь меня мучает другой вопрос: как сделать так, чтобы выхватывалась не первая картинка (первой картинкой у меня идёт буквица), а вторая (которая и есть настоящая картинка, подходящая для анонса)?
Буду признательна за совет или хотя бы за пинок в нужном направлении.. *_*
Возможно ли, при помощи этой функции, показать картинки следующего и предыдущего поста из этой же рубрики сайта?