главная / Наше Хобби / Сайт своими мозгами! / Размещение крупных изображений с мелкими деталями на вашем сайте. Кликабельные картинки.

Размещение крупных изображений с мелкими деталями на вашем сайте. Кликабельные картинки.

Нередко бывает так, что мы находим или узнаём какую –либо полезную информацию и пишем какую-то статью на основе этой информации для своего сайта, и все у нас получается неплохо по тексту – просто восхитительно, мы точно понимаем и даже находим подтверждение, что такая статья, на такую тему, всем очень нужна, и мы уже рисуем в голове как должна выглядеть, эта самая, супер-статья с супер актуальной и нужной всем информацией, и тут вдруг понимаем, что нам нужен не только текст, но и соответствующие картинки подобрать к нашей статье.
И все-бы ничего, и картинки подбираются, фотки, скрины и другие всевозможные изображения, но вот беда заключается иногда в том, что необходимо, для дела, разместить достаточно большое изображение с довольно мелкими, но при этом очень важными элементами на этом изображении, с разрешением, скажем, 1200*600 пикселей, а места в статье у нас всего 640 пикселей по ширине (к примеру, взял наиболее часто встречающийся формат в шаблонах множества сайтов).
Ничего не вижу. Девочка смотрит через лупуИ тут посмотрев на статью, с оптимизированным нами изображением, ужатым до максимально-возможного размера ширины в статье – мы вдруг осознаем, что на такой картинке ничего не видно, или видно, но так, что все очень мелко или размыто — не для людей, одним словом.
«Так не пойдет!» — говорим мы себе в порыве гнева на шаблон своего сайта, на разрешение своего экрана, заодно смешав с некоторым количеством того-самого, ни в чем не повинных разработчиков и шаблона, и гаджетов, с предательски гадскими, невозможно маленькими, разрешениями экранов, таких, что вообще не предают изумительные детали картинки в нашей статье.

Но что же делать?
Да выходов из сложившейся ситуации с отображением больших изображений имеется превеликое множество!

Тем более, мы же с вами имеем наш сайт сделанный не каком-то там…, а на такой замечательной, простой, и до безобразия универсальной платформе — CMS WordPress.

Первый и самый популярный способ решения.

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

1. Плагин Simple Lightbox

Наверное, один из самых простых из адаптивных lightbox плагинов.

2. Плагин WP Lightbox 2

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

3. Плагин Easy FancyBox

Плагин включения модальных окон. Имеет также множество настроек и функций. Может отображать видео в lightbox.

4. Плагин Lightbox Gallery

Не сложный плагин создания галереи изображений. Умеет «разворачивать» изображения в lightbox.

5. Плагин Responsive Lightbox by dFactory

Достаточно мощный плагин может с резиновыми lightbox. Имеет очень много настроек и «фишек».

6. Плагин WP Featherlight

Лёгкий плагин lightbox, практически без настроек. Универсальный дизайн. Неплохое, легкое решение.

7. Плагин Gallery Slideshow

Очень интересный плагин, который в своем активе имеет не только lightbox, но и различные виды галерей, а также лупу.

8. Плагин Gallery Video

Плагин предназначен для создания видеогалерей и отображения видео в lightbox.

9. Плагин NextGen Gallery

Супермощный МЕГАКОМБАЙН плагин. Умеет столько всего, что наверное проще сказать, что он не может. Однозначно вам столько не понадобится. Но за свои умения он попросит довольно высокую плату, а именно — плагин имеет сложные настройки, и несет достаточно ощутимую нагрузку на сайт.

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

«Но позвольте, зачем ставить плагин, если таких изображений на вашем сайте будет совсем ничего – одно, ну или может три?» – спросите вы, и тут же добавите, – «Ведь любой плагин сильно нагружает и замедляет работу сайта!».
Да, и в этом случае соглашусь с вами.
Вы правы — в случаях, когда отображение таких изображений носит эпизодический характер, и скорее исключение из правил, я также, как и вы считаю, что стоит прибегнуть к другим способам отображения.

Второй не менее популярный метод

«без заморочек» для ничего не подозревающих на эту тему пользователей

