Как без плагинов вывести похожие записи с картинками и анонсами | часть 1

Насколько я понимаю, многие интересуются выводом похожих записей с изображениями. Звучат даже упреки в отсутствии точной информации по этой теме. Судя по количеству просмотров поста Как вывести похожие записи | contextual related post и количеству комментариев к этому посту, многих интересует именно вывод картинок из похожих постов. Могу сказать, что кто ищет – тот всегда найдет, и лично я для себя сделал такой код, который выводит последние записи с картинками и кратким содержимым, обобщив множество материалов на эту тему, опубликованных в этом блоге.

Для начала нужно научить блог выводить картинки из постов. В принципе, сделать это не сложно, используя стандартные функции отображения миниатюр. Однако я обнаружил для себя не очень красивую работу этих функций: картинки выводятся непропорционально. Если в посте была опубликована прямоугольная картинка, то она при выводе в другом месте будет показана, как квадрат. И даже если в размерах миниатюры указать не квадратные, а прямоугольные данные, то картинка все равно может отобразиться искаженной, ведь не во всех изображениях блога мы используем одни и те же пропорции между шириной и высотой. Можно, конечно, использовать дополнительные поля, в которых прописывать заранее и отдельно подготовленные миниатюры определенных размеров для каждого поста, но мне это не удобно. Я не хочу тратить время на создание дополнительных картинок, да и размер хостинга не у всех безграничный, чтобы вмещать дополнительные файлы, по сути дела не нужные.

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

Чтобы использовать пропорциональный вывод, добавьте в файл functions.php такой код:

function catch_that_image() {
  global $post, $posts;
  $first_img = '';
  ob_start();
  ob_end_clean();
  $output = preg_match_all('/<img>/i', $post->post_content, $matches);
  $first_img = $matches [1] [0];
  if(empty($first_img)) {
    $first_img = "http://n-wp.com/files/default.jpg"; // Ссылка на заглушку
  }
  return $first_img;
} 

Этот код позволяет выводить изображения заданной ширины пропорционально. Обратите в нем внимание на ссылку на заглушку – это изображение, которое будет выводиться, если в посте нет вообще никаких картинок. В этой строчке вы должны прописать собственный адрес на картинку по умолчанию.
Теперь осталось только вывести список похожих записей, вставив в него по одному изображению из этих записей. Как это сделать, я напишу во второй части публикации.