Image list 多图列表
[原创]

Image list 多图列表

分类:功能增强
版本:1.00.03
下载:331
获星:0
创建时间:2021-08-06
最后更新:2022-11-09
免费
请到后台应用商店下载 / Please go to the background app store to download

此插件支持在扁平模式下,首页、频道、列表调用多图,调用3张、6张、9张图。width宽度小于150px,height高度小于175px会被过滤不调用,小于3张不调用,大于3张,且小于6张,仅筛选3张,以此类推。

 

20211023更新筛选图片逻辑;

 

前台默认模板 bootstrap4 示例代码,具体自行修改 CSS。

<style>
    .thread-image-list {position: relative;overflow: hidden;}
    @media (max-width: 576px) {
        .thread-image-list .thumbnail{min-width: 103.6px;width: 100%;max-height: 70px;height:100%;object-fit:cover;}
    }
    @media (min-width: 576px) and (max-width: 992px) {
        .thread-image-list .thumbnail{min-width: 214.6px;width: 100%;max-height: 145px;height:100%;object-fit:cover;}
    }
    @media (min-width: 992px) {
        .thread-image-list .thumbnail{min-width: 259px;width: 100%;max-height: 175px;height:100%;object-fit:cover;}
    }
</style>
<?php if (isset($well_imagelist[$_thread['tid']])) { ?>
<div class="row mt-2">
    <?php $i = 0; foreach($well_imagelist[$_thread['tid']] as $_image) { ?>

    <!-- 自动输出3、6、9张图片,如需只限制输出3张,将数字 9 改为3即可 -->
    <?php if(++$i > 9) break; ?>

    <div class="col-4 thread-image-list mb-3">
        <img class="d-block w-100 rounded thumbnail" src="<?php echo $_image['icon_fmt'];?>" />
    </div>
    <?php } ?>
</div>
<?php } ?>

默认模板 thread_list.inc.htm 替换删掉 16-23 行代码,同时删掉 15 行 class="media" 不然会挤压成一行

<?php if ($_thread['icon']) { ?>
<div class="col-4 col-md-3">
    <a href="<?php echo $_thread['url']; ?>" <?php echo (10==$_thread['type']?'rel="nofollow" target="_blank"':''); ?>>
    <img class="d-block w-100 rounded" src="<?php echo $_thread['icon_fmt'];?>" title='<?php echo $_thread['subject'];?>' alt='<?php echo $_thread['subject'];?>' />
    <!--{hook thread__list_inc_avatar_after.htm}-->
    </a>
</div>
<?php } ?>

 

4
最新回复(4)
  • meinv5202021-8-28
    2
    这个插件不错,挺实用的,但刚测试了下发现了2个问题
    1.文章里面只有不满3张图片的时候,既不显示上传的缩略图,也不显示默认缩略图,这种情况感觉可以提取第一张图片显示呀?
    2.如果图片是外链的情况,好像也不显示缩略图
  • 敲定吧2021-10-18
    3
    我社死了,这配图,公司妹子们说我竟然好这口!!!【捂脸】
  • 飞快网络2021-10-21
    4
    之前列表每条都有三张小图,更新后,每页底部三条有小图,其他都不显示?你们遇到这种情况了吗?
  • well2021-12-16
    5
    大于3张显示,如果只要一张就不好整了。我的办法是判断icon,如果icon为空就显示多图列表,如果多图列表也没有就无图。这样的缺点是发布的时候如果想要多图就把获取缩略图的勾去掉。大家有更好的方法吗?