что такое макеты модули
Что такое модульная сетка и для чего она нужна дизайнерам
Дизайнер — не свободный художник, который рисует с чистого листа. Обычно он начинает работу с создания сетки.
Что это такое?
Модульная сетка — основа для дизайн-макета. Она состоит из простых геометрических фигур — модулей одинакового размера, расположенных в определённой последовательности. Это значит, что всё пространство макета сначала разбивают на равные ячейки, а затем размещают объекты так, чтобы размер любого изображения или текста на макете был кратным размеру модуля.
Такая система упрощает работу дизайнеров: помогает сделать макет пропорциональным, понятным, гармоничным и не потратить при этом много времени.
Пишущий дизайнер. Пришла в профессию, получив второе образование, ранее занималась когнитивными исследованиями, SMM и копирайтингом. Пишет о визуальных трендах, делится наблюдениями из отрасли и техническими лайфхаками.
А как это выглядит?
Например, вот так. Справа вы видите сетку, в центре — надписи, наложенные на эту сетку, а справа — готовый дизайн.
Что-то непонятное. Неужели без такой сетки нельзя, например, сделать сайт?
Можно, конечно, но не так удобно. Как определить расстояние между двумя соседними блоками на сайте? Где будут располагаться баннер, заголовки, основной текст? Сколько должно быть пустого пространства? Если решать это «на глазок», дизайн, скорее всего, получится небрежным: у элементов будут разные размеры и отступы. Такой интерфейс не просто менее красив, но и неудобен: чтобы пользователь мог быстро найти всё, что ему нужно, важна предсказуемость расположения элементов.
Сетка помогает привести макет к единообразию. В ней заданы высота и ширина минимального блока — модуля. Размер любых изображений, текстов или разделов должен быть кратным этому числу. Благодаря этому все элементы на сайте расположены гармонично, понятны пользователю и приятны глазу.
Сетки используют только в веб-дизайне?
Не только. Их вообще-то придумали в газетном деле, ещё в прошлом веке. Раньше художники-оформители с нуля работали над газетами, но на это уходило много времени. А сетка позволила всё делать по шаблону, гораздо проще и быстрее.
Современные печатные газеты, журналы, каталоги непременно свёрстаны по сетке. Это зачастую актуально и для дизайна этикеток, листовок, упаковки — для всего, где есть иерархия текстовых блоков и изображений. Иногда модульная сетка входит в фирменный стиль компании: на листовках, баннерах, рекламных материалах элементы располагаются одинаково, и это работает на узнаваемость бренда.
Даже многие логотипы создают по модульным сеткам. Скажем, вот так:
Ого! Любой логотип можно сделать по модульной сетке?
Нет, не любой. По модульной сетке, состоящей из сходных элементов, можно создавать только простые лаконичные логотипы. Более сложные детализированные картинки строятся по произвольной сетке — без повторения размеров элементов. А иногда и вовсе никакой сетки не используется. Посмотрите на логотип ниже — слово «рынок» было написано от руки тушью. Естественно, ни в какую сетку оно не вписывается.
Значит, модульная сетка — не универсальный инструмент?
Это очень популярный инструмент, но, конечно, не универсальный. Бывает, что сетка не нужна вовсе. Особенно это касается творческих задач: например, разработки логотипов или иллюстраций. А случается, что сетка нужна, но не модульная.
Например, в дизайне полиграфии и сайтов иногда используют колоночные сетки — в них задана ширина колонок и отступов между ними, но высота блоков может быть произвольной. Есть ещё иерархическая сетка — она подразумевает размещение элементов без жёсткой структуры исходя из визуальной привлекательности макета. Так что у дизайнеров уйма вариантов организации работы. Но модульные сетки экономят время и силы: достаточно один раз подобрать оптимальные размеры модуля, а затем просто заполнять контентом получившиеся ячейки.
А как делают модульные сетки?
Зависит от того, что за дизайн нужен: сетки для сайта и для логотипа, естественно, будут совсем разными. Когда речь идёт об оформлении текста — например, в рекламной листовке, журнале или на сайте, сетки обычно составляют из прямоугольников или квадратов. Так элементы дизайна будут легко укладываться на прямоугольный монитор или на печатную страницу.
Размеры модулей тоже различны. Страницу журнала легко можно разделить на 12 колонок, а вот в мобильной версии сайта такие мелкие модули вряд ли понадобятся.
С логотипами ситуация другая: в качестве модуля могут брать любую простую фигуру: квадрат, многоугольник, овал или треугольник. Когда дизайнер продумывает логотип или набрасывает эскизы от руки, он уже примерно понимает, на основе каких фигур можно нарисовать знак.
Дизайнеры чертят сетки сами с нуля?
Сетки для логотипов неизбежно нужно делать вручную, потому что они сложные. Если же речь о сетке для печати или для веб-дизайна, в Google можно найти много онлайн-генераторов: они выдают расчерченные колонки и клеточки по заданным размерам. Но и вручную делать сетки технически совсем не сложно — например, в Photoshop, Illustrator, InDesign, Figma или других редакторах. Основная работа состоит в том, чтобы придумать оптимальные размеры и число модулей для реализации конкретной идеи.
Модульные сетки в работе UX-дизайнера. Инструкция по применению
Сетка? Зачем она нужна?
Люди всегда интуитивно пользовались чувством пропорции. Это легко подтвердить, потому что уже с самых ранних цивилизаций можно увидеть связь пропорций с измерением и конструированием, размещением предметов относительно друг друга в пространстве. Сетками, как разметкой, системой опорных линий, пользовались для составления планов строительства и разбивки территории, с помощью нее художники Возрождения увеличивали свои эскизы, а в картографии сетки были координатной основой, по которой составлялись военные планы.
В работе дизайнера, когда макеты состоят из различных элементов, сетка помогает их упорядочить. Сетка позволяет, не вычисляя каждое расстояние и размер в отдельности, заложив ключевые закономерности при её построении всего один раз, затем просто их переиспользовать. Например, сетка позволяет соблюсти правило теории близости (также вы можете найти это правило среди гештальт-принципов восприятия) и, в частности, правило внешнего и внутреннего, согласно которому внутренние расстояния должны быть меньше внешних.
Как только вы начинаете пользоваться сеткой, сложно не заметить её преимущества:
Какими бывают сетки
В зависимости от того, что берется за основу построения сетки, можно выделить следующие ее типы: блочная (в основе блок), колоночная (колонки), модульная (модуль), иерархическая (визуальный вес и расположение элементов относительно друг друга).
Блочная или манускриптная сетка — самый простой вид сетки, которая, как правило, используется в печатных изданиях. Обычно такая сетка представляет собой стандартизированный прямоугольник, который содержит контент на странице или на экране.
Колоночная сетка — сетка, имеющая колонки в своей структуре. Ширина межколонника (gutter) определяется его назначением, если он просто отделяет элементы друг от друга, то разумно сделать его ширину минимально необходимой, но он должен быть в любом случае ощутимо больше межстрочного интервала, чтобы строки в соседних колонках не выглядели продолжением друг друга.
Модульная сетка характеризуется наличием как вертикального членения, так и горизонтального. То, что образуется на пересечениях, есть модуль — прямоугольник с заданной высотой и шириной, который лежит в основе композиции. Сетка определяет как в целом будет выглядеть макет и где будут расположены отдельные элементы: текстовые блоки, заголовки, изображения.
Иерархическая — сетка с интуитивным размещением блоков, которая фокусируется на пропорциях и визуальном весе элементов в дизайне. Этот тип сетки часто используется, когда контент не стандартизированный и не однообразный. Часто встречается для бизнес доменов, связанных с модой, фотографией, искусством.
Наиболее сложной для построения является модульная сетка, она включает в себя в том числе и построение колоночной. Поэтому давайте рассмотрим принципы её создания.
Принципы построения модульной сетки
Модульная сетка — это инструмент, но не метод, поэтому прежде чем создавать сетку, необходимо сделать черновой макет страницы, продумать элементы, которые могут использоваться, и только потом переходить к её созданию. Чтобы построить модульную сетку, необходимо последовательно построить сначала базовую, потом применить к ней колоночную и, задав размер модуля, мы получим дизайнерскую, т.е. вашу разработанную под конкретный проект сетку.
И так, начнем с базовой сетки. Она напоминает миллиметровую бумагу. Она позволит перемещать самые мелкие элементы макета, сохраняя все расстояния между ними равными и единообразными. Шаг сетки зависит от неделимых элементов (атомов) макета. Ими могут быть базовый шрифт и высота строки, радио-кнопка, чекбокс, минимальное расстояние между видимыми блоками контента, например, между фотографиями в галерее или карточками товаров.
Что такое модульная сетка в дизайне и зачем она нужна
Секрет успеха в любом виде дизайна зависит от того, как расположены все элементы друго относительно друга. В этом и есть смысл создания дизайн-макета сайта или приложения.
Важной составляющей дизайна являются сетки. Они — основа всех макетов, инфографики и презентаций.
Дизайн макета предполагает использование одной сетки или группы сеток, в зависимости от того, какая у вас цель. Парадокс, но сетки также существуют, чтобы помочь вам нарушить правила. Давайте рассмотрим все виды сеток, которые существуют для макетирования, а начнем мы с анатомии сеток, чтобы вы могли лучше их понять.
Части сетки
Анатомия сетки состоит из нескольких частей. Не каждая часть присутствует в каждой сетке; это зависит от её вида.
Мы рассмотрим самые важные части.
Вы можете узнать некоторые термины из программ для создания документов, таких как Microsoft Word, Google Docs.
Внешний вид документа определяется этими разделами сетки, включая поля, верхний колонтитул, нижний колонтитул и номера страниц.
Формат
Это вся область, на которой будет располагаться конечный дизайн. В полиграфическом дизайне форматом является страница, а в веб-дизайне форматом является окно браузера.
Это пустые пространства между краями формата и содержимого. Размер полей — это то, что придает содержимому общую форму, обычно прямоугольную.
Отводные линии
Это горизонтальные линии, которые разделяют разные участки сетки на параллельные полосы.
Они помогают читателю следить за содержанием макета. Отводные линии также создают точки остановки для размещения элементов. Некоторые линии называются висячими линиями, а другие — базовыми линиями.
Модули
Это строительные блоки любой сетки. Это промежутки, созданные между линиями отвода и вертикальными линиями. Вертикальные группы модулей вместе образуют колонны. Горизонтальные группы образуют ряды.
Пространственные зоны
Группы смежных модулей в вертикальных и горизонтальных областях создаются пространственными зонами. Вертикальная область может содержать блок текста, горизонтальная область может содержать видео.
Области можно организовать пропорционально или использовать для создания перекрывающихся зон.
Столбцы
Это вертикальные пространственные области, которые полностью умещаются от верхнего до нижнего поля.
Строки
Это горизонтальные пространственные зоны, которые полностью помещаются слева направо.
Желоба
Промежутки между строками и столбцами называются желобами. Они всегда должны быть одинаковыми между столбцами или строками, чтобы поддерживать визуальный баланс.
Маркеры
Это области внутри бегущего верхнего или нижнего колонтитула, которые отмечают точное место, где повторяющаяся информация размещается от страницы к странице.
Типы сеток
Сетки макетов используются для дизайн-проектов, содержащих от одной страницы до нескольких сотен. Это своего рода сетки, которые организуют элементы внутри пространства. Документы Word, например, имеют сетку, просто она не всегда видна. Сетки макета помогают дизайнерам позиционировать текст и изображения так, чтобы они выглядели последовательными и понятными.
В большинстве редакторов макетов, онлайн или других, есть инструмент, называемый «привязка к сетке». Это синие или красные линии, которые появляются при перемещении элементов внутри дизайна. Они ориентируют дизайнеров, когда края совпадают в соответствии с сеткой или когда она центрирована.
Более сложные редакторы макетов показывают расстояние между элементами, чтобы их можно было расположить пропорционально.
Все разметки сеток могут быть выполнены двумя способами:
Симметричные сетки проходят по центральной линии. Вертикальные поля равны друг другу, как и горизонтальные. Столбцы в симметричной компоновке также имеют одинаковую ширину.
В асимметричном макете поля и столбцы могут отличаться друг от друга. При использовании асимметричной планировки важно всегда искать баланс.
Давайте посмотрим на пять видов сеток разметки: рукопись, столбец, базовый уровень, модульный, иерархический.
Сетка рукописи
В документе Word или шаблоне презентации всегда будет сетка рукописи. Иногда эти сетки невидимы, хотя их можно переключить, чтобы они отображались в редакторах документов. Они в текстовом документе разделяют верхний колонтитул, нижний колонтитул и пространство по краям (поля).
Макет рукописи создает прямоугольник внутри страницы (формат), как ограничивающая рамка для текста.
Сетка рукописей является основой для всех журналов, газет, электронных книг и всего текстового дизайна. Дизайн макета сетки рукописи настраивается на первой странице.
Остальные страницы будут соответствовать тем же размерам.
Хорошая практика — сохранять согласованность сетки рукописей внутри одного дизайна документа. Даже если есть элементы, выходящие за край, например форма или фотография, сетка все равно будет присутствовать, чтобы сохранить хороший баланс для всего дизайна.
Сетка столбцов
Сетки столбцов используются для организации элементов в столбцы. Журналы используют сетки столбцов для размещения текста в легко читаемых разделах. Некоторые академические учебники также используют их.
Сетки столбцов используются на сайтах, например, в интернет-газетах или блогах.
Они могут иметь от 2 до 6 или более столбцов, но это не очень распространено.
Текст и изображения в сетке столбцов размещаются по вертикальным линиям и линиям разнесения, составляющим столбцы. Изображения можно размещать внутри одного столбца или в двух или более, чтобы создать разнообразный визуальный макет. Расстояние между столбцами (желобами) должно быть пропорциональным и постоянным по всему документу.
В симметричной сетке столбцов все столбцы имеют одинаковую ширину, а в асимметричной сетке одни столбцы будут пропорционально тоньше или шире других. Печатные газеты обычно используют симметричную сетку столбцов для организации своих статей.
В приведенном ниже примере журнала используется сетка из трех столбцов пропорциональной ширины. Заголовок и подзаголовок занимают пространство всех трех столбцов, в то время как выделенный текст занимает пространство двух столбцов.
Модульная сетка
Модульная сетка похожа на сетку столбцов тем, что в ней есть столбцы, но также есть строки. Этот вид сетки используется, когда нужно организовать больше элементов, а сетки столбцов недостаточно. В газетах используются столбцы и модульные сетки для удобной и удобной организации статей.
Модульные сетки имеют модули одинакового размера. Это упрощает «нарушение правил» и использование пространственных зон по-разному.
Модульные сетки также отлично подходят для размещения форм, диаграмм и расписаний и для сайтов электронной коммерции. Домашняя страница вашего iPhone, на которой показаны все приложения, имеет модульную сетку. Instagram также использует модульную сетку для отображения вашей ленты.
Базовая сетка
Базовая сетка (базовая линия) — это линия, по которой ровняется текст.
Интерлиньяж — это интервал между базовыми линиями. Базовую сетку можно применить к любой из сеток, упомянутых выше. Её использование придаст тексту плавный ритм и даст заголовкам (подзаголовкам) пропорциональное пространство по отношению к основному тексту, что сделает их более приятными для читателя.
Есть базовая сетка для чего-то, что вы часто использовали в школе и, возможно, используете сейчас. В линованных тетрадях есть базовая сетка. Неудивительно, что учителя всегда хотели, чтобы мы писали на тетрадной бумаге, а не на белой. Это сохраняло хороший ритм в наших письменных заданиях. Если, конечно, наш почерк не был действительно крошечным или действительно огромным, а затем ритм улетучился.
Если вы внимательно посмотрите на этот листок записной книжки, вы увидите, что на нем также есть сетка документа, которая создает поля. Сетки почти везде, где размещаются текст и изображения.
Иерархические сетки
Иерархические сетки в основном используются в веб-дизайне. Цель иерархической сетки — упорядочить элементы по степени важности. Все модули устанавливаются внутри измеренной сетки рукописи.
Иерархическая сетка может быть настроена в произвольном стиле или с модульной сеткой в качестве ориентира. Чтобы создать сбалансированную иерархическую сетку без направляющей модульной сетки, потребуются годы практики.
Вот почему дизайнеры создают шаблоны сайтов, чтобы люди, не являющиеся дизайнерами, просто размещали в них информацию. Даже опытные дизайнеры используют уже созданные шаблоны, чтобы сэкономить драгоценное время.
При переходе на цифровые платформы газеты перешли от обычных симметричных сеток столбцов к сеткам иерархии со столбцами внутри пространственных зон.
Составные сетки
Правило третей
Это сетка композиции, которая разделяет любое пространство на сетку из 9 равных пространств. Эта сетка может быть вертикальной или горизонтальной, но все девять пространств всегда должны быть одинакового размера. Элементы в дизайне расположены двояко.
Точки фокусировки размещаются в соответствии с местом пересечения линий сверху слева, сверху справа, снизу слева и затем снизу справа. Другие важные элементы, обычно основной текст, помещаются внутри пространств, образованных пересекающимися линиями.
Золотое сечение
Золотое сечение также еще называют золотой спиралью. Это явление композиции, встречающееся в природе, также применяется в дизайне. Многие известные логотипы были созданы с использованием золотого сечения, которое используется еще и в фотографии.
Золотое сечение тесно связано с последовательностью Фибоначчи. Это математическое уравнение управляет измерением Золотого Прямоугольника идеально сбалансированной формы. Использование золотого сечения или группы золотых прямоугольников в ваших проектах будет соответствовать древней композиции природы.
Композитные сетки
Когда дизайнеры используют сетки, они не всегда придерживаются основ. Смешивание сеток — распространенный способ сделать дизайн макета более креативным и привлекательным. Многостраничный документ будет соответствовать тем же размерам сетки рукописи, но будет иметь разные сетки для разных частей форматов.
Посмотрите, как выглядит макет журнала, когда страницы открыты и расположены рядом. Обратите внимание на пробелы, которые сохраняют одинаковую пропорцию от страницы к странице. Креативное использование составных сеток сделает ваши проекты более приятными.
Выбор правильной сетки для макета
Выбор лучшей сетки будет зависеть от того, над каким дизайном вы будете работать. Для дизайнов с большим количеством текста обязательно нужны сетки.
Дизайн с большим количеством абстрактных цветовых и формальных композиций лучше подходит для правила третей или золотого сечения.
Шаблоны существуют, чтобы сэкономить вам (и вашему дизайнеру) драгоценное время на построение сетки. Поэтому этот вариант тоже имеет место быть.
Шаблонизация Joomla — альтернативный макет и переопределение шаблонов
Здравствуйте друзья! В предыдущей заметке мы затронули тему wordpress, здесь же будем рассматривать joomla, а именно как создать и переопределить шаблоны вывода. Нет, нет, не общий шаблон сайта (хотя работать будем с ним), а нечто другое, чем многие разработчики, к сожалению, просто пренебрегают. Но обо всем по порядку.
Ка устроена шаблонизация в Joomla?
Давайте сначала разберем, как устроена шаблонизация в joomla. Я объясню в общих чертах, но так, чтобы вам стало понятно о каких шаблонах я веду речь. Все мы знаем, что у сайта есть шаблон, который мы можем изменить на любой, какой захотим. Так вот в данном шаблоне могут содержаться как бы под-шаблоны, а именно шаблоны расширений. Представьте, вы хотите изменить стиль вывода, к примеру, какого либо модуля, возьмем, модуль вывода последних материалов. Модуль может быть как родным встроенным, так и сторонним, в принципе не важно, суть одна. Представьте нам нужно поменять местами заголовок статьи и картинку анонса, т.е. было — сначала идет заголовок статьи, потом под ним картинка, потом дата, потом текст и т.д. А нам дизайнер нарисовал так — картинка выше, а заголовок ниже. Как мы будем менять? Вот тут самое интересное… Многие разработчики, не задумываются о том, что joomla это быстроразвивающаяся система, которой свойственно частое обновление. Но многие разработчики находят эти самые строчки в файлах модуля и меняют их как им нужно. А разве так нельзя? Почему, можно, только после обновления модуля или движка, если это родной модуль — плакали ваши изменения и все ваши труды уйдут в никуда. Т.е., измененные файлы просто затрутся при обновлении. Так вот, разработчики предусмотрели это и придумали систему шаблонизации и на мой взгляд это очень правильный и удобный подход.
Так каким же образом происходит переопределение шаблонов? Joomla, как и большинство современных движков работает по модели MVC — модель, вид, контроллер. Не буду сейчас углубляться, но скажу, что данная модель предусматривает отделение логики от шаблона. Так вот, как раз данный шаблон и выносится в главный шаблон joomla. Joomla так устроена, что если в главном шаблоне сайта в папке «html» не будут найдены шаблоны расширений, то она выведет их из ядра. Чтобы было понятно приведу один пример.
Возьмем стандартный компонент com_content — это компонент статьи joomla. Попробуем переопределить вид избранных статей. Выведем их, к примеру, на главной странице. Для этого нам необходимо вынести шаблон вывода избранных статей компонента в главный шаблон joomla. Для этого создаем в корне главного шаблона сайта папку html, далее в ней папку «com_content», далее в ней папку «featured» (избранные материалы), т.е. путь будет примерно следующим — /templates/ваш шаблон/html/com_content/featured. Теперь идем по следующему пути — /components/com_content/views/featured/tmpl/ и копируем файлы default.php, default_links.php и default_item.php в созданную папку «featured» вашего шаблона. Теперь редактируете данные файлы так, как нам нам необходимо. Изменения сразу же сможете увидеть на сайте. Теперь при обновлении joomla ваши изменения останутся нетронутыми.
Далее, переходим на вкладку «Создать переопределение» и перед нами откроется три столбца списка расширений для которых доступно переопределение: модули, компоненты и макеты.
Теперь достаточно щелкнуть по интересующему расширению и переопределения автоматически создадутся в папке выбранного шаблона. На мой взгляд это очень упрощает жизнь, т.к. не надо париться какие папки создавать, что куда вкладывать и т.д.
Также, помимо шаблонов компонентов и модулей мы можем переопределить вид макетов. Что такое макеты? Например, нам надо изменить шаблон постраничной навигации. Для этого достаточно в админке создать шаблон макета «Pagination» и изменить его так, как нужно. Макеты — это новинка, которая появилась в joomla 3.
Альтернативный макет
Теперь мы понимаем, что прежде, чем менять оформление вывода определенного расширения необходимо создать его шаблон. Но представьте, что одному и тому же модулю необходимо задать несколько оформлений, т.е. в одном разделе сайта оформление одно, в другом разделе оформление другое. Как здесь быть? Скажу, что и это разработчики предусмотрели и создали специальную опцию под названием «Альтернативный макет». Такую опцию вы можете увидеть в настройках модуля или компонента. Вот, например, в настройках модуля это выглядит так.
Далее получаем сообщение, что переопределение создано и следующее, что мы сделаем это перейдем в папку шаблона «Protostar» (если сайт на хостинге, то лучше воспользоваться ftp-клиентом, например, total commander’ом) и видим, что в корне шаблона появилась папка «html», открываем данную папку, далее папку «mod_login» и видим два файла шаблона: default.php и default_logout.php. Мы можем изменить данные файлы так, как мы этого хотим и результат сразу же можем пронаблюдать на сайте после обновления страницы. Но данные изменения пременятся сразу ко всем созданным модулям «mod_login», а нам надо создать два разных оформления.
Теперь создадим копии шаблонов переопределения в папке mod_login шаблона сайта (выделяем файл, жмем ctrl+с, затем ctrl + v), у нас появятся файлы с приставкой » — копия». Переименуем оба файла, заменив приставку » — копия» на, например, «-alternative» (названия файлов должны быть строго латиницей и не содержать знаки нижнего подчеркивания), т.е. у нас должны появиться два дополнительных файла: default-alternative.php и default-alternative_logout.php. Теперь ищем код кнопки в файле default-alternative.php с классом «btn btn-primary» и меняем «btn-primary» на «btn-warning» (класс кнопки предупреждения в twitter bootstrap), т.е. вот так — class=»btn btn-warning».
Теперь идем в настройки модуля mod_login и видим, что в списке «Альтернативный макет» появился дополнительный шаблон «default-alternative».
Все, теперь мы можем клонировать наш модуль и выбрать в опции «Альтернативный макет» шаблон «default-alternative». Теперь данный шаблон будет выводится на сайте с оранжевой конопочкой входа.
Альтернативный макет категорий и статей
Также, как и модулям статьям и категориям также можно назначить свой альтернативный макет вывода. Мы можем переопределить вывод любой статьи или категории. При создании сайта часто приходится прибегать к таким методам, особенно, если это большой сайт и на нем много всякой различной информации.
Альтернативный макет мы можем назначить отдельной категории и отдельной статье.
Стоит отметить сразу, что альтернативный макет категории сработает, только в том случае, если категория не привязана к пункту меню с типом «Блог категории» или «Список материалов категории». Чтобы вывести альтернативный макет категории, которая привязана к пункту меню воспользуемся другим методом, но об этом ниже…
Альтернативный макет отдельной статьи
Теперь, если перезагрузить страницу мы сможем увидеть наши изменения.
Давайте теперь нашему альтернативному макету «default-alt» дадим адекватное название. Например, назовем так — Мой альтернативный макет. Для этого мы должны добавить константу с переводом — TPL_НАЗВАНИЕ ВАШЕГО ШАБЛОНА_COM_CONTENT_ARTICLE_LAYOUT_НАЗВАНИЕ ФАЙЛА АЛЬТЕРНАТИВНОГО МАКЕТА=»Мой альтернативный макет» — в файл локализации шаблона — ru-RU.tpl_название шаблона.sys.ini.
Я использую стандартный шаблон «protostar» и название файла альтернативного макета у меня — default-alt.php. В моем случае я для перевода добавил константу TPL_PROTOSTAR_COM_CONTENT_ARTICLE_LAYOUT_DEFAULT-ALT=»Мой альтернативный макет» в файл ru-RU.tpl_protostar.sys.ini (/language/ru-RU/). Теперь при выборе альтернативного макета у меня выводится мое название.
Теперь жмем на кнопочку «Создать» и в поле «Языковая константа» вводим нашу константу, у меня это — TPL_PROTOSTAR_COM_CONTENT_ARTICLE_LAYOUT_DEFAULT-ALT. В поле «Текст» вводим ее перевод — Мой альтернативный макет. Жмем сохранить. Все, макет также будет переведен.
Альтернативный макет категории
Еще раз напомню! Данный альтернативный макет будет применен только в том случае, если категория не привязана к пункту меню с типом блог категории или список категории.
Также можно дать адекватное название макету, создав языковую константу — TPL_НАЗВАНИЕ ШАБЛОНА_COM_CONTENT_CATEGORY_LAYOUT_НАЗВАНИЕ ФАЙЛА МАКЕТА (копия файла blog.php). В моем случае это будет — TPL_PROTOSTAR_COM_CONTENT_CATEGORY_LAYOUT_MYBLOG, в поле перевод я дал свое название — Мой блог.
Итак мы переопределили шаблон вывода блога категории, но если вы заметили в папке category переопределения существуют еще и файлы: default.php, default_item.php и default_children.php — это у нас файлы шаблона списка категории. Так, что если хотите создать альтернативный макет списка категории, то вам необходимо создать копии именно данных файлов. Остальное все аналогично.
Исходя из данного кода, мы видим, что у нас подключается файл с названием — blog_style_default_item_title, вот как раз его и будем искать в папке layouts. У меня данный файл присутствует — blog_style_default_item_title.php. Можно сразу открыть его и отредактировать, но я предлагаю также создать альтернативный макет данного шаблона заголовка. Для этого создаем копию данного файла и переименуем его, например, я его назвал так — myblog_style_default_item_title.php. Теперь переходим в файл myblog_item.php и меняем строчку
Теперь, файл шаблона myblog_style_default_item_title.php можно менять как угодно и изменения будут применены именно в той категории, которой назначен альтернативный макет категории. Вот так вот все устроено. Таким же образом переопределяются и другие шаблоны колонки «Макеты».
Данный альтернативный макет также можно определить глобально, т.е. по умолчанию будет назначаться всем категориям. Идем в настройки стандартного компонента статьи joomla и во вкладке «Категория» выбираем нужный макет.
Альтернативный макет пункта меню
Теперь давайте рассмотрим другой вариант создания альтернативного макета с привязкой к пункту меню. Идем в директорию — /templates/ваш шаблон/html/com_content/categoty и создаем копию файла blog.xml и далее переименовываем на (в моем случае) myblog.xml. Теперь давайте откроем данный файл. В начале файла мы увидим структуру следующего вида:
Это структура как раз и определяет пункт меню для нашего макета. Изменим следующие константы на свои, заменив выделенный фрагмент в соответствии с созданным альтернативным шаблоном и создадим для них переопределения в языковых файлах:
COM_CONTENT_CATEGORY_VIEW_BLOG_TITLE
COM_CONTENT_CATEGORY_VIEW_BLOG_OPTION
JHELP_MENUS_MENU_ITEM_ARTICLE_CATEGORY_BLOG
COM_CONTENT_CATEGORY_VIEW_BLOG_DESC
Я назвал их следующим образом:
COM_CONTENT_CATEGORY_VIEW_MYBLOG_TITLE
COM_CONTENT_CATEGORY_VIEW_MYBLOG_OPTION
JHELP_MENUS_MENU_ITEM_ARTICLE_CATEGORY_MYBLOG
COM_CONTENT_CATEGORY_VIEW_MYBLOG_DESC
Идем в менеджер языков и создаем переопределения констант для области панель управления с нужным вам языком. Мне хватило создать переопределения для двух констант: COM_CONTENT_CATEGORY_VIEW_MYBLOG_TITLE и COM_CONTENT_CATEGORY_VIEW_MYBLOG_DESC.
Создаем новый пункт меню, выбираем тип «Материалы» и видим, что там появился новый тип созданного нашего альтернативного макета. Я назвал его «Альтернативный макет блога категории».
Теперь вывод статей в данном пункте меню будет отображаться в соответствии с созданным макетом.
Хочу предупредить, что если вы создаете альтернативный макет пункта меню, то данный альтернативный макет выбрать глобально или из категории у вас уже не получится, т.к. он будет уже не доступен.
Стиль модуля
Давайте вернемся к нашим модулям и посмотрим, что еще там можно сделать, чтобы упростить нам жизнь. До сих пор мы разбирали внутренние макеты каждого расширения, говорили о том, что их можно переопределить, но у модулей есть как бы еще и внешняя оболочка, которая была нам недоступна при вышесказанных методах. Что это за оболочка такая? Это, например, блок с классом moduletable, который окутывает каждый модуль со стандартным стилем вывода xhtml. Также сюда можно включить еще и заголовок модуля, который по умолчанию выводится в теге H3. Теперь представьте ситуацию — вам нужно одному из модулей, вернее его заголовку изменить тег H3 на обычный div-блок с определенным классом, скажем, класс moduleTitle, + еще добавить внутрь данного блока тег span, т.е. обрамить заголовок еще дополнительным тегом span. Это касалось отдельного модуля. А что, если вам нужно вывести таким образом все модуля в определенной модульной позиции?
Давайте будем разбираться. Мы можем создать уникальную обертку и назначить ее любому модулю. Для этого создаем файл modules.php в папке вашего шаблона, а именно полный путь выглядит так — /templates/ваш шаблон/html/modules.php. Открываем данный файл и вставляем в него следующий код:
Но не спешите сохранять, нам надо его еще отредактировать, а если быть точнее создать уникальный стиль модуля, иначе на сайте выскочит ошибка в виде белого экрана (при отключенном отображении ошибок), т.к. данный стиль уже существует. Нас интересует функция «modChrome_xhtm» дадим ей уникальное имя, я назвал так — «modChrome_myStyle». Все, теперь содержимое функции можно подредактировать так, как нам это нужно. В результате, если осуществить задуманное я модернизировал код следующим образом:
Теперь можно сохранить данный файл. Следующее, что мы сделаем, идем в менеджер модулей и открываем на редактирование нужный модуль. Переходим на вкладку «Дополнительные параметры», спускаемся вниз и в последнем фильтре «Стиль модуля» видим, что у нас появился дополнительный стиль — у меня это myStyle.
Выбираем данный стиль и наблюдаем результат. Если проинспектировать Firebug’ом видим, что вместо обычного заголовка H3 у нас появился div-блок с классом moduleTitle, содержащий еще и внутренний тег span.
Эта особенность назначать уникальный стиль каждому модулю появилась в joomla 3. В joomla 2.5 я такой возможности не видел. Так, что обновитесь до joomla 3, если вы этого еще не сделали.
Теперь давайте рассмотрим, как сделать вывод всех модулей по заданному стилю в определенной модульной позиции. Модульная позиция в шаблоне вставляется следующий образом:
name=»header» — вместо header вводите свое название модульной позиции.
Если вы заметили в данной позиции выводится стандартный стиль — xhtml. Заменим его на наш созданный — myStyle, т.е. вот так:
Все, теперь все модуля в данной модульной позиции будут выводиться по нашему стилю. Респект разработчикам, что дали такую возможность так гибко настраивать шаблон!
Дополнительные возможности
Если вы заметили в той же вкладке модуля «Дополнительные параметры» помимо полей «Альтернативный макет» и «Стиль модуля» присутствуют также такие поля, как, «Суффикс CSS-класса модуля», «Кэширование», «HTML-тег модуля», «Размер Bootstrap», «HTML-тег заголовка», «CSS-класс заголовка». Ну, поле «Кеширование» к шаблонизации отношения не имеет, поэтому пока его опустим. Рассмотрим остальные поля.
Суффикс CSS-класса модуля — добавляет суффикс к блоку с классом moduletable. Дополнительный класс можно задать, как через пробел, так и через дефис или вовсе написать слитно. Таким образом, мы можем уникализировать класс блока модуля и писать для него такие стили, какие хотим.
HTML-тег модуля — работает, если мы выберем стиль модуля html5. Данный стиль создан по умолчанию. Опция позволяет заменить стандартный div-блок на один из выбранных элементов html5 — section, nav, article и т.д.
Размер Bootstrap — работает при выбранном стиле модуля html5. Данная опция актуальна только в том случае, если вы в своем шаблоне сайта используете фреймворк Twitter Bootstrap. Указывает размер модуля, выбирая соответствующую цифру. Например, если выберем цифру 2, то в наш блок с классом moduletable добавится через пробел класс span2. Если вы знакомы с данным фреймворком, то знаете что блок с классом span2 имеет свою определенную ширину и данная ширина адаптируется в зависимости от размера экрана окна браузера.
HTML-тег заголовка — работает при выбранном стиле модуля html5. Если помните, по умолчанию тег заголовка у модуля — H3. Так вот, данный тег можно переопределить уровнем заголовка от H1 до H6 или выбрать тег параграфа — p.
CSS-класс заголовка — также, данная опция будет работать при выбранном стиле html5. Задает класс заголовку модуля.
Вот в принципе и все, что я знаю о шаблонах joomla и о чем я вам хотел рассказать. Если всплывет еще что то, то обязательно добавлю в данную статью.
Напоследок напомню — всегда переопределяйте стандартные шаблоны при верстке шаблона, иначе рискуете потерять все изменения при обновлении движка или расширений!
На этом все. Всем пока! Жду ваших комментариев.