Wordpress 图片库缩略图网格 - 点击查看更多

Posted 2023-03-29

【中文标题】Wordpress 图片库缩略图网格 - 点击查看更多

【英文标题】：Wordpress image gallery thumbnail grid - click to view more

【发布时间】：2018-05-05 07:23:05

【问题描述】：

我正在开发一个自定义投资组合模板页面，以显示所有带有画廊的帖子。由于一些画廊有很多图片，我想折叠它们以最大限度地减少页面滚动。

在页面加载时，在网格中显示第一行缩略图的最佳方式是什么，然后单击“加载更多”按钮以显示剩余的缩略图？

我正在尝试关注 WP 的 get_post_gallery() 函数，但不知道如何告诉它只加载前几个缩略图，然后单击加载更多。如果我能以某种方式利用 Bootstrap 3 的折叠/展开代码，那就太好了，因为我正在网站上使用该框架。

包括我想要实现的目标的模型： View Mockup

https://codex.wordpress.org/Function_Reference/get_post_gallery

<?php
    /* The loop */
    while ( have_posts() ) : the_post();
        if ( get_post_gallery() ) :
            $gallery = get_post_gallery( get_the_ID(), false );
            
            /* Loop through all the image and output them one by one */
            foreach( $gallery['src'] as $src ) : ?>
                <img src="<?php echo $src; ?>" class="my-custom-class"  />
                <?php
            endforeach;
        endif;
    endwhile;
?>

【参考方案1】：

如果您将 $data 参数设置为 true，则可以循环遍历数组并按常规方式使用引导程序显示/隐藏！

$return_array = get_post_gallery( get_the_ID(), true);

这将返回一个数组，该数组将具有该结构

  'link' => string 'file' 
  'ids' => string 'id1,id2,id3' 
  'src' => 
    array 
      0 => string 'http://yoursite/moo.jpg'
      2 => string 'http://yoursite/moo2.jpg' 
      3 => string 'http://yoursite/moo3.jpg'

如果你打算使用永久链接，你可以用

将 ids 的字符串分割成另一个数组

$ids_Array = explode(',',return_array["ids"]);

然后您可以循环该数组并按照您想要的方式构建引导程序的折叠结构（在 3 次循环后输出分隔容器等）

如果您有任何问题，请告诉我！

【讨论】：

拉尔夫，感谢您的快速回复！我今天会试试这个并跟进。

我尝试了一些你的建议，但我还没有得到它。 PHP 对我来说还是新手，所以我可能会忽略一些明显的东西来连接这些点。