Как задать шейпу фон-картинку из CMS Потока в Zero Block

В Zero Block связать заливку фигуры (шейпа) с полем потока напрямую нельзя — динамическая связь с картинкой доступна только у элемента «Изображение». Обходим это через скрипт: прячем обычное изображение, связанное с потоком, и скрипт подставляет его картинку фоном нужной фигуре.

Фигуре (или группе Post целиком, если ссылка назначена на всю карточку) задайте CSS-класс: bg-target-shape. Если у шейпа уже есть скругление углов в дизайне — ничего дополнительно делать не нужно. Если скругления нет и его нужно добавить программно — впишите значение в переменную CARD_BORDER_RADIUS в коде ниже.

Вставьте код целиком в настройки страницы: Ещё → Вставка кода → «Перед </body>», затем опубликуйте страницу.

<style>
/* Прячем изображение-донора, из которого скрипт возьмёт картинку */
.bg-source-image {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {
applyShapeBackgrounds();
});
document.addEventListener('t-feed-added-articles', function () {
applyShapeBackgrounds();
});

// Если у шейпа нет своего border-radius в дизайне, впишите нужное
// значение здесь (в пикселях). Если радиус уже задан в дизайне — оставьте 0.
var CARD_BORDER_RADIUS = 25;

function findRepeatingCardAncestor(el, maxLevels) {
maxLevels = maxLevels || 8;
var current = el;

for (var i = 0; i < maxLevels && current && current.parentElement; i++) {
var parent = current.parentElement;
var sameClassSiblings = 0;

for (var j = 0; j < parent.children.length; j++) {
if (parent.children[j] !== current && parent.children[j].className === current.className) {
sameClassSiblings++;
}
}

if (sameClassSiblings >= 1 && current.className) {
return current;
}

current = parent;
}

return null;
}

function applyShapeBackgrounds() {
var sourceImages = document.querySelectorAll('.bg-source-image img, .bg-source-image');

sourceImages.forEach(function (imgWrap) {
var img = imgWrap.tagName === 'IMG' ? imgWrap : imgWrap.querySelector('img');
if (!img) return;

var src = img.getAttribute('src') || img.getAttribute('data-original');
if (!src) return;

var card = findRepeatingCardAncestor(imgWrap);
if (!card) return;

var targetShape = card.classList.contains('bg-target-shape')
? card
: card.querySelector('.bg-target-shape');
if (!targetShape) return;

if (targetShape.dataset.bgApplied === '1') return;

targetShape.style.backgroundImage = 'url("' + src + '")';
targetShape.style.backgroundSize = 'cover';
targetShape.style.backgroundPosition = 'center';
targetShape.style.backgroundRepeat = 'no-repeat';

targetShape.style.overflow = 'hidden';
if (CARD_BORDER_RADIUS > 0 && getComputedStyle(targetShape).borderRadius === '0px') {
targetShape.style.borderRadius = CARD_BORDER_RADIUS + 'px';
}

targetShape.dataset.bgApplied = '1';
});
}
</script>

Проверка после публикации: откройте страницу, нажмите F12 → Console и введите document.querySelectorAll('.bg-source-image').length и document.querySelectorAll('.bg-target-shape').length — оба числа должны совпадать с количеством карточек. Если фон не появился, в первую очередь проверьте, что Lazy Load у изображения-донора точно выключен.