Как сделать картинку адаптивной joomla
Создание адаптивного шаблона Joomla с использованием Bootstrap. Часть 1. Все, что вы хотели знать, но боялись спросить.
Начиная с Joomla 3, в CMS внедрен так называемый Bootstrap framework. Это специальная библиотека CSS-стилей, которая позволяет профессионально и гибко оформить сайт, даже если вы не знаете CSS.
Главным преимуществом Bootstrap framework является возможность создания адаптивного шаблона для сайта на Joomla, который будет одинаково хорошо отображаться и на компьютерах и на мобильных устройствах, таких, как телефоны и планшеты.
Поскольку создание адаптивного дизайна сейчас как никогда актуально, этой статьей я открываю новую серию статей «Создание шаблона Joomla с использованием Bootstrap». В этой серии статей я простым языком расскажу о том, что такое Bootstrap framework и его особенностях применительно Joomla. Мы c нуля создадим шаблон Joomla с помощью Bootstrap и применим его особенности и скрипты к стандартным элементам Joomla.
Зачем мне нужен адаптивный дизайн?
Причин создания адаптивного дизайна несколько, но основная причина – удобство просмотра сайта для пользователей, использующих мобильные устройства.
Если еще несколько лет назад мобильный интернет был скорее роскошью, и подавляющая часть пользователей просматривала сайты со стационарных компьютеров, то сегодня все кардинально изменилось. Доля мобильного трафика растет лавинообразно. Да что скрывать, я и сам теперь использую для выхода в Интернет телефон при каждом удобном и неудобном случае.
Давайте взглянем на один интереснейший график, который показывает доли переходов на сайты Рунета с устройств с различными операционными системами за последние два с половиной года. Он получен лично мной с сервиса статистики Liveinternet.ru и построен в относительном выражении.
Мы видим, что с апреля 2013 года доля трафика только с устройств на базе Android (очевидно, мобильных) и iOS(iPhone) выросла с
18% до
52%! Только вдумайтесь в эти цифры! Каждое второе посещение сайтов Рунета осуществляется с мобильных устройств!
Конечно, эти цифры нельзя применять к каждому сайту и тематике. Например, на wedal.ru доля мобильного трафика составляет всего 5%. Уж не оттого ли, что у сайта нет мобильной версии? Об этом далее.
Если вы читали статью Joomla, Google, оптимизация сайта для мобильных устройств и файл robots.txt., то уже знаете о том, что Google объявил о том, что сайты, не имеющие мобильной версии (или адаптивного дизайна), будут ранжироваться в мобильном поиске гораздо хуже. Иными словами: зачем показывать в результатах поиска сайт, который не может быть нормально показан на устройстве, с которого осуществляется поиск?
Таким образом, ответ на вопрос «Зачем мне нужен адаптивный дизайн?» вырисовывается сам собой. Если вы не хотите терять значительную долю пользователей, использующих сотовый телефон или планшет, как основное устройство для выхода в Интернет, ваш сайт должен корректно отображаться на этих устройствах.
Что лучше: мобильная версия сайта или адаптивный дизайн?
Я думаю, далеко не все понимают разницу терминов «Мобильная версия сайта» и «Сайт с адаптивным дизайном». Давайте разберемся что есть что.
Мобильная версия сайта подразумевает отдельный шаблон, оптимизированный для мобильных устройств. Когда пользователь обращается к сайту, его браузер передает серверу некоторую информацию, в том числе тип операционной системы и тип устройства. Сервер читает эту информацию и в зависимости от типа устройства решает, какой шаблон выдать пользователю: обычный или мобильный.
Сайт с адаптивным дизайном всегда отдает пользователю одинаковую страницу, но эта страница построена таким образом, что в зависимости от разрешения экрана пользователя она может видоизменяться. Проще говоря, если вы откроете сайт с адаптивным дизайном на мониторе 24’ и затем начнете сжимать браузер по горизонтали, сайт будет меняться у вас на глазах, и всегда будет выглядеть правильно. Элементы, которые уже не будут входить в область браузера из-за его размеров, перескочат на подходящее место. При этом никакой горизонтальной полосы прокрутки вы не увидите.
Каждый из этих подходов имеет право на жизнь. У каждого есть свои достоинства и недостатки, сторонники и противники. Bootstrap framework предоставляет нам возможность создать сайт с адаптивным дизайном, поэтому далее мы будем рассматривать только этот вариант.
Как это работает? Зачем вообще нужен этот Bootstrap?
Каким образом создается «адаптивность»? Если структура сайта хоть немного сложная, стандартных средств CSS для создания адаптивности окажется недостаточно. Простейший пример: горизонтальное меню. На больших экранах оно показывается в одну полосу. На экранах же мобильных устройств, всё, что мы можем сделать с таким меню, так это начать показывать пункты меню друг под другом. Из-за некоторых особенностей горизонтальных меню, даже это не всегда будет возможно.
На помощь нам приходят, так называемые, медиа-запросы, которые появились в CSS3. Они позволяют добавлять для одного и того же элемента страницы различные стили в зависимости от ширины (разрешения) экрана. Благодаря медиа-запросам, в нашем примере с меню мы можем показывать его в стандартном виде на широких экранах и превращать в кнопку с выпадением меню на мобильных устройствах. Это очень удобно.
Помимо формирования колонок, Bootstrap предлагает вам из коробки множество готовых компонентов, которые обычно используются на любом сайте. К вашим услугам: оформленные поля, меню, иконки, кнопки и др. Также в Bootstrap содержит набор самых необходимых скриптов: модальные окна, вкладки, выпадающие меню, подсказки(tooltips), слайдер. Про слайдер стоит упомянуть отдельно. Модуль Wedal Joomla Slider сделан мной специально для использования с Bootstrap. Он не содержит в себе никаких дополнительных скриптов. Если Bootstrap подключен в вашем шаблоне, слайдер сразу будет работать.
Сколько это стоит?
Bootstrap Framework распространяется по свободной лицензии. Это означает, что вы можете свободно скачивать его и использовать как в своих проектах, так и в коммерческих.
Если же вы спросите, сколько стоит адаптивный шаблон, созданный с использованием Bootstrap, я отвечу: «Дорого». Но он того стоит. Поверьте, это непередаваемое чувство, когда открываешь свой сайт со смартфона, находясь где-нибудь в дороге, и можешь его спокойно использовать. В рамках данной серии статей вы сможете создать свой собственный шаблон самостоятельно и совершенно бесплатно.
Смогу ли я использовать Bootstrap с Virtuemart и другими компонентами?
Bootstrap – это в первую очередь CSS-библиотека. Это означает, что она может использоваться на любых страницах сайта. Но принцип работы с ней прямо противоположен классической верстке.
В классической верстке вы узнаёте CSS-класс элемента, и добавляете в свой шаблон CSS-стили для этого класса. При использовании Bootstrap все стили заранее предопределены. Все, что вы должны сделать, указать нужному элементу в макете заранее известный класс.
Из написанного выше следует, что вы можете использовать Bootstrap как с Virtuemart, так и с другими компонентами. Главное условие: макеты страниц компонента должны иметь возможность переопределения в шаблон Joomla. Иными словами, вы должны быть уверены, что при обновлении внесенные вами изменения не будут стерты.
Bootstrap уже из коробки поддерживают многие расширения Joomla. Велика вероятность, что для достижения адаптивности вам вообще не придется ничего менять в расширении.
Где посмотреть примеры сайтов, созданных с использованием Bootstrap?
Очень много информации по Bootstrap и его составляющим вы сможете найти на официальном сайте. Там же, на главной странице, вы увидите примеры и ссылку на каталог сайтов, созданных с использованием Bootstrap.
Начиная со следующей статьи серии, мы будем подробно рассматривать все компоненты Bootstrap Framework и их использование в Joomla. Я хочу подчеркнуть, именно в Joomla. На этом всё. Если у вас остались вопросы, буду рад ответить на них в комментариях. Подписывайтесь на новые выпуски и не пропустите главного.
Советы по работе с изображениями в Joomla.
Сайт – это не только тексты. Очень важную роль в восприятии сайта играют изображения, которые на нем опубликованы. Любая информация воспринимается гораздо легче, если она снабжена демонстрационными картинками. Несмотря на кажущуюся простоту темы, работа с изображениями в Joomla имеет ряд особенностей, знать которые будет полезно всем без исключения.
Данная статья представляет собой руководство по созданию, обработке, публикации и оптимизации изображений на сайте Joomla. Из нее вы узнаете:
Вступление.
Если вы имеете свой сайт, то наверняка сталкивались с задачей добавления на него картинок. Это неизбежно. При создании сайта многие веб-мастера забывают, что, скорее всего, работать с ним будут люди, не имеющие образования в области IT. Многие, очевидные для айтишников вещи, могут показаться им незнакомыми и сложными.
Возьмем простейшую задачу загрузки картинки в статью на сайте. Даже здесь есть масса подводных камней: размер файла изображения (вес), разрешение изображения, пропорции изображения, расширение файла изображения – всё это важно. Но сложно объяснить это все заказчикам.
Для чего написана данная статья? По роду деятельности мне часто приходится объяснять заказчикам подобные вещи. Именно поэтому я решил собрать все эти «объяснения» в одной статье. Согласитесь, гораздо проще дать человеку ссылку на объяснение с картинками, чем каждый раз объяснять ему все «на пальцах». Надеюсь, что статья пригодится как администраторам и владельцам сайтов, которые не имеют профессионального образования, но вынуждены работать со своим проектом в Интернет, так и веб-мастерам, которым необходимо донести некоторые особенности по управлению сайтом до своих заказчиков.
Все советы, которые описаны ниже, взяты исключительно из личного опыта работы. Очень надеюсь, что они окажутся полезными.
Как сделать полноразмерные скриншоты страниц в браузере и любых окон на компьютере.
Как сделать скриншот полной страницы браузера, если на ней присутствует полоса прокрутки? Признайтесь, вы знаете? =). Обычно с такой задачей приходится сталкиваться нечасто, но когда это происходит, то обычно впадаешь в полный ступор.
А сделать вот такой скриншот вам по зубам?
Нет, ну признайтесь? =)
Еще не так давно, когда самой популярной операционной системой была Windows XP, даже такой скриншот сделать было непросто. Приходилось нажимать кнопку PrintScreen, открывать Paint, вставлять скриншот изображения, вырезать нужный кадр, сохранять в нужном формате. Всё это, конечно, приходилось делать, если на компьютере не было установлено специализированных программ.
Потом на смену Windows XP пришла Windows 7 (Vista не в счет). Здесь появился такой замечательный инструмент, как Ножницы. Теперь стандартными средствами Windows можно было сделать не только скриншот всей страницы, а также ее отдельной части, при этом обрезав все лишнее здесь же. Используя Ножницы, мы уже можем получить изображение, приведенное выше, но как же, все-таки, быть с изображением, которое не входит на один экран (имеет полосу прокрутки)? Здесь я использую два дополнительных инструмента.
Если мне нужно сделать снимок страницы в браузере, вырезать из него что-то и добавить комментарии, я использую расширение для браузера FireShot. Данное расширение распространяется в бесплатной и коммерческой версии. Бесплатной вполне достаточно.
После установки вы сможете сделать полный скриншот веб-страницы одним кликом, а главное, тут же вырезать из него нужный блок и добавить недостающую информацию.
Добавляем (если необходимо):
Всё происходит очень быстро и удобно. Можно первоначально выставить нужное качество снимков и в будущем оно будет соблюдаться.
Прекрасно. Но что если нужно сделать скриншот с прокруткой окна в Windows? Здесь на помощь приходит вторая программа: FastStone Capture. Программа, к сожалению, платная. Но когда это останавливало наших людей? ;-). Скачать ее в Интернете не представляет труда. Но если она действительно окажется незаменимой, почему бы не поддержать разработчика покупкой лицензии? Тем более, стоит программа не так дорого.
В двух словах о FastStone Capture.
Запускаем и видим на экране такой плавающий блок:
Он позволяет нам вытворять ну просто всякое. Можно делать скриншот экрана, отдельного окна, окна с полосой прокрутки, выделенной области и другого. Последовательность здесь точно такая же, как и с FireShot: скриншотим, вырезаем, редактируем (если необходимо), сохраняем.
Имея в своем арсенале пару этих маленьких программ, вы навсегда забудете о проблемах с созданием скриншотов.
Как массово обработать изображения.
Бывает так, что на сайт нужно загрузить большое количество изображений, а если у вас интернет-магазин, то изображений могут быть сотни или даже тысячи. Если вы хотите, чтобы все выстраивалось ровно, то очевидно, что все изображения должны иметь одинаковые размеры и пропорции. Как этого добиться?
Для массовой обработки изображений я использую бесплатную программу FastStone Image Viewer. Это, конечно, не Photoshop, но для бесплатной программы, возможности FastStone Image Viewer очень широкие.
Главное окно программы показано на рисунке ниже:
Одной из самых удобных, на мой взгляд, функций данной программы, является возможность пакетной обработки изображений. Давайте посмотрим, как это работает.
В нем мы выбираем изображения для обработки и нажимаем кнопку Дополнительно, которая откроет окно с массой дополнительных настроек для обрабатываемых изображений:
При этом нет необходимости задавать все настройки при каждом использовании пакетной обработки изображений в FastStone Image Viewer. Создав их однажды, вы можете сохранить настройки в файл и использовать его, когда это будет необходимо.
После установки всех настроек мы жмем кнопку Старт и программа за нас обрабатывает все изображения, приводя их к заданному в настройках формату.
Используя FastStone Image Viewer, вы можете за секунды обработать изображения, на ручную работу с которыми у вас ушло бы много времени. Это очень удобно.
Как добавить на изображения водный знак.
Задача добавления на изображения водяного знака также относится к пакетной обработке изображений и используется здесь тот же инструмент. В FastStone Image Viewer, в пакетном преобразовании/переименовании, вы можете открыть вкладку Водяной знак. Там будут следующие настройки:
После применения настройки водяного знака, он будет добавлен на все обработанные изображения. Помните, что удалить такой знак с изображений уже не получиться, поэтому всегда сохраняйте их оригиналы.
Как подготовить изображения для загрузки на сайт.
Давайте рассмотрим некоторые особенности подготовки изображений для загрузки на сайт. Кому-то они могут показаться очевидными, но упомянуть про них однозначно стоит.
Не загружайте на сайт изображения, размеры которых больше, чем максимальное разрешение экрана современного монитора.
Например, 24’ монитор обычно работает в разрешении 1920х1080px. Нет никакого смысла загружать на сайт изображения с бОльшими размерами. Они создадут проблемы при просмотре страниц пользователями, поскольку размер файла (вес) таких изображений обычно составляет несколько мегабайт, которые будут включены в загрузку страницы с подобной картинкой. А вообще, максимальный размер изображения, достаточный для просмотра пользователями в браузере, принято устанавливать в 800х860 пикселей, что сопоставимо с 14-15’ монитором.
Старайтесь делать размеры файлов изображений минимальными.
Всегда помните, что размер файла каждого изображения будет включен в размер страницы сайта, на котором это изображение опубликовано. Если вы опубликуете на странице 6 снимков по 5МБ каждый, то ваша страничка будет иметь размер в 30МБ. Если ее просмотрит 1000 посетителей, то общий трафик, отданный сервером, составит 30ГБ! Причем грузиться такая страница у всех будет очень медленно. В идеале размер файла вашего изображения должен составлять ХХ КБ, где xx – любое двухзначное число, и не превышать 300КБ (в случае изображений с большим разрешением).
Имена изображений не должны содержать кириллицы и пробелов. Регистр имен изображений и их расширений должен быть нижним.
Неправильно: /мои картинки/Моя картинка.JPG
Если изображения публикуются в каталоге или слайдере, их пропорции должны быть одинаковыми.
Помните, если вы хотите добавить несколько изображений рядом друг с другом так, чтобы это выглядело ровно, избежав, при этом, их растянутости или сплющенности, вы должны сделать их пропорции одинаковыми. Проще говоря, если одно изображение имеет размеры 200×100 (2:1), то все остальные также должны иметь пропорции 2:1.
Следуя данным несложным правилам, вы добьетесь того, что все картинки у вас на сайте будут отображаться ровно и красиво.
Каким способом можно быстро и удобно создать мини-изображения (превью) в Joomla и сделать их увеличивающимися по клику.
Есть еще одна особенность работы с изображениями на сайте. Не всегда имеется возможность показать сразу полноразмерные изображения. Например, в статье может быть показана уменьшенная копия основного изображения.
Если мы просто сожмем основное изображение, задав для него фиксированную ширину и высоту отображения на сайте, это не уменьшит размер файла изображения. Добавив на страницу десяток таких «уменьшенных» изображений, мы получим очень большой размер страницы и все вытекающие из этого проблемы.
Хорошим вариантом, в данном случае, будет создание уменьшенной копии изображения (с реальным, маленьким разрешением), которая называется превью, с возможностью, при клике по нему, просмотреть полноразмерное изображение во всплывающем окне.
Проблема только в трудоемкости такого решения. Нужно:
Согласитесь, список великоват, особенно, если речь идет не об одном, а о десятке изображений.
Для упрощения решения данной задачи существует плагин для Joomla, который называется mavik Thumbnails. Плагин был написан нашим разработчиком (вот ветка на Joomlaforum’е) и оказался очень удобным, настолько удобным, что лично я бы включил его в базовый набор расширений Joomla.
В чем суть работы плагина mavik Thumbnails? При добавлении изображения на сайт вам не нужно создавать отдельные превьюшки. Вы просто добавляете оригинальные изображения в материал и сжимаете их до нужной ширины аналогично тому, как вы уменьшаете окна в Windows. При просмотре страницы пользователем, плагин сверяет оригинальные размеры изображения и те, которые получились после сжатия/задания ширины. Если они не совпадают, плагин автоматически генерирует на сервере превью оригинального изображения, вставляет его на страницу, отдаваемую сервером пользователю, и обрамляет в ссылку, при клике по которой будет открываться оригинальное изображение во всплывающем окне.
Еще раз, если вы ничего не поняли. Чтобы получить уменьшенные картинки в материале, при клике по которым будет открываться оригинальные во всплывающем окне, вам нужно:
Всё! Остальное плагин сделает за вас. Если вы публикуете у себя на сайте статьи, данный плагин может оказаться для вас просто незаменимым.
Как облегчить загрузку страниц сайта на Joomla, содержащих большое количество изображений.
Всё, что мы рассмотрели выше, не защитит нас от еще одной особенности изображений, размещенных на сайте. Представим, что так уж сложилось, что в статье нам нужно опубликовать 30 картинок. Бывают такие статьи, бывают. Сам писАл =). В этом случае, если превью не очень маленькие, мы все равно получим проблему большого размера страницы. Давайте посчитаем: 200 КБ х 30 = 6МБ. Не очень хороший размер страницы, не правда ли? Что делать в таком случае?
Хитрые люди придумали очень изящное решение. При первоначальной загрузке страницы загружаются только те изображения, которые входят на, так называемый, первый экран монитора пользователя (та часть сайта, которая видима на мониторе сразу после загрузки). Далее, когда пользователь начинает прокручивать страницу вниз, постепенно подгружаются и другие изображения с применением технологии AJAX. Данный способ известен под названием «Lazy Load» или «Ленивая загрузка». Хороший пример Lazy Load – бесконечная новостная лента Вконтакте. Правда, там, таким образом, подгружаются не только изображения, а вся информация в целом.
После активации плагина страницы с большим количеством изображений начнут загружаться значительно быстрее, а посетители сайта станут довольнее.
Вот такие хитрости и инструменты я использую для работы с изображениями сайта. А какие особенности используете вы? Буду рад, если поделитесь в комментариях.
Кстати, о картинках. Если вы используете Инстраграм, вас может заинтересовать продвижение через сервис ZENGRAM. Там можно накрутить лайки, комментарии, подписчиков, в общем, стать местной знаменитостью ;-).