Решение установить фоновое изображение, используя [шорткод]?

Question

Решение установить фоновое изображение, используя [шорткод]?

Я хотел бы установить случайное фоновое изображение в <div>Контейнер</div>
- Для простоты я установил плагин с помощью [шорткода] для отображения случайных изображений. Это отлично работает.
- Как получить шорткод [wp-image-refresh] работать вместе с background-image:url(...)
- Я попробовал это даже как встроенный стиль без результата.

Вот что у меня есть:

HTML

<div class="header_random-image">
<div id="hero"></div>
</div>

CSS

#hero {
background-image: url('<?php echo do_shortcode("[wp-image-refresh]"); ?>');
background-size: cover;
background-position: 50% 30%;
height:70vh;
width: 100%;
margin-top: -65px;
}

Еще одна попытка без результата: Inline-style

<div class="header_random-image">
<div style="background-image: url('<?php echo do_shortcode("[wp-image-refresh]"); ?>')"></div>
</div>

Кто-нибудь может быть так любезен, чтобы помочь? Или у кого-нибудь есть простое решение для размещения div-random-background-images?

Лучший из Берлина

0

background-image css php shortcode wordpress

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

В большинстве случаев ваш код CSS будет обслуживаться в статическом файле, поэтому код php не будет выполняться.

Поскольку встроенный пример тоже не работает, я полагаю, что короткий код не возвращает URL-адрес изображения, а содержит полный тег изображения. Описание плагина
подтверждает это предположение. WP-IMAGE-ОБНОВЛЕНО

Вы можете попробовать это:

PHP

<div class="header_random-image">
<?php echo do_shortcode("[wp-image-refresh class='hero_class']"); ?>
</div>

CSS

.header_random-image {
overflow: hidden;
}
.hero_class {
height: 100%;
width: auto;
margin-top: 0;
}

Это должно отобразить изображение. Вам все равно придется центрировать его, если вы хотите (используйте flex-box) и проверять наличие проблем, возникающих на экранах разных размеров, в зависимости от соотношения сторон загружаемых изображений, и решать их с помощью Javascript.

Используйте ACF Pro и добавьте поле галереи на ваши сообщения / страницы или страница выбора если вы хотите одинаковые изображения на всех видах.

PHP

<?php
$images = get_field('name-of-your-gallery-field');
shuffle($images);
$imageUrl = images[0]['url'];
<div class="header_random-image">
<div style="background-image: url('<?= $imageUrl ?>"); ?>')"></div>
</div>

0