Сышышь ты, выходи сюда,
поговорим !

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

Опубликовано: 04.09.2018

Наверное данная статья актуальна только для тех, кто использует либо захочет использовать совершенно замечательный плагин 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>

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

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

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

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

rss