DEDE织梦5.7 列表页调用内容页中的所有图片

本文介绍如何在织梦CMS中通过自定义函数和模板标签,从文章内容中提取图片并以幻灯片形式展示。具体步骤包括修改extend.func.php文件,后台配置及模板标签调用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

需要实现的功能效果图如下:

开发时需要独立提取文章内容页 body字段中(可以是自定义字段名称)图片,可以自定义调用图片数量值。如下图所示,可以在列表文章页展示当前文章内中所有图片以幻灯片形式展示出来

网站模板幻灯片部分的初始代码为:

//网站模板幻灯片初始代码

<div class="portfolio-slideshow flexslider animate-onscroll">
    <ul class="slides">
        <li><img src="img/test/1.jpg" alt=""></li>
        <li><img src="img/test/2.jpg" alt=""></li>
        <li><img src="img/test/3.jpg" alt=""></li>												
    </ul>
	<ul class="flex-direction-nav">
		<li><a class="flex-prev" href="#"></a></li>
		<li><a class="flex-next" href="#"></a></li>
	</ul>
</div>

要实现上图效果需要以下三个步骤来实现:

第一步:自定义函数文件

找到织梦根目录下的 \include\extend.func.php 文件在最后添加以下代码:

//extend.func.php 文件在最后添加以下代码


/* 列表页调用文章内容中的所有图片 */
function getbodypics($string, $num){
	preg_match_all("/<img([^>]*)\s*src=('|\")([^'\"]+)('|\")/",$string,$matches);
	$imgsrc_arr = array_unique($matches[3]);
	$count = count($imgsrc_arr);
	$i = 0;
	foreach($imgsrc_arr as $imgsrc){
		if($i == $num) break;
		$result .= "<li><img src=\"$imgsrc\"/></li>";	
                //这里可以给调用图片增加一些样式等,例如:$result .= "<img class='imgs' src=\"$imgsrc\"/>";
		$i++;
	}
	return $result;
}

/*  
前台模板调用标签:[field:body function=getbodypics(@me,数量)/]
	
	
【dede:arclist】 示例:
{dede:arclist addfields='body' channelid='1' row='8'}
[field:body function=getbodypics(@me,3)/]
{/dede:list} 

【dede:list】 示例:
{dede:list pagesize='3' addfields='body' channelid='1'}
[field:body function=getbodypics(@me,5)/]
{/dede:list} 
	
说明:
channelid:	为内容模型ID
addfields:	列表附加字段名称(可以自定义)但是自定义字段时,一定要选择“使字段可以在列表的底层模板中获得”
*/

第二步:织梦后台配置

在后台选择:核心 —  频道模型 — 内容模型管理 — 基本设置 — 列表附加字段 中添加" body ",如下图所示

第三步:前台模板标签调用

我们以文章列表页为例,在模板文件 list_article.htm 中使用


//文章列表页调用说明:
//    channelid:	为内容模型ID
//    @me,5:		数字5为获取图片的数量
//    addfields:	列表附加字段名称(可以自定义)但是自定义字段时,一定要选择“使字段可以在列表的底层模板中获得”


{dede:list pagesize='3' addfields='body' channelid='1'}

    <div class="portfolio-slideshow flexslider animate-onscroll">
		<ul class="slides">
		[field:body function=getbodypics(@me,5)/]
		</ul>
		<ul class="flex-direction-nav">
		<li><a class="flex-prev" href="#"></a></li>
		<li><a class="flex-next" href="#"></a></li>
		</ul>
	</div>
	
</div>

{/dede:list}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值