Увеличение картинок в статье блога при помощи плагина Auto Highslide и без него!

Привет всем!

Сегодня мы поговорим об увеличении картинок в статье блога. Причем рассмотрим два варианта, при помощи плагина Auto Highslide, и с помощью несложного скрипта.

Тема данного поста будет актуальна и интересна тем, кто при написании статей активно размещает в них изображения. Особенно это касается таких изображений, где представлены важные элементы, которые посетитель должен рассмотреть невооруженным взглядом, не испытав при этом неудобства.

Для тех, кто не в теме поясню. Каждый веб мастер должен понимать, какое влияние на посетителей оказывает изображение в статье. Любая картинка является отличным дополнением к тексту. Изображения придают статьям оригинальность, тематичность, красочность, да и вообще посты с  изображениями читаются намного приятнее, легче и интереснее, нежели пустой «голый» текст.

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

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

Сократив габариты картинки, пользователь не сможет разглядеть те самые важные элементы и в этом случае актуальность поста может потерять свой смысл. Конечно же, для этих целей в визуальном редакторе wordpress при добавлении картинки предусмотрено поле «Ссылка», но такой вывод изображений далеко не идеален:

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

Можно немного усовершенствовать просмотр, прописав в готовой ссылке на изображение атрибут target="_blank", который позволит открывать картинку в новой вкладке браузера. Но опять же, это не совсем удобно в случае, когда человеку необходимо наглядно видеть и сам текст, и его изображение. В этом случае придется метаться от одной вкладки браузера к другой.

Увеличение картинок в статье блога

Я и сам до сегодняшнего дня использовал приведенный выше пример вставки изображений в текст статьи, но теперь все будет иначе. И вы сами увидите, насколько удобнее и интереснее будут выглядеть увеличенные изображения благодаря плагину Auto Highslide или небольшому скрипту, выполняющему аналогичную функцию. О них и пойдет речь в данной статье.

Как увеличить изображение в тексте поста с помощью плагина Auto Highslide

Плагин очень простенький и не имеет настроек. Официальная страница плагина уже не существует, но при необходимости вы сможете скачать его, перейдя по этой ссылке. Распакуйте, архив с плагином, установите его на свой ресурс и активируйте.

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

Как работает плагин Auto Highslide

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

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

Еще раз внимательно посмотрите на предыдущий скриншот! В поле «Ссылка» обязательно должна быть прописана ссылка (путь до изображения)! В противном случае, работа плагина на изображение без ссылки распространяться не будет. Данное правило распространяется только на картинки, требующие увеличения!

Как увеличить изображение в тексте поста с помощью скрипта

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

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

2. Открываем на редактирование файл блога footer.php и перед закрывающимся тегом </body> вставляем этот код:

1
2
3
4
5
6
7
8
9
10

<script type="text/javascript"
src="https://домен.ru/simplebox_util.js"></script>
<script type="text/javascript">
(function(){ var boxes=[],els,i,l;
if(document.querySelectorAll){ els=document.querySelectorAll('a[rel=simplebox]');
Box.getStyles('simplebox_css','https://домен.ru/simplebox.css');
Box.getScripts('simplebox_js','https://домен.ru/simplebox.js',function(){ simplebox.init();
for(i=0,l=els.length;i<l;++i)
simplebox.start(els[i]);
simplebox.start('a[rel=simplebox_group]'); }); } })();</script>

Если файл footer.php и его расположение вызывают у вас вопрос, вам сюда. И обратите внимание на строки под номерами 2, 6 и 7! Вместо слова «домен» вы должны вписать доменное имя своего сайта, в моем случае, это blogiseo.

3. При добавлении изображения в статью блога вам необходимо выполнить несколько простеньких шагов, которые приведены на изображении ниже. Заодно вы сможете проверить работу скрипта, кликнув по картинке:

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

1. Переходим в визуальный редактор wordpress и нажимаем на ссылку «Добавить медифайл».

2. Убеждаемся, что в поле «Ссылка» прописана ссылка на изображение и установлен нужный его размер. После чего нажимаем «Вставить в запись».

3. Когда изображение отобразится в визуальном редакторе движка wordpress кликаем по нему левой кнопкой мыши и выбираем пункт «Редактировать», представленный в виде небольшой картинки (см п. 4 на изображении выше).

4. В появившемся окне нажимаем пункт «Дополнительно».

5. В поле «Дополнительные параметры ссылки/Отношение» обязательно прописываем simplebox.

6. Жмем «Обновить».

7. Переходим на свой ресурс, проверяем работу скрипта.

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

Награждение лучших комментаторов апреля 2014 года

Самыми лучшими комментаторами прошлого месяца становятся:

• Иван (22), Мозгунова Ирина (21), Татьяна Саксон (21) — вы награждаетесь денежным призом в размере 100 рублей.
• Максим (11), Александр Иванович (10), Николай (9) — вы получаете от меня по 50 рублей.

Благодарю всех комментаторов моего блога! Спасибо что вы есть и что следите и комментируете мой ресурс! Присылайте номера своих WMR — кошельков и я перечислю вам ваши заслуженные призы!

На этом на сегодня все! Желаю всем удачи! Всех с прошедшими праздниками, пока и до новых встреч!