Вывод картинок в вордпресс. Автоматическое создание и вывод миниатюр.

Кода будет много.
Но разбирать детально я его не буду. Дело в том, что у меня слегка выключился мозг от перенапряжения. На то, чтобы поделиться используемыми функциями, я силы нашел, но тратить еще пару-тройку часов на разбор и оптимизацию кода я не могу.

Этот пост заключительная часть трилогии о настройке вывода записей на главной, в рубриках и архивах.
1) WordPress. Как расположить посты в несколько колонок.
2) Вордпресс. Автоматическое обрезание поста.

Итак, часто бывает так, что попадается шаблон без вывода миниатюр, или с выводом, но большинство постов их не имеют, или еще какая-то ситуация, препятствующая выводу картинок к постам на главной, в рубриках или архивах. Меня эта ситуация никогда не печалит, потому, что у меня есть отработанные решения. Итак нам нужны будут файл функций functions.php и файл вывода. Это обычно index.php для главной, arhive.php для архивов, category.php для рубрик. Если какого-то из файлов нет, то обычно его заменяет все тот же index.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)){ //Defines a default image
    $first_img = "/images/default.jpg";
  }
  return $first_img;
}
 
 
 
function aq_resize( $url, $width, $height = null, $crop = null, $single = true ) {
 
	//validate inputs
	if(!$url OR !$width ) return false;
 
	//define upload path & dir
	$upload_info = wp_upload_dir();
	$upload_dir = $upload_info['basedir'];
	$upload_url = $upload_info['baseurl'];
 
	//check if $img_url is local
	if(strpos( $url, home_url() ) === false) return false;
 
	//define path of image
	$rel_path = str_replace( $upload_url, '', $url);
	$img_path = $upload_dir . $rel_path;
 
	//check if img path exists, and is an image indeed
	if( !file_exists($img_path) OR !getimagesize($img_path) ) return false;
 
	//get image info
	$info = pathinfo($img_path);
	$ext = $info['extension'];
	list($orig_w,$orig_h) = getimagesize($img_path);
 
	//get image size after cropping
	$dims = image_resize_dimensions($orig_w, $orig_h, $width, $height, $crop);
	$dst_w = $dims[4];
	$dst_h = $dims[5];
 
	//use this to check if cropped image already exists, so we can return that instead
	$suffix = "{$dst_w}x{$dst_h}";
	$dst_rel_path = str_replace( '.'.$ext, '', $rel_path);
	$destfilename = "{$upload_dir}{$dst_rel_path}-{$suffix}.{$ext}";
 
	//if orig size is smaller
	if($width >= $orig_w) {
 
		if(!$dst_h) :
			//can't resize, so return original url
			$img_url = $url;
			$dst_w = $orig_w;
			$dst_h = $orig_h;
 
		else :
			//else check if cache exists
			if(file_exists($destfilename) && getimagesize($destfilename)) {
				$img_url = "{$upload_url}{$dst_rel_path}-{$suffix}.{$ext}";
			} 
			//else resize and return the new resized image url
			else {
				$resized_img_path = image_resize( $img_path, $width, $height, $crop );
				$resized_rel_path = str_replace( $upload_dir, '', $resized_img_path);
				$img_url = $upload_url . $resized_rel_path;
			}
 
		endif;
 
	}
	//else check if cache exists
	elseif(file_exists($destfilename) && getimagesize($destfilename)) {
		$img_url = "{$upload_url}{$dst_rel_path}-{$suffix}.{$ext}";
	} 
	//else, we resize the image and return the new resized image url
	else {
		$resized_img_path = image_resize( $img_path, $width, $height, $crop );
		$resized_rel_path = str_replace( $upload_dir, '', $resized_img_path);
		$img_url = $upload_url . $resized_rel_path;
	}
 
	//return the output
	if($single) {
		//str return
		$image = $img_url;
	} else {
		//array return
		$image = array (
			0 => $img_url,
			1 => $dst_w,
			2 => $dst_h
		);
	}
 
	return $image;
}

Первая функция получает первую картинку поста. Ее в общем и будем выводить, ведь обычно именно в начале заглавная картинка. Вторая функция создает уменьшенную копию картинки.

Переходим к использованию. Тут надо разбираться.

Для начала нам надо найти куда втыкать нашу картинку.
Убеждаемся, что мы открыли нужный файл, ищем в нем вывод текста поста. Это может быть функция the_content, the_excerpt или что-то более экзотическое. Выше функции обычно вывод заголовка поста. Там обычно есть функции the_permalink(); the_title(); и все это в окружении тега h2 (собственно используемом в заголовках постов).

Выбрали место куда втыкаем картинку и…

1) У вас ЕСТЬ миниатюры к каждому посту.
На самом деле с миниатюрами много всяких функций и процедур и обычно шаблон сам понимает, что он делает. Но если вам подходил стандартный вариант, предоставляемый вашим шаблоном, то вы бы не читали этот пост, поэтому думаю мой фрагмент будет полезен.

Используем код

<?php 
$thumb = get_post_thumbnail_id();
$img_url = wp_get_attachment_url( $thumb,'full' ); //get full URL to image (use "large" or "medium" if the images too big)
$image = aq_resize( $img_url, 333);
if($image) : ?> <a href="<?php the_permalink(); ?>"><img src="<?php echo $image ?>"/></a> <?php endif; ?>

