Блок «Партнеры»

31 января 2024

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

Пример

Если у вас так же много парнёров, как и у меня, то вот пример расстановки их логотипов по 6 штук в ряд для десктопной версии и по 3 штуки для мобильной.

Блок «Партнеры». Фотограф Константин Шамин

Как это сделано?

Добавляем блоки

Для этого нам надо воспользоваться блоками «четыре фотографии в ряд. Добавляем таких блоков столько, сколько у вас логотипов

Загружаем логотипы

Загружаем логотипы в блоки в том порядке как вы хотите чтобы они были у вас на сайте

Добавляем виджет "HTML-блок"

И вписываем в него следующее:

<script>
// !!!НАСТРОЙКИ!!!
var partners = ["#section-9057245","#section-9057250","#section-9057255","#section-9057260","#section-9057265","#section-9057270"];
var count_per_line_pc = 6; 
var count_per_line_mobile = 3;

// !!!НЕ МЕНЯТЬ!!!
document.addEventListener("DOMContentLoaded",function(){for(i=1,window.clpc=["","col-md-12","col-md-6","col-md-4","col-md-3","col-md-2","col-md-2","col-md-1","col-md-1","col-md-1","col-md-1","col-md-1","col-md-1"][count_per_line_pc],window.clmb=["","col-sm-12","col-sm-6","col-sm-4","col-sm-3","col-sm-2","col-sm-2","col-sm-1","col-sm-1","col-sm-1","col-sm-1","col-sm-1","col-sm-1"][count_per_line_mobile];i<partners.length;i++)$(partners[0]+" .row").append($(partners[i]+" .row div:not(.lazy-image)")),$(partners[i]).remove();$(partners[0]+" .row").addClass("d-flex justify-content-center"),$(partners[0]+" .row div:not(.lazy-image)").each(function(){$(this).removeClass("col-sm-12 col-md-3").addClass(window.clmb+" "+window.clpc)})},!1);
</script>

Настройка

Жирным в коде выделены настройки. Их немного.

partners. Нам нужны ID созданных блоков «четыре фотографии в ряд». Эти ID можно взять в настройках блока (смотри скриншот) и как в примере в кавычках через запятую их перечислить. У меня в примере шесть блоков.
count_per_line_pc — количество логотипов в строку для десктопной версии
count_per_line_mobile — количество логотипов в строку для мобильной версии

ВНИМАНИЕ! count_per_line_pc и count_per_line_mobile могут принимать значения: 1, 2, 3, 4, 6, 12