需要实现的功能效果图如下:
开发时需要独立提取文章内容页 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}