Создание нового макета модуля

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

Представление внешнего вида модуля

equal.php - Все модули имеют одинаковые размеры и отображаются горизонтально рядом друг с другом. Поддерживается до шести модулей. Вы, конечно, можете добавить больше. Пример кода для четырех модулей с одинаковым размером.

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 – Макет в две колонки, имеющие различные пропорции модулей. Например, если выводится три модуля, и первый должен иметь ширину в два раза больше двух других. Пример кода:

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 и выберите макет модуля, который вы хотите применить к этой позиции.

Как добавить новый макет для модуля

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

Пример: Как добавить дополнительные столбцы

Общим случаем является добавление в макет дополнительных столбцов, более уже поддерживаемых шести. Допустим, вы хотите отобразить семь модулей, расположенных рядом друг с другом с одинаковым размером. В этом случае вы должны скопировать /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;

Скопируйте целиком этот блок и вставьте его непосредственно под скопированным блоком, но до блока по умолчанию. Продублируйте последний printf и измените $modules[5] на $modules[6]. Так как у нас теперь семь колонок, а не шесть, ширина каждого отдельного модуля должна быть изменена. При делении 100% на 7 (по числу модулей) мы получим ширину каждого модуля приблизительно 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), поэтому вы должны добавить следующий фрагмент в существующую таблицу стилей.

.width14 { width: 14.2%; }

Вы можете добавить его в файл /css/layout.css или разместить в собственном стиле, который будет содержать ваши изменения в безопасном месте в случае обновления.

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

По умолчанию, вы можете выбрать один из трех вариантов размера модулей, равного equal, в две колонки double и стека stack, которые были описаны выше. Если вы хотите собственное распределение размера - скажем, 35% / 30% / 35% для трех модулей в строке, вы должны создать свой собственный макет модуля. Чтобы сделать это, создайте новый файл в папке /layouts/modules/layouts/. В этом примере он назван 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. Они еще не существуют (все существующие классы ширины находятся в /warp/css/layout.css), поэтому вы должны добавить следующий фрагмент в существующую таблицу стилей /css/layout.css или можете создать собственный стиль, который будет содержать ваши изменения в безопасном месте в случае обновления.

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

• 1
• 2
• 3
• 4
• 5