Как подтянуть изображение из tv-поля в css свойство?

Question

[Булат Булатов]

Можно ли как то сделать так, чтобы при заполнении tv-поля( изоб.1 и изоб.2), при наведении на элемент в css указывался путь до файла через tv-поле, по типу [[+image]]. Хочу сделать через :hover.

Comments

[Вадим]

( изоб.1 и изоб.2)

[Александр Васильев]

Делайте два поля и указывайте их в соответсвующие места верстки

Answer 1

[Сергей delphinpro]

<div class="my-div" style="--image:url([+image+]); --image-hover:url([+image_hover+])">
</div>

.my-div {
  /* по умолчанию, если не задано в разметке */
  --image: none;
  --image-hover: none;

  background-image: var(--image);
}
.my-div:hover {
  background-image: var(--image-hover);
}

Имейте ввиду, что модх вставляет пути без начального слэша. А значит путь будет рассчитываться относительно css файла, даже если значение для кастомного свойства задано в разметке. Поэтому лучше будет явно указать начальный слэш, или адрес сайта

<!-- так -->
<div class="my-div" style="--image:url(/[+image+])"></div>
<!-- или так -->
<div class="my-div" style="--image:url([(site_url)][+image+])"></div>

Comments

[Булат Булатов]

Шаблон самой страницы

[[!getImageList?
                        &tvname=`people-images`
                        &tpl=`people-imagesTpl`
                        &docid=`[[*id]]`
                        &limit=`0`
                        &toPlaceholder=`people-images`
                    ]]
                    [[!+people-images:notempty=`
                        <section class="section__page instruments">
                            <div class="container">
                                <div class="row">
                                    [[!+people-images]]
                                </div>
                            </div>
                        </section>
                        `]]

Шаблон картинки

<div class="my-div" style="--image1:url('/[[+image1]]'); --image2:url('/[[+image2]]');"></div>

На странице в ресурсах картинки есть, но не отображаются на самой странице, в чем может быть дело? Css код написал как у Вас.

[Булат Булатов]

Upd. Исправил свои косяки, спасибо большое, все заработало!!!