Нестандартно или стандартно красивые рамки, разные «выезжалки», всплывающие окна, затенение, увеличение, наезды, «увеличивалки» — лупы, и множество других, «сочащихся» разнообразием спецэффектов отображения изображений, часто, подчеркивают достоинства некоторых шаблонов сайтов (в основном коммерческих и платных) используемых в темах WordPress и не только. Такие возможности у дорогих шаблонов, как правило уже «вшиты» в тему шаблона и поэтому не требуют установки дополнительных плагинов и скриптов, и включаются как правило при настройке темы перед использованием.
Поэтому если у вас коммерческий, дорогой шаблон сайта (или тема) вам следует сначала почитать инструкцию к вашему шаблону, посмотреть настройки вашей темы и возможно у вас все решено уже в самом шаблоне, и вам остается «только щелкнуть тумблером» в настройках.
К сожалению, я не смогу здесь описать все возможные параметры различных шаблонов для сайтов, по понятным причинам – их просто не один миллион этих шаблонов, да и задачи такой здесь не ставил, скажу только, что тема Sahifa, используемая на этом сайте, позволяет стандартными способами отображать увеличенные изображения в всплывающем окне с эффектом lightbox.
У меня было 15 собак разных пород. А тут соседи попросили посидеть с ребенком пару часов. Короче, к моменту прихода родителей команды "сидеть", "лежать", "голос", "дай лапу" он выполнял идеально.Ну как-то так, примерно:
Нажмите на картинку слева.
Хотя тут также по отображению есть множество настроек – иди разберись, особенно, если с инглишем «на вы», а инструкция как всегда в «трех томах советской энциклопедии» и без картинок, да еще на этом долбанном интернациональном, который так плохо преподавали (да и мы оболтусы и лоботрясы не учили) в школе, а потом и дальше…
В любом случае если у вас есть инструкция к шаблону темы — это здорово. В конце концов ее можно перевести электронным переводчиком. И пусть вы не поймете всего, что там написано, но часть из важной информации от автора темы вы усвоите и возможно, решите свою проблему.
Так что и не думайте, — вы не одиноки в своих трех соснах из проблем — кричите «АУ».

Ну и для тех, у кого всего этого нет, и нет времени особо разбираться даю «ТОТ САМЫЙ»

Третий способ

Это стандартные средства WordPress, да и собственно, любого HTML

Не секрет, что CMS WordPress хранит всю информацию об изображениях в базе данных, и все они отображаются в каталоге библиотеке медиафайлов, доступной из административной панели сайта.Библиотека медиафайлов скриншот
Физически же закаченные вами изображения хранятся в папках в соответствии с настройками вашей CMS, чаще всего, по следующему пути:

…\domains.ru\wp-content\uploads\2017\03  **

где \domains.ru – имя вашего домена;
-\2017- год загрузки картинки через административную панель вашего сайта (в данном случае 2017);
-\03 – месяц загрузки картинки через административную панель вашего сайта (в данном случае март);
**у вас может быть другой путь – в зависимости от настройки вашего WordPress.
Давайте заглянем в папку – что мы увидим?
скрин папки файлов изображений wordpress А увидим мы следующее,-то, что физически в папке хранится несколько файлов с разными размерами. Дело в том, что WordPress при загрузке вами изображения через административную панель сайта, создает несколько различных размеров изображений в соответствии с настройками CMS и используемой вами темы, сохраняет их под разными именами соответствующим размерам изображения в папку.
Кроме всего прочего, оказалось, что в WordPress, каждый медиаобъект (картинка или видео) рассматривается CMS как отдельная запись, и далее каждый вновь созданный CMS размер загруженной картинки, логически увязан с основной (самой большой) картинкой в одно логическое целое.
То есть, по сути, под одну загруженную вами картинку на сайт организуется целая система папок, файлов и изображений разного размера и также запись на сайте, которая все это логически объединяет в один медиаобъект.
И в этом месте, надо сказать, что многие из начинающих сайтостроителей не уделяют должного внимания, особенно что касается, размера, количества и оптимизации загружаемых картинок на сайт, а в последствии им приходится перерабатывать все свои статьи, а бывает и вообще полностью сайт, из-за захламленности медиафайлами огромного размера, базы данных сайта и отсутствию места на хосте.
И еще один «ляп начинающих». Его вы можете увидеть, как раз на скриншоте папки выше. Обратите внимание на имена файлов в папке. Часть этих имен прописана с использованием кириллицы! Поскольку мы уже давно привыкли называть свои фото и видео файлы, хранимые на компьютере и пересылаемые на другие устройства на понятном нам языке, да и многие системы уже давно распознают кириллические символы в качестве наименований файлов. Это незаметная для нас ошибка, в будущем приведет к досадной трате времени проведенного в переименовании всех кириллических наименований в латиницу и в восстановлении отображения всех таких изображений на сайте. Придется очень много перелопатить из-за такой вот незаметной нам сегодня ошибки.
Но об экономии места на хосте и времени не в этой статье и немного позже.
Поэтому, мы с вами так легко и быстро можем получить изображения различных размеров в том или ином месте сайта.

