Вопрос? Сжатие изображений при использовании доп поля "загружаемая галерея изображений"

Добрый день, как реализовать вывод кадров с фильма через доп поле Загружаемая галерея изображений. Сейчас реализовано вывод картинок через 3 доп поля, работает норм. Но когда изменяю доп поле на Загружаемая галерея изображений все картинки идут вертикально , а мне нужно горизонтально. В шаблоне блок выводиться через вот этот код

Код:

<div class="fscreens fx-row">[xfvalue_screens]</div>

.

 

В css

Код:

    .fscreens .xfieldimagegallery {display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%;}

и надо удалить что связано с xfieldimagegallery что вероятно лежит в engine.css

 

Нашел вот этот код

Код:

.xfieldimagegallery {margin:20px -5px; list-style: none; clear: both;}
.xfieldimagegallery:after {content: ""; display: table; clear: both;}
.xfieldimagegallery li {list-style: none; margin:0;}
.xfieldimagegallery li img {float: left; margin:5px; border: 5px solid #fff; width: 150px; height: 100px;}
.xfieldimagegallery li img:hover {box-shadow: 0px 0px 7px rgba(0,0,0,0.4);}

 

Еще есть вот этот код но уже в файле styles.css

Код:

fscreens br, .fscreens > img {display: none;}
.fscreens a, .fscreens a img {display: block; width: 29%; height: 64px; overflow: hidden; border-radius: 3px;}
.fscreens a img {width: 100%; object-fit: cover;}

 

Первый код удалить, а этот заменить на

Код:

.fscreens .xfieldimagegallery li {width: 29%;}
.fscreens br, .fscreens > img {display: none;}
.fscreens a, .fscreens a img {display: block; width: 100%; height: 64px; overflow: hidden; border-radius: 3px;}
.fscreens a img {width: 100%; object-fit: cover;}

 

Вообще ничего не изменилось

 

Код:

[xfvalue_X image="Nr"]

Выводит загруженные для дополнительного поля с типом "Галерея" изображения, по отдельности. Где "X" это имя дополнительного поля, а "Nr" это номер изображения из галереи. Например, при использовании [xfvalue_test image="2"] будет выведено изображение номер два, загруженное в дополнительное поле с именем "test".

Код:

<div class="fscreens fx-row">[xfvalue_screens image="1"]</div>
<div class="fscreens fx-row">[xfvalue_screens image="2"]</div>
<div class="fscreens fx-row">[xfvalue_screens image="3"]</div>

 

Спасибо , работает . Теперь другая проблема, если поле не заполнено то на месте картинки отображается код

 

Код:

[xfgiven_screens]<div class="fscreens fx-row">[xfvalue_screens image="1"]</div>[/xfgiven_screens]

Закрывай дополнительные поля так ...

Код:

[xfgiven_x] здесь код картинок [/xfgiven_x]

Думаю порядок понятен дальше?

 

Смотри что происходит, если я делаю так как ты написал первый раз, то у меня картинки выводятся вертикально в одну строку , а мне нужно что бы они были горизонтально в одну строку, я взял и прописал вот такой код и все норм заработало , но если поля не заполнены то в шаблоне показывается код. Как при моем форматирование кода не выводить надписи если поле не заполнено ну или же как при твоем сделать что бы картинки были горизонтально

Код:

  <div class="fscreens fx-row">[xfvalue_screens image="1"][xfvalue_screens image="2"][xfvalue_screens image="3"]</div>

 

Все разобрался , большое спасибо за помощь. Есть еще конечно свои нюансы, когда оставляешь 2 картинки вместо 3 то код с 3 картинки выводиться. сейчас вот так код выглядит

Код:

[xfgiven_screens]
            <div class="fscreens fx-row">[xfvalue_screens image="1"][xfvalue_screens image="2"][xfvalue_screens image="3"]</div>
[/xfgiven_screens]

 

Надо было просто очистить кеш

 

Чистил и в CF тоже , пробовал даже в ТОР браузере. Все равно спасибо , за помощь