Адаптивный шаблон joomla 3 своими руками

Создание адаптивного шаблона 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?». Он в полной мере использует возможности медиа-запросов. Управление колонками сайта становится простым, как никогда. Хотите 3 колонки или 4? Пожалуйста. А на мобильных устройствах они должны вставать друг под другом по 2? Легко! Используя Bootstrap , вы можете создать шаблон Joomla со сложной структурой, не написав при этом, ни строчки CSS-кода. Конечно, здесь я немного лукавлю. Если хочется сделать все красиво, то все равно придется что-то дописать, но это не идет ни в какое сравнение с количеством CSS-кода, который нужно писать без использования Bootstrap.

Помимо формирования колонок, 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 3. Часть 1

Дата публикации: 2016-07-29

От автора: приветствую Вас уважаемые читатели. Любой хороший сайт, должен быть не только привлекательным и удобно-читаемым, но еще и обязательно уникальным в плане внешнего вида. Поэтому в данной статье мы с Вами поговорим о такой теме, как создание шаблона для joomla 3 с абсолютного нуля.

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

В данное время создано огромное количество различных шаблонов как платных, так и бесплатных, но зачастую найти идеально подходящий для конкретного проекта шаблон, очень сложно. Поэтому, приходится искать наиболее подходящий, а затем вносить в его код изменения и данная ситуация так же бывает и с платными вариантами. Поэтому наилучшее решение – это создание шаблона для joomla самостоятельно с абсолютного нуля. Конечно данная задача не из легких, потому как требует знания устройства шаблонов, но вполне выполнимая и в данной статье я постараюсь привести основы по данной теме. Почему основы спросите Вы? Потому как шаблон небольшого сайта достаточно объемен, что требует времени на его разработку и тем более пояснения. Более подробную информацию по созданию шаблонов Вы найдете в нашем курсе Joomla-Мастер. С нуля до премиум шаблона.

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

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

При этом его файловая структура следующая:

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

Источник

Адаптивные изображения материалов Joomla 3 (4) встроенными средствами

Доброго времени суток уважаемый посетитель моего блога! В данном обзоре речь пойдет о выводе адаптивных картинок в материалах Joomla. Если быть точнее, дело касается картинок анонса и полной статьи, то есть тех картинок, которые мы загружаем через поля для картинок во вкладе «Изображения и ссылки» при создании материала.

Загрузка изображений для статьи в Joomla 3

Что такое адаптивные изображения?

Давайте разберем сначала, что значит «Адаптивные картинки». А что до сих пор они не адаптивными были что-ли? Спросите вы… Адаптивные изображения в данном случае, это те изображения, которые подстраиваются под определенное разрешение (контрольную точку) при уменьшении окна браузера. Суть тут такова: зачем загружать большую картинку версии настольного ПК шаблона в мобильном устройстве. Например, картинка у нас в блоке контента версии ПК шириной 850 пикс., а сам контейнер контента шириной 840 пикс.

Другое дело экран мобильного, например, здесь уже ширина контейнера контента равна 340 пикс. Исходя из всего получается, что мы выводим на мобильном устройстве ту же картинку шириной 850 пикс. (высоту я не затрагиваю, она подгоняется автоматически), что конечно же не логично. Ведь ширина контейнера в мобильной версии шириной всего 340 пикс. Тут надо бы, по хорошему, вывести картинку шириной 350 пикс. (нужно брать немного больше, чем ширина родительского элемента).

Как вы поняли, здесь идет погоня за производительностью. То есть мобильное устройство менее производительнее, чем ПК, поэтому для него отдаем более оптимизированные и «легкие» изображения, более подходящие по размеру. Если вы для оптимизации своего сайта будете использовать такой инструмент, как PageSpeed Insights от Гугла, то он будет «ругаться» на ваши не оптимизированные изображения в мобильной версии. И звучать это будет следующим образом — «Настройте эффективную кодировку изображений«.

Адаптивные изображения — тег Picture

В HTML 5 есть такой тег, как «picture«, который позволяет в наборе с элементами source выводить оптимальное изображение под определенный размер экрана браузера. Выглядит это следующим образом:

Исходя из приведенного кода, видно, что под определенное разрешение браузера подставляется картинка определенного размера. Естественно точки останова (breakpoints) вы можете использовать свои. Я для примера использовал брекпоинты Bootstrap. В теге img в атрибуте src можно указать любое изображение, но так как браузерная поддержка данного тега довольно широкая я использую заглушку (пустая картинка, закодированная в Base64).

Теперь, когда мы разобрались с тегом picture , можем выводить изображения. Но тут встает вопрос — как нам создать из одной большой картинки несколько вариантов для разных экранов? Создавать вручную — не вариант, так как поле для загрузки картинки одно, да и вообще хотелось бы все автоматизировать. Для этого мы воспользуемся встроенными средствами Joomla, а конкретно классом для работы с изображениями — Image. То есть не нужно устанавливать сторонние расширения, все уже включено. Работает это все и в Joomla 4, которая выйдет стабильным релизом, я так думаю, уже скоро.

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

Распаковываем архив с файлами, находим папку html и копируем в корень своего шаблона (не сайта, а именно вашего активного шаблона). По идее все. Уже должно все работать. Загружаем картинку в админ панели при создании/редактировании материала и она должна выводиться на сайте уже адаптивной с теми настройками, что я установил по умолчанию (контрольные точки останова и размеры картинок).

Адаптивное изображение вступительного материала Joomla 3

По умолчанию в Joomla изображения выводятся в шаблоне отдельным лайаутом (layout), то есть отдельным шаблоном. Лежат эти отдельные шаблоны в папке ../html/layouts . Полные пути до изображений шаблонов вступительной и полной статьи будут следующими:

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

Настройки параметров изображений

Теперь давайте рассмотрим некоторые настройки. Для примера я буду рассматривать файл лайаута intro_image.php.

Итак, для редактирования брикпоинтов или контрольных точек мы можем править массив $viewports и выставить необходимые вам значения. Я не буду тут подробно комментировать. Далее, для взаимодействия с файлами лайаутов (файлы, которые создают миниатюры) используется встроенный класс Joomla JLayoutHelper (LayoutHelper) и метод render . Он принимает два параметра: 1. путь до файла лайаута; 2. массив с передаваемыми параметрами. Какие параметры можно передавать? Они указаны в комментарии в начале каждого файла.

• ‘resolution‘ (String) — Размер изображения в формате, например, ‘700×300’;
• ‘force_png‘ (Boolean, default: false) — Конвертировать всегда в формат PNG для сохранения прозрачности заднего фона. Но этот параметр, не работает как положено, сразу скажу;
• ‘force_rewrite‘ (Boolean, default: true) — пересоздавать миниатюры автоматически
• ‘thumb_method‘ (Method class Image, default: Image::CROP_RESIZE) — метод создания эскиза изображения. Здесь нужно смотреть документацию по API класса Image, какие еще существуют методы.

Файлы layout для создания эскизов изображений

Теперь давайте разберем сами файлы, в которых создаются эскизы изображений. На самом деле файл для создания эскизов один и называется он — thumbnail.php. Лежит по следующему пути в шаблоне сайта:

Здесь используется встроенный в ядро Joomla класс для работы с изображениями — Image (jImage в joomla 2.5).

Далее, в папке layouts /com_content у нас существуют следующие файлы:

Это промежуточные файлы-макеты. Как видим здесь также существует файл макета для создания миниатюр изображений для категории. Вообще, можно использовать общий файл макета (image.php), но если вам нужна дополнительная гибкость в настройке, то созданы отдельно файлы: full-image.php и intro-image.php . Пути до данных файлов указываются в файлах intro_image.php и full_image.php . Пример файла intro_image.php я привел выше.

Адаптивные изображении категории Joomla

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

Для того, чтобы для каждого экрана создалась миниатюра нам необходимо править шаблон блога категории. В первую очередь создаем переопределение шаблона блога категории. То есть нам достаточно переопределить всего лишь один файл — blog.php и лежать он должен по следующему путив вашем шаблоне:

Далее находим строчки вывода картинки. У меня это строка 55-я строка. Заменяем код вывода картинки

Естественно размеры и настройки можете указать свои.

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

Источник