333 это ширина картинки, высота подстраивается под ширину.
Чтобы сделать фиксированную высоту можно писать
$image = aq_resize( $img_url, 333,222, true);
Правда картинка будет слегка порезанной, если пропорции изменятся.

2) Миниатюр нет.

$img_url = catch_that_image();
$image = aq_resize( $img_url, 333);
if($image) : ?> <a href="<?php the_permalink(); ?>"><img src="<?php echo $image ?>"/></a> <?php endif; ?>

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

3) Без внутреннего ресайза, самый раздолбайский вариант.

<img src="<?php echo catch_that_image()?>" width="333"/></a>

___
ВАЖНО!
Используя подобный вывод картинки (любой из пунктов) бывает не лишним сменить вывод текста с the_content на the_excerpt, потому, что если в посте будет картинка до тега more, то это может испортить всю задумку. Более подробно о выводе текста.


Автор: Elsper.ru


VN:F [1.9.14_1148]
Rating: 5.5/10 (2 votes cast)
Вывод картинок в вордпресс. Автоматическое создание и вывод миниатюр., 5.5 out of 10 based on 2 ratings

12 thoughts on “Вывод картинок в вордпресс. Автоматическое создание и вывод миниатюр.

  1. Здравствуйте. Очень помогли, использую ваш второй вариант вывода. Но как сделать выравнивание по левой стороне с обтеканием картинки справа?

  2. Очень помог ваш второй способ. НО! Как можно сделать наследование атрибута альт родителя (картинки из поста), а то валидатор ругается, что на странице обзора статей все рисунке без этого атрибута???

  3. Здравствуйте.

    Для обтекания есть параметр float
    В другой записи http://elsper.ru/2013/02/wordpress-kak-raspolozhit-posty-v-neskolko-kolonok/
    о обтекании чуть подробней.

    Можно попробовать картинку просто взять в div с float:left и после дива обязательно закрыть обтекание свойством clear: both.

    По альту. Хорошее замечание, я и не обращал внимание.

    Пока могу только подсказать направления решения.
    1) Использовать вместо альта заголовок статьи, получая его с помощью функции the_title();
    2) Сделать аналог функции catch_that_image().
    Сейчас она получает адрес первой картинки, а можно переделать, чтобы получала альт. Нужно только поменять $first_img = «/images/default.jpg»; на что-то типа $first_img = «»;
    И разбираться с запросом в регулярном выражении.
    Ну и конечно переделать переменные и название функции, но это думаю итак очевидно.

  4. Здравствуйте еще раз. По-поводу того атрибута альт. Он создает проблему лишь валидности страницы, больше думаю ни на что не влияет.
    Поэтому самым простым способом будет добавить alt=»» в код вывода. Вот так (последняя строчка кода):

    href=»»><img src="» alt=»»/>

    Валидатор доволени, и для СЕО думаю лучше, чем the_title(); использовать.

    Просто этот ваш пост мне очень помог, то не мог не написать, как я решил проблему.

  5. Наоборот, думаю, тайтл для сео как раз подойдет.

    Я наверное слишком поверхностно объяснил. Вместо

    $img_url = catch_that_image();
    $image = aq_resize( $img_url, 333);
    if($image) : ?> <a href=" <?php the_permalink(); ?>" ><img src=" <?php echo $image ?>" /></a> <?php endif; ?>

    Можно написать

    $img_url = catch_that_image();
    $image = aq_resize( $img_url, 333);
    if($image) : ?> <a href=" <?php the_permalink(); ?>" ><img alt=" <? the_title(); ?>" src=" <?php echo $image ?>" /></a> <?php endif; ?>

  6. Нет, почему же? Вы все доходчиво объяснили. Я пробовал перед этим и ваш вариант. Но подумал, что это какая-то «переоптимизация». Ведь часто пост называется длинным названием, иногда далеко не точно характеризуя то, что на изображении. Поэтому это не совсем правильный атрибут альт к рисунку, ИМХО. Я вот думаю над вариантом просто » ну приблизительно (со знаками мб ошибся), ну всмысле один и тот же альт ко всем изображениям.

    А то может я не так был вставил тогда этот ваш вариант, но валидатору он не понравился.

  7. Вообщем я досмотрелся и понял, что там хз что за код написал, поэтому не так вы и поняли. Вот, что я сейчас поставил:
    $img_url = catch_that_image();
    $image = aq_resize( $img_url, 130, 100);
    if($image) : ?> <a href="»><img src="» alt=»»/>

    При вставке вашего варианта валидатору не нравиться. Если альт прописать на том месте где у меня, но взять вывод тайтла, то все нормально. Вот так тогда:
    $img_url = catch_that_image();
    $image = aq_resize( $img_url, 130, 100);
    if($image) : ?> <a href="»><img src="» alt=»»/>

    Почему так правильнее, я не знаю, ибо не обладаю особыми знаниями. А вы, вижу хорошо знаете php)) Можете написать примитивный скрипт к Хуманэмулятору?))

  8. Извинение за такой флуд, что-то оно не то выводит)) Вообщем у моем варианте после альт= кавычки меняет первые на другого образца)) И там во втором коде alt=»», просто с моим расположением.
    Но, наверное, пока-что поставлю ваш вариант с выводом тайтла, вам доверяю больше)

  9. Здравствуйте.
    Давно использую Ваш код практически на всех сайтах. Но после перезда на https работает только последний «раздолбайский» вариант. Можете подсказать, в чем проблема?

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Спoнcopcкиe ссылки