Домой / WordPress / Плагины / Расширяем возможности плагина Auto Highslide

Расширяем возможности плагина 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: http://showfom.com/auto-hishslide-wordpress-plugin/
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: http://showfom.com
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

Расширяем возможности плагина Auto Highslide Жмём кнопку вставки изображения...
Расширяем возможности плагина Auto Highslide

Вставляем ссылку на нужную картинку.

Уменьшаем размер, как нам надо, достаточно изменить только ширину...

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

Переходим на вкладку "Ссылка" и вставляем ту-же самую ссылку и сюда.

На этом всё. Теперь такая картинка будет увеличиваться по клику на ней и в комментариях.

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

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

<a href="http://cs623828.vk.me/v623828001/3d19c/Or1bRBtamX0.jpg" rel="nofollow">
<img alt="Расширяем возможности плагина Auto Highslide" src="http://cs623828.vk.me/v623828001/3d19c/Or1bRBtamX0.jpg" style="float:left; height:200px; margin:5px; width:300px" />
</a>

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

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

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

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

О программе Александр Каратаев

Что исправлять? Меня уже родили...

53 комментария

  1. А вот и увеличивающаяся картинка в комментарии:

    Картинки бывают очень большими, а вот так смотрится очень даже ничего.

    К тому-же картинка увеличивается по клику…

     

  2. Саш, привет! Как всегда, все гениальное просто. Жаль что у меня Джумла. Правда я нашел один плагин, вроде как работает, но зараза картинку берет в рамку. Ладно главное что работает. Да, и мое расширение, про которое я писал здесь , среагировало на твое обновление быстрей чем пришло письмо. Это я так, просто поговорить

    • Привет, Андрей! Ну я-же и говорю — для тех кто пользуется этим плагином. А потом, сейчас у тебя Жумла, а завтра вдруг будет Друпал и в итоге вернёшься на Вордпресс… angry

      Вот тогда и пригодится…

  3. Здравствуйте, Александр!

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

    Интересная возможность сделать свои ресурсы еще удобнее для аудитории комментаторов.

    • Спасибо, Надежда! Только дело тут не в том, кто кого умнее. Ведь данный подход удобен только при наличии визуального редактора комментариев. В стандартном WP этого не предусмотрено, я как-то задавал вопрос разработчикам WordPress — почему они не сделают это встроенной фишкой — они ответили, что такой функционал не востребован.

      Поэтому китайские разработчики и сделали под стандартные возможности WordPress. Не думаю, что для них явилось-бы проблемой прикрутить плагин и к комментариям. Просто не востребовано…

    • Надежда, так русские ж не победимы. Мы если захотим и на ровном месте что то придумаем. Главное было бы желание

  4. Здравствуй Александр! Я уже давно отключил этот плагин, как только поменял шаблон. Просто в новом шаблоне поле для статей аж 750 рх, так я устанавливаю картинки на всю ширину и увиличивать не нужно. А вот доя комментариев и правда нужное дополнение вы сделали. Круто. Может быть и верну его только ради этого.
    Спасибо

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

      Ну… плагин-же на любителя…

    • Игорь, я тоже так когда-то думал и на моём мониторе всё смотрелось Ну очень красиво! Но когда одна знакомая блогер сделала мне замечание, что мои картинки вылазят за рамки текстового поля у неё на мониторе, я начал проверять. Да, действительно, картинки на меньших мониторах, в отличие от моего, вылазят за рамки текстового поля. Пришлось делать резиновые картинки, т.е. размеры устанавливать в поцентах, а не в пикселах и прочих единиц. Т.ч. если твои картинки в пикселах, то радуешься только ты и те, у кого такие же или больше размером мониторы, а остальные — увы, ничего не разобрав, просто уходят из блога. Это я так, к слову. 😉

      • Кстати, да, многое зависит и от монитора, и просто от разрешения экрана. Дома у меня огромный монитор, а на работе ноутбук — и уже выглядит одно и то-же по-разному…

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

    • А чего его ломать-то? Что это даёт? Через него доступа к БД нет в любом случае… там только обычные стандартные фильтры… Они описаны в документации WP…

      А то, что не поддерживается, ну так ведь работает-же… Например тот-же Cyr-To-Lat тоже 100 лет не обновлялся, но тем не менее востребован…

      • Это да. Но я просто логах у меня немало обращений к этому плагину. Вот именно из-за этого я решил поменять расширение. Не хотел лишний раз рисковать. Может на самом деле он безопасный, но вот эти посторонние обращения к нему меня не сильно радовали. Решил от греха подальше перейти на другой.))) А так работает он нормально. С новой версией CMS проблем у меня не было.

  6. Спасибо, Александр, заинтересовали плагином и именно возможностью увеличивать картинки по клику комментариях.

  7. Привет, Саша! Когда-то у меня стоял плагин с тинумсе-редактором и попытавшись показать читателю разъяснительную картинку в комменте, я действительно посетовал на то, что картинки, к сожалению, в комментах не увеличиваются. Пришлось ему по почте высылать снимки, чтобы довести объяснение до конца. Полезную работу ты сделал, думаю, этим дополнением воспользуются многие блоггеры. Спасибо!

    • Привет, Миша, спасибо! Мне тоже кажется, что это удобная фишка.

      Всё-же с визуальным редактором намного удобнее — и блок кода можно вставить, и теперь картинки увеличивающиеся… Для того, что-бы что-то объяснить и показать очень удобно, на мой взгляд…

  8. Я первый раз о этом плагине слышу почитаю о нем може и пригодится мне на блоге. Спасибо за информацию

    • Эта фишка может пригодится, если Вы используете визуальный редактор комментариев. Хотя, конечно можно и без него — в статье я код показал, но с редактором проще и удобнее…

  9. Спасибо за информацию, не знал что есть плагин, та еще в комментариях увеличивает картинки, возьму на заметку. Хотя я пользуюсь без плагина. 

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

    • Все мы что-то используем по мере необходимости.

      а в комментариях пока ставить картинки опасаюсь, если что-то пойдёт не так

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

  11. надо же, китайцы и программировать могут, скоро они затмят индусов в этом деле

    • А китайцы, по моим ощущениям, на самом деле довольно талантливые программисты. Достаточно послушать новости про взлом баз Пентагона китайскими хакерами…

      cheeky

  12. А я ничего не знаю про этот плагин. Даже обидно. У меня картинки в постах не увеличиваются.( Надо разобраться с ним. Спасибо в очередной раз за полезную информацию.

    • Плагин хороший, Ирина… В статье про плагины WordPress 2015 года я давал ссылку на сайт разработчика. Правда там фиг чего поймёшь… Да и в репозитории этого плагина не найти…

      Надо наверное выложить ссылку на скачивание, даже две — оригинал и с моей вставкой… Где-то ссылку на скачивание оригинала со своего ЯД я уже приводил, но не помню где точно…

  13. Смотрю у Вас кнопки соц сетей от PLUSO нормально работают, у меня несколько дней не работали, я их совсем убрала, хотела к Вам за советом, какие лучше поставить, а тут всё работает, ничего не понимаю 

    • Да вроде работают… Я, честно говоря, поставил когда-то PLUSO и забыл… Может вставляете, как-то не туда или скрипты конфликтуют…

      • Похоже у меня там полный бардак, тех поддержка хостинга когда-то советовала мне перенести сайт на другой сервер, но сказали чтобы я потом сама делала пользовательские настройки, наверное  пора это сделать, поможете потом с настройками, а то сама я не разберусь

  14. Пока не знаю сама, жду ответа, если перенесут, говорили про пользовательские, мне бы ещё с настройкой плагина разобраться, сегодня обновила WPtouch, требует перенастроить WP Super Cache, пока не разобралась что там куда надо вставить для корректной работы  , поможете? 

  15. Помню, что видела у вас про плагин Auto Highslide. У меня такой давно стоит и он мне нужен. Есть некоторые проблемы. У плагина есть картинка — график, это просто ровная полоса. Но Гугл ее упорно индексирует. В неактивном файле нашла код  этой картинки. Как вы думаете, Александр, если строку кода удалить, не развалится ли от этого плагин?

    • Ксенья, а что там за картинка? Где Вы её нашли? В самом коде плагина? Можете показать этот кусок кода? У меня в редакторе комментариев есть кнопка (самая последняя) — вставить сниппет. Вставьте код туда…

      Иначе сложно что то сказать… А вообще-то, когда надо что-то закрыть от индексации, то это делают при помощи robots.txt, а не путём выдирания блоков кода. Но лучше всё-же посмотреть на этот код… Вот у меня в статье приведён полный код плагина с моими вставками, там я ничего не увидел такого…

  16. Александр, вначале встретилась с графиком плагина в Гугле, удалю, он опять возвращает. Затем нашла при анализе сайта плагином Web Developer. В плагине есть ссылки на все что он указывает, перешла по этой ссылке, там рисунок: просто белая полоса, между двумя черными окнами. Потом уж нашла коды, кстати в этом плагине только один файл активен, в придачу еще 2 или 3 неактивных файла, зачем они нужны? После установки расширения веб разработчика, теперь борюсь за снижение веса сайта, чтобы не было ничего лишнего. Кое что улучшилось Скорость загрузки на компьютере стала 87/100, есть еще резервы для улучшения. Найду в коде плагина про рисунки и вам пришлю в комментариях.

    • Я Вам ответил под другим Вашим комментарием, где Вы код демонстрировали. Вот здесь.

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

      Скорость и функциональность всегда вступают в противоречие. Улучшаешь первое — ухудшается второе и наоборот. Должен быть какой-то разумный баланс. Лично моё мнение — это очень достойный плагин. Никакого вреда от него нет.

      Однако, если это Вам не даёт покоя — просто удалите плагин и все дела.

  17. Скажите, а как модифицировать этот плагин не только под комменты, но и под текстовые виджеты?

    • Честно говоря — не задумывался об этом. Если контент и комментарии — это более-менее стандартизировано в движке и можно обработать встроенными фильтрами WordPress, то виджеты создаются, кроме стандартных ещё и авторами тем и плагинов. Как к ним цепляться совершенно непонятно. По крайней мере я не знаю… Но я и не "копал" в эту сторону. Нет такой необходимости…

      • Аналогия не работает. Вот такая

         function filter_get_widget_text($widget_text) 
         {    
         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>';    
         $widget = preg_replace($pattern, $replacement, $widget_text);     
         return $widget_text ;
         }
         // add the filter
         add_filter( 'get_widget_text', 'filter_get_widget_text' );

        • И не должно работать. Не существует фильтра get_widget_text, а именно его Вы и пытаетесь активировать.

          Есть такой фильтр widget_text, попробуйте вот так, если я нигде не ошибся (писал на коленке), то должно сработать…

          /* For widget */
           function filter_get_widget_text( $widget ) 
           {	
           $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>';    
           $widget = preg_replace($pattern, $replacement, $widget);     
           return $widget;
           }
           // add the filter
           add_filter( 'widget_text', 'filter_get_widget_text' );
           /*End For widget */

           

          • Пробовал.

            Нету переменной $widjet

            Буду пробовать дальше, если получится — отпишусь

        • Спасибо! Все заработало!

    • Я же говорю, мог ошибиться. Вот так правильно:

      /* For widget */
       function filter_get_widget_text( $text ) 
       {	
       $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>';    
       $text = preg_replace($pattern, $replacement, $text);     
       return $text;
       }
       // add the filter
       add_filter( 'widget_text', 'filter_get_widget_text' );
       /*End For widget */

       

      • У меня сайт на вордпресс http://kopirayter-rerayter.ru
        На нем установлен плагин Auto Highslide , который уже не один год хорошо работал. Обновлений на сайте не делала давно. На днях увидела, что картинки на сайте при увеличении переводятся просто на картинку, а раньше они как бы над текстом всплывали.
        Есть подозрение, что сайт был взломан, так как нашла на нем 8 левых ссылок ,пока с плагином разбиралась.
        Ссылки удалила, но, предполагаю, что тот человек, который их загружал, что-то изменил в самом коде сайта.
        Я уже пробовала разные плагины, и без плагинов — реакция на картинки одна и та же.
        Подскажите решение этой проблемы. 
        Буду даже признательна, если вы мне подскажете в какой папке посмотреть. Возможно, у меня остались старые сохранения этого сайта, так как в коде особо не сильна, может сравню и найду отличия.
        Заранее спасибо.

        • Оксана, здравствуйте. Вот так просто сложно что-либо сказать. У каждого шаблона свои выкрутасы. Если есть подозрение, что сайт взломан, то в первую очередь смените пароль на более сложный.

          Я посмотрел код изображения у Вас и сравнил со своим. Вот Ваш:

          <a href="http://kopirayter-rerayter.ru/wp-content/uploads/2014/03/3-tekst-dlja-glavnoj-stranicy.jpg" class="highslide-image" onclick="return hs.expand(this);"><img class="alignleft  wp-image-75" title="Текст для главной страницы сайта" src="http://kopirayter-rerayter.ru/wp-content/uploads/2014/03/3a-tekst-dlja-glavnoj-stranicy.png" alt="Текст для главной страницы сайта" width="85" height="108"></a>

          Вот мой:

          <a rel="nofollow" target="_blank" href="http://s017.radikal.ru/i440/1606/ef/bd410ec384ab.jpg" class="highslide-image" onclick="return hs.expand(this);"><img id="__wp-temp-img-id" class="alignleft tie-appear" style="margin: 5px 10px 5px 10px;" src="http://s017.radikal.ru/i440/1606/ef/bd410ec384ab.jpg" alt="Огни большого города http://obg.kz" height="131" width="189"></a>

          Собственно различий не выявил.

          Что могу предложить. 1. Удалите у себя плагин  Auto Highslide вообще. Очистите кэш, у Вас же установлен плагин кеширования? Там должна быть опция очистки. Затем скачайте мою версию этого плагина (Auto Highslide) с этой страницы и установите. Проверьте, как работает.

          2. Если не помогло, отключите временно вообще все плагины у себя. Просто деактивируйте их. Активируйте Auto Highslide, проверьте результат. Если нормально, то по очереди активируйте остальные плагины с проверкой работы (увеличения изображений) после активации каждого плагина. Возможно таким образом получится вычислить, что косячит.

          3. Если и это не помогло, попробуйте просто активировать другой шаблон. Желательно из тех, что идут с WordPress по умолчанию. Например, Twenty Fifteen… Временно для проверки. Вполне может быть, что что-то изменилось в самом шаблоне. Если все заработает, то причину надо искать в Вашем шаблоне. Если нет, то возможно придётся восстанавливать всё из бэкапа. Либо копаться в поисках вредоносного кода. Есть плагины для этой задачи… Но они могут не найти… Можно обратиться к хостерам с просьбой об антивирусной проверке сайта.

          Напишите, что сделали и что получилось, а что нет…

          После перечисленных действий можно что-то думать дальше…

          • Добрый день. Что мне только не посоветовали сделать на форумах. Но 90% сказанного было для меня…"китайской грамотой". В процессе анализа сайта нашла несколько ссылок на иностранные сайты, которые были встроены именно в том месте, которое сказывалось на коде сайта. Я их просто аккуратно вырезала, никакие папки не удаляя. Обновила вордпресс. Сменила пароли. Никакого результата. Возможно куки сохранились. А вот через пару дней я увидела, что все опять работает как надо. Не знаю, что именно помогло, но особых действий над кодом я не совершала. Спасибо за помощь.

        • Не знаю, что именно помогло, но особых действий над кодом я не совершала.

          Ну что сказать? Неисповедимы пути… WordPress…

          Рад, что всё хорошо закончилось.

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

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