WordPress отображает галерею изображений с разной высотой - PullRequest
Новая
       15

WordPress отображает галерею изображений с разной высотой

0 голосов
/ 13 января 2019

Мне нужно вывести изображения на целевую страницу, созданную на WordPress. Изображения должны отображаться так:

https://i.ibb.co/vk8MqkK/sample.png

Как лучше всего отобразить этот макет на WordPress без каких-либо плагинов?

Я хотел представить каждое изображение как Custom Post Tyle и использовать WP_Query для динамической загрузки их на мою целевую страницу. Но в HTML каждое изображение имеет разные классы для создания такого макета - изображения 2 и 3 обернуты в <div class="grid-y">

HTML (+ базовые классы XY-сетки) 

<div class="grid-container full">
  <div class="grid-x">

    <!-- Image 1 -->
    <div class="cell large-6">
      <img src="img/product-0.jpg" class="width-100 height-100" alt="">
    </div>

    <div class="cell large-6" >
      <div class="grid-y">

        <!-- Image 2 -->
        <div class="cell large-6">
          <img src="img/product-31.jpg" class="width-100 height-50" alt="">
        </div>

        <!-- Image 3 -->
        <div class="cell large-6">
          <img src="img/product-31.jpg" class="width-100 height-50" alt="">
        </div>
      </div> 
    </div>
  </div>
</div>

1 Ответ

0 голосов
/ 13 января 2019

Не изменяя разметку, вы можете попробовать что-то вроде этого: https://codepen.io/paka/pen/LeBbOW Отобразите ячейки в блоке grid-x как inline-block, но не внутри блока grid-y, чтобы они располагались друг под другом. С помощью этой CSS вы получите свой макет: Я добавил некоторые высоты и ширины и цвета, чтобы заменить ваши изображения 

`.grid-x{
  position: relative ;
  height: 100px ;
  width: 205px ;
  padding: 0px ;
}

.grid-y > .cell:first-of-type{
  background: blue ;
}

.grid-y > .cell{
  background: red ;
}

.grid-x > .cell:first-of-type{
  height: 100px ;
  width: 100px ;

  background: #00ff00 ;
}

.grid-y {
  margin: 0px ;
  padding: 0px ;
}
.grid-y > .cell{
  padding: 0px ;
  margin: 0px ;
  height: 50px ;
  width: 100px ;
}

.grid-x > .cell{
  display: inline-block ;
}`
...