Расширяем возможности плагина Auto Highslide

Наверное данная статья актуальна только для тех, кто использует либо захочет использовать совершенно замечательный плагин Auto Highslide, созданный китайскими братьями. По крайней мере все ссылки на плагин ведут на китайский сайт.

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

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

Я писал об этом плагине в своих обзорах, например вот здесь.

К тому-же на блоге Михаила Ковенькова доходчиво и детально всё расписано в статьях о плагинах для увеличения картинок, как увеличить картинку и что делать, если картинка не увеличивается. Так, что если плагин заинтересовал, то Вам туда.

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

И вот, как то поздно вечером, одурев от работы по созданию нового интернет-магазина, я решил отвлечься на что-нибудь другое... И этим другим оказался как раз плагин Auto Highslide...

Ну всё, хватит лить воду, переходим к практике. Нам понадобятся FileZilla и NotePad++

Открываем файл /wp-content/plugins/auto-highslide/auto-highslide.php

Находим там такой блок:

/* Add HighSlide Image Code */
add_filter('the_content', 'addhighslideclass_replace');
function addhighslideclass_replace ($content)
{   global $post;
	$pattern = "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>(.*?)<\/a>/i";
    $replacement = '<a$1href=$2$3.$4$5 class="highslide-image" onclick="return hs.expand(this);"$6>$7</a>';
    $content = preg_replace($pattern, $replacement, $content);
    return $content;
}

  И сразу после него вставляем вот этот код:

 /* For comment */
 function filter_get_comment_text( $comment ) 
 {	
 global $post;	
 $pattern = "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>(.*?)<\/a>/i";    
 $replacement = '<a$1href=$2$3.$4$5 class="highslide-image" onclick="return hs.expand(this);"$6>$7</a>';    
 $comment = preg_replace($pattern, $replacement, $comment);     
 return $comment;
 }
 // add the filter
 add_filter( 'get_comment_text', 'filter_get_comment_text' );
 /*End For comment */

  По итогу должен получиться вот такой файл:

<?php
/*
Plugin Name: Auto Highslide
Plugin URI: 
Description: This plugin automatically add HighSlide Image Effect in your blog and You don't Need To Change Anything! If you want to use other effect of HighSlide , please use <a href="http://wordpress.org/extend/plugins/highslide4wp/">HighSlide4WP</a> with <a href="http://wordpress.org/extend/plugins/add-highslide/">Add Highslide</a>.
Author: Showfom 
Author URI: 
Version: 1.0
Put in /wp-content/plugins/ of your WordPress installation
*/
/* Add HighSlide Image Code */
add_filter('the_content', 'addhighslideclass_replace');
function addhighslideclass_replace ($content)
{   global $post;
	$pattern = "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>(.*?)<\/a>/i";
    $replacement = '<a$1href=$2$3.$4$5 class="highslide-image" onclick="return hs.expand(this);"$6>$7</a>';
    $content = preg_replace($pattern, $replacement, $content);
    return $content;
}
 /* For comment */
 function filter_get_comment_text( $comment ) 
 {	
 global $post;	
 $pattern = "/<a(.*?)href=('|\")([^>]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>(.*?)<\/a>/i";    
 $replacement = '<a$1href=$2$3.$4$5 class="highslide-image" onclick="return hs.expand(this);"$6>$7</a>';    
 $comment = preg_replace($pattern, $replacement, $comment);     
 return $comment;
 }
 // add the filter
 add_filter( 'get_comment_text', 'filter_get_comment_text' );
 /*End For comment */
/* Add HighSlide */
function highslide_head() {
	print('
<link rel="stylesheet" href="'.get_bloginfo('wpurl').'/wp-content/plugins/auto-highslide/highslide/highslide.css" type="text/css" />
<script type="text/javascript" src="'.get_bloginfo('wpurl').'/wp-content/plugins/auto-highslide/highslide/highslide-with-html.packed.js"></script>
<script type="text/javascript">
	hs.graphicsDir = "'.get_bloginfo('wpurl').'/wp-content/plugins/auto-highslide/highslide/graphics/";
	hs.outlineType = "rounded-white";
	hs.outlineWhileAnimating = true;
	hs.showCredits = false;
</script>
	');
}
add_action('wp_head', 'highslide_head');
?>

 Зацените насколько это и в самом деле малюсенький плагин!

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

Показываю применительно к визуальному редактору комментариев CKEditor

	Жмём кнопку вставки изображения...
	Вставляем ссылку на нужную картинку. Уменьшаем размер, как нам надо, достаточно изменить только ширину...
	Переходим на вкладку "Ссылка" и вставляем ту-же самую ссылку и сюда. На этом всё. Теперь такая картинка будет увеличиваться по клику на ней и в комментариях.

В TinyMCE  всё точно так-же, хотя интерфейс там немного другой. Смысл от этого не меняется...

Можно и вообще без визуального редактора, например вот так:

<a href="http://cs623828.vk.me/v623828001/3d19c/Or1bRBtamX0.jpg" rel="nofollow">
<img alt="" src="http://cs623828.vk.me/v623828001/3d19c/Or1bRBtamX0.jpg" style="float:left; height:200px; margin:5px; width:300px" />
</a>

  Как видите, мы просто обрамляем изображение гиперссылкой на него-же...

Абсолютно ничего сложного!

Ниже, в первом комментарии, я вставлю картинку, которая будет увеличиваться по клику на ней...

На этом всё. Удачи Вам и до встречи на моём блоге.

Материалы по теме:

Плагины WordPress 2014 – ревизия

Плагины WordPress 2015 – ревизия

Как правильно вставить видео с YouTube в запись блога

Плагин CommentLuv, неприятные нюансы

Почему не работает реклама на блоге или как обойти AdBlock

Плагин визуального редактора комментариев снова закрыт