Использование CSS-сеток в Wordpress - PullRequest
Новая
       4

Использование CSS-сеток в Wordpress

0 голосов
/ 29 мая 2018

Итак, я создал веб-сайт и теперь превращаю его в настраиваемую тему WordPress.Дело в том, что я использовал CSS-сетку для создания галереи, и я хочу сделать ее динамичной.Мне нужно загрузить фотографии (а иногда и видео или GIF-файлы) в WordPress и сделать так, чтобы они помещались в сетку.

Это мой код: 

**HTML**
 <div class="gallery">
        <figure class="figure1">
            <img src="img/r1.jpg" class="figure-img">
        </figure>

        <figure class="figure2">
            <img src="img/r2.jpg" class="figure-img">
        </figure>

        <figure class="figure3">
            <img src="img/r3.jpg" class="figure-img">
        </figure>

        <figure class="figure4">
            <img src="img/r4.jpg" class="figure-img">
        </figure>

        <!-- more figures -->
</div>


 **CSS**
 .gallery {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr 1fr;
 }

 .figure-img {
     display: block;
     width: 100%;
     height: auto;
     object-fit: cover;
     margin-bottom: 0
 }

 .figure1 {
     grid-column: span 1;
 }

 .figure2 {
     grid-column: span 3;
 }

 .figure3 {
    grid-column: span 4;
 }

 .figure4 {
     grid-column: span 4;
 }

 /* more figures */

Поскольку некоторые изображения не должны занимать всю строку, а другие (это немного случайно), я не могу просто использоватьобычный плагин галереи.

Я должен добавить, что я новичок, когда дело доходит до php ... Есть идеи?

Спасибо!

1 Ответ

0 голосов
/ 30 мая 2018

Рассматривали ли вы использование Advanced Custom Fields Pro?Вы можете использовать поле повторителя и создать галерею, а также создать пользовательские классы для переключения каждого изображения на размер сетки.

...