Работаем с изображениями на блоге. Функции и хаки Volume#1

Всем привет! Функции, хаки, фильтры очень и очень нужны при разработке любого проекта с помощью WordPress, поэтому я и решил начать вести эту рубрику. В первом volume Вы узнаете о том как: отключить показ изображений записей на главной странице, предотвратить сжатие изображений, автоматически удалить ширину и высоту изображений, добавить атрибуты изображению, вывести миниатюру к записи, вывести миниатюру статьи в RSS ленте и как вывести несколько изображений в анонсе записи.

Отключаем показ изображений постов на главной странице

Очень полезная штука), допустим на главной странице Вы выводите анонсы записей, но не с помощью «цитаты», а с помощью тега «read more» и допустим перед этим тегом в теле записи идет картинка, а на главной мы не хотим ее видеть. Вот тут на помощь приходит еще один волшебный фильтр WordPress, который нужно поместить в файл functions.php Вашей темы:

add_filter('the_content','htm_image_content_filter',11);

function htm_image_content_filter($content){
	if (is_home() || is_front_page()){
		$content = preg_replace("/<img[^>]+\>/i", "", $content);
	}
	return $content;
}

Предотвращаем компрессию(сжатие) изображений

По умолчанию WordPress проводит над изображениями компрессию(сжатие) и заметно ухудшает качество картинок, чтобы предотвратить эту ситуацию необходимо просто добавить следующий фильтр в functions.php Вашей темы:

add_filter( 'jpeg_quality', function($arg){ return 100; } );

И есть по поводу компрессии одно замечание: если версия php Вашего хостинга меньше 5.3, то приведенный хак будет вызывать ошибку, в таком случае попробуйте вместо него заюзать такой код:

add_filter( 'jpeg_quality', create_function( '', 'return 100;' ) );

У меня заработала только вторая версия.

Автоматически удаляем высоту и ширину изображений

Данный финт в основном стоит использовать на сайтах с отзычивым(адаптивным) дизайном, когда ширина изображения задается с помощью каскадных таблиц стилей, причем явное указывание высоты изображения, может привести к «кривому» отображению картинок. Поэтому, чтобы удалить явные атрибуты ширины и высоты нужно добавить следующий код в файл functions.php Вашей темы:

add_filter( 'post_thumbnail_html', 'htm_remove_width_attribute', 10 );
add_filter( 'image_send_to_editor', 'htm_remove_width_attribute', 10 );

function htm_remove_width_attribute($html) {
	$html = preg_replace( '/(width|height)="\d*"\s/', "", $html );
	return $html;
}

Больше всего мне не понравилось, то что этот хак работает только для публикации новых картинок, а это печально, хотя если очень хочется, то можно воспользоваться jQuery:

<script type="text/javascript">
jQuery(document).ready(function(){
	jQuery('#main').find('img').removeAttr('width');
	jQuery('#main').find('img').removeAttr('height');
});
</script>

Добавляем атрибуты ко всем изображениям блога

Довольно распростанненная задача, когда возникает необходимость добавить атрибуты к изображениям, например все изображения в записях открываются в модальных окнах, а скрипт Вы писали сами и его логика опирается на атрибут rel или name. Естественно, если Вы имеете на блоге или сайте много записей, то дописывать в каждое изображение эти атрибуты реально напряжно. Выход есть)) добавляем следующий код в functions.php:

add_filter('the_content', 'htm_add_attr');

function htm_add_attr($content) {
	global $post;
	$pattern ="/<a(.*?)href=('|\")(.*?).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i";
	$replacement = '<a$1href=$2$3.$4$5 rel="lightbox" name="lightbox" title="'.$post->post_title.'"$6>';
	$content = preg_replace($pattern, $replacement, $content);
	return $content;
}

htm_add_attr — название нашей функции, префикс htm_ можете поменять на тот который Вам нравится.

Выводим миниатюру к записи

Миниатюры к записям на страницах архивов, категорий, меток, поиска или главной очень красиво смотрятся и, так сказать, они иногда нужны заказчикам (на своем блоге я эту штуку включил, но не пользуюсь). Так вот в стандартных темах Вы наверняка видели при написании статьи такой виджет как «Миниатюра к записи», чтобы заполучить этот виджет для своей темы, нужно добавить в файл functions.php поддержку миниатюр:

add_theme_support( 'post-thumbnails' );

а чтобы вывести миниатюру, в шаблоны categor.php, index.php, archive.php, tag.php, search.php в главный цикл loop нужно добавить следующий код:

<?php if (function_exists ('has_post_thumbnail') && has_post_thumbnail () ) {
	the_post_thumbnail (array (150,150)); 
} ?>

во второй строке в параметре array(150,150) выставляются размеры миниатюры, ставьте их на свое усмотрение. Плюс на разных страницах шаблона можно указать разные размеры изображений. Миниатюры теперь Ваши).

Выводим миниатюру к записи в RSS ленте

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

function htm_rss_post_thumbnail($content) {
	global $post;
	if(has_post_thumbnail($post->ID)) {
		$content = '<p>' . get_the_post_thumbnail($post->ID) .
		'</p>' . get_the_content();
	}
	return $content;
}

add_filter('the_excerpt_rss', 'htm_rss_post_thumbnail');
add_filter('the_content_feed', 'htm_rss_post_thumbnail');

Выводим несколько изображений в анонсе записи

Совсем недавно подкинулась задача, в новом проекте была рубрика галерея, и заказчик хотел чтобы на главной выводился список постов из этой рубрики, и не просто так выводился, а хитро) Нужно было вывести название записи, ее анонс и 5 фоток из записи.

Так вот, если у Вас возникнет такая задача, то модифицированный loop (главный цикл) WordPress я привожу, имейте ввиду, что этот код желательно поместить в отдельный шаблон, чтобы не мешать другим записям блога

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<div class="post">
/* Заголовок записи */
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

/* Текстовый анонс */
<?php the_excerpt(); ?>

/* Выводим последние 5 картинок из записи */
<div class="img_array">
<?php
	$args = array(
		'order'          => 'ASC',
		'orderby'        => 'menu_order',
		'post_type'      => 'attachment',
		'post_parent'    => $post->ID,
		'post_mime_type' => 'image',
		'post_status'    => null,
		'numberposts'    => 5
	);
	$attachments = get_posts($args);
	if ($attachments) {
		foreach ($attachments as $attachment) {
			echo wp_get_attachment_link($attachment->ID, array(70,70), false, false);
		}
	}
?>	
</div>

<?php endwhile; endif; ?>

* Примечание #1: в параметре ‘numberposts’ => 5, Вы можете указать сколько изображений выводить.

* Примечание #2: этот код отличная альтернатива миниатюрам к записям.

Заключение

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