Исходя из сказанного, вы должны загружать в библиотеку изображение того размера, которое вам необходимо будет получить в максимально большом для отображения формате (не забывайте! -оптимизированное изображение), а CMS уже сама создаст, необходимые для вашей темы и исходя из созданных настроек, миниатюры меньших размеров.

Итак, непосредственно размещение:

Для вывода картинки мы будем применять такой простой прием – вывод файла изображения в новом окне, для чего мы будем использовать в месте вывода миниатюры вот такой простой тег — cамое простое, что приходит в голову это использовать тег гиперссылки (мы с вами его использовали, когда размещали рекламные баннеры и делали ссылки на другие статьи или даже сайты.
Это известная конструкция из операндов вида

<a href="http://..."> </a>

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

<a href="http://***/wp-content/uploads/***/***/images.jpg" onclick="window.open(this.href,'', 'width=500,height=600', 'scrollbars=1'); return false;"><img src="http://***/wp-content/uploads/***/***/images-100x100.jpg" alt="123" width="100" height="100"> </a>

Что мы здесь имеем?
Давайте подробнее разберем, что здесь для чего:

href="http://***/wp-content/uploads/***/**/***.jpg"

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

onclick="window.open(this.href,'', 'width=500,height=600', 'scrollbars=1'); return false;"

а вот этой конструкцией создаем новое окно размером 500 на 600 пикселей (я подчеркиваю — именно окно, а не вкладку браузера) для вывода этой самой полноформатной картинки;

img src="http://***/wp-content/uploads/***/***/images-100x100.jpg"

здесь задаем адрес теперь уже миниатюры картинки (маленькой копии) для размещения в тексте/статье/контейнере…
alt= «123»
задаем альтернативный текст в случае невозможности отображения миниатюры картинки
width= «100» height= «100»
задаем соответственно ширину и высоту миниатюры картинки размещенной в месте ее вывода в тексте/статье/контейнере…
Конечно, в зависимости от ваших потребностей, данная конструкция может обрасти еще множеством других атрибутов — к примеру выравнивания миниатюры, задание ей особых стилей, или атрибутов размещения нового окна в определенной области экрана, и так далее, и тому подобное.
Например, вот убирая только эти кавычки (выделены красным)

onclick="window.open(this.href,'', 'width=500,height=600', 'scrollbars=1'); return false;"

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

Четвертый способ

Как по мне, он самый интересный.

Для тех же у кого тема проста и чиста как капля росы, а нагружать плагинами сайт не хочется, а может и по другим причинам, имеется другой путь – путь самурая.
Но сначала вам все-таки необходимо дойти до уровня «самурая» в сайтостроении.
Поэтому о нем я тут рассказывать не буду, поскольку дело это достаточно хлопотное, и даже опасное 8-).
На страницах же моего сайта даны простые примеры для «начинающих».
Для «страждущих» скажу только, что способ этот основан на использовании скрипта Lightbox2.

И на этом разрешите откланяться. Надеюсь статья оказалась вам полезной.
До скорых встреч. Подписывайтесь на наши новости.

[wysija_form id=»1″]

З.Ы. На страницах этого сайта применена тема с уже встроенным скриптом lightbox, а также используется плагин Gallery Slideshow.

Вы еще не зарабатываете? Лид-магнит вам поможет!

Об michserg

Проверьте также

Как разместить рекламный баннер в статье?

Здравствуйте мои дорогие! По просьбам читателей, которые прочитали мои предыдущие статьи «Заработок в интернет новичку …

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

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

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

  3. Я использую миниатюры для изображений, если хочется понятной и чёткой читаемости. А плагинов сколько. Как во всём этом разобраться…?

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

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

Яндекс.Метрика Рейтинг@Mail.ru Goon Каталог сайтов Каталог сайтов Всего.RU