Warp 6 - Разметка для модуля

Разметки модулей определяют выравнивание и размеры наборов модулей в определенной позиции. К примеру, они могут быть выровнены по горизонтали или вертикали. По умолчанию Warp framework предлагает 3 разных разметки модулей. Вы можете найти файлы этих разметок здесь /warp/layouts/modules/layouts/.

Стандартные разметки модулей

equal.php

Каждый модуль имеет равные размеры, и располагаются они горизонтально друг к другу. Добавлена поддержка до 6 модулей. Вы можете, конечно, добавить больше. Пример кода, 4 модуля с равным размером (100 разделено на 4 = 25)

case 4:
	printf('<div class="grid-box width25 grid-h">%s</div>', $modules[0]);
	printf('<div class="grid-box width25 grid-h">%s</div>', $modules[1]);
	printf('<div class="grid-box width25 grid-h">%s</div>', $modules[2]);
	printf('<div class="grid-box width25 grid-h">%s</div>', $modules[3]);
	break;

stack.php

Все модули имеют полную ширину, и располагаются вертикально, один под другим. Пример кода:

printf('<div class="grid-box width100 grid-v">%s</div>', $module);

double.php

Разметка double имеет различные пропорции модулей. К примеру, если у вас 3 модуля, и размер первого в два раза больше, чем двух остальных. Пример кода: 3 модуля, один из них имеет двойной размер:

case 3:
	printf('<div class="grid-box width50 grid-h">%s</div>', $modules[0]);
	printf('<div class="grid-box width25 grid-h">%s</div>', $modules[1]);
	printf('<div class="grid-box width25 grid-h">%s</div>', $modules[2]);
	break;

Как назначить разметку модулей определенной позиции

В настройках вашего шаблона(административной части), вы можете назначить различные настройки модулей определенной позиции. Просто кликните Profiles, спуститесь к разделу Layout Settings и выберите разметку модуля, которую хотите применить к этой позиции.

Как добавить новую разметку модулей?

Чтобы создать новую разметку модуля, добавьте новый файл к /layouts/modules/layouts. Лучшим способом будет скопировать существующую разметку модуля и переделать ее. К примеру, скопируйте /warp/layouts/modules/layouts/double.php в /layouts/modules/layouts/double.php. Эта новая и измененная разметка будет замещать дефолтную. Или просто переименуйте ее и создайте еще одну. Созданная разметка теперь должна быть доступна в настройках темы.

Пример: Как добавить больше колонок

Стандартный вариант решения, это добавить в разметку больше, уже существующих, 6 колонок. Скажем вам нужно 7 модулей, стоящих рядом друг с другом с равными размерами. В этом случае вы копируете файл /warp/layouts/modules/layouts/equal.php в layouts/modules/layouts/. В своей копии equal.php находите case 6, код должен выглядеть так:

case 6:
    printf('<div class="grid-box width16 grid-h">%s</div>', $modules[0]);
    printf('<div class="grid-box width16 grid-h">%s</div>', $modules[1]);
    printf('<div class="grid-box width16 grid-h">%s</div>', $modules[2]);
    printf('<div class="grid-box width16 grid-h">%s</div>', $modules[3]);
    printf('<div class="grid-box width16 grid-h">%s</div>', $modules[4]);
    printf('<div class="grid-box width16 grid-h">%s</div>', $modules[5]);
    break;

Скопируйте весь блок и вставьте его ниже скопированного, но выше блокаdefault. Скопируйте последнюю запись printf и измените $modules[5] на $modules[6]. Теперь мы имеем 7 колонок вместо 6-ти, ширина каждого модуля должна быть отрегулирована. Так как 100% разделенное на 7 (modules) будет примерно 14%, мы должны поменять класс CSS, вместо width16 будет width14. После всего проделанного, новый блок должен выглядеть так:

case 7:
    printf('<div class="grid-box width14 grid-h">%s</div>', $modules[0]);
    printf('<div class="grid-box width14 grid-h">%s</div>', $modules[1]);
    printf('<div class="grid-box width14 grid-h">%s</div>', $modules[2]);
    printf('<div class="grid-box width14 grid-h">%s</div>', $modules[3]);
    printf('<div class="grid-box width14 grid-h">%s</div>', $modules[4]);
    printf('<div class="grid-box width14 grid-h">%s</div>', $modules[5]);
    printf('<div class="grid-box width14 grid-h">%s</div>', $modules[6]);
    break;

Класс CSS width14 пока не существует (все существующие классы находятся в /warp/css/layout.css), поэтому нам надо добавить следующий отрывок в существующий набор стилей. Вы можете либо добавить его в имеющийся файл /css/layout.css или вы можете поместить его во вновь созданный стиль, ваш собственный, тогда ваши изменения при обновлении никуда не денутся.

.width14 { width: 14.2%; } 

Пример: Создание своего собственного распределения размеров для модулей

По-умолчанию, вы можете выбирать между 3-мя опциями equal, double и stack, которые были описаны выше. Если вы хотите свое собственное распределение размеров, к примеру 35% / 30% / 35% для трех модулей в ряду, вы должны создать свою собственную разметку модулей. Чтобы сделать это, создайте новый файл в директории /layouts/modules/layouts/, назовем его custom.php в этом примере. Так как мы хотим только, чтобы разметка работала для трех модулей (в этом примере), содержимое файла custom.php должно выглядеть так:

<?php

switch (count($modules)) {

    case 3:
        printf('<div class="grid-box width35 grid-h">%s</div>', $modules[0]);
        printf('<div class="grid-box width30 grid-h">%s</div>', $modules[1]);
        printf('<div class="grid-box width35 grid-h">%s</div>', $modules[2]);
        break;
        
    default:
        echo '<div class="grid-box width100 grid-h">Error: The current number of 
        modules is not supported in this layout. If you need more you need to change this custom 
        layout.</div>';

}

Как вы видите мы использовали CSS классы width35 и width30. Они пока не существуют (Все имеющиеся width-classes (классы ширины) располагаются в файле /warp/css/layout.css), поэтому нужно добавить следующий отрезок кода в существующую таблицу стилей. Вы можете либо добавить его в имеющийся файл /css/layout.css или вы можете поместить его во вновь созданный стиль, ваш собственный, тогда ваши изменения при обновлении никуда не денутся.

.width30 { width: 30%; }
.width35 { width: 35%; }