Question

所以，我建立了一个网站，现在我把它变成一个可自定义的wordpress主题。问题是：我使用CSS网格来构建一个库，我想让它变得动态。我需要在wordpress中上传照片（有时是视频或GIF）并使它们适合网格。

这是我的代码：

**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时我是初学者... 有什么想法吗？

谢谢！

Answer 1

您是否考虑过使用Advanced Custom Fields Pro？您可以使用转发器字段并创建库并创建自定义类以切换每个图像的网格大小。

在Wordpress中使用CSS网格

1 个答案: