Question

我正在开发一个自定义投资组合模板页面，以显示包含图库的所有帖子。由于一些画廊有很多图像，我想折叠它们以尽量减少页面滚动。

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

我正在尝试关注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" alt="Gallery image" />
                <?php
            endforeach;
        endif;
    endwhile;
?>

Answer 1

如果你将带有$ data参数的图库设为true，你可以遍历数组并使用bootstrap show / hide通常的方式！

$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个循环后等）

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

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

1 个答案: