12年

专注互联网营销运营

　　在“多文章解决方案”栏目下添加多篇文章在“多文章解决方案”栏目下添加多篇文章

　　文章标题和图片分别代表图片的Title和ImageUrl

　　2、模版调用

　　<stl:contents channelName="多文章解决方案">

　　<stl:content type="ImageUrl" style="width:400px"></stl:content><br/>

　　<stl:content type="Title"></stl:content><br/>

　　</stl:contents>

　　3、页面效果

　　说明：这种操作方式中图片的ImageUrl和Title，变通为文章的标题图片和标题，可以被调用。只是在内容管理上会有些繁琐。

1. 单文章多图方案

　　在一篇文章中添加多张“图片”供前台调用，文章标题可以作为整个图片组的Title。文章的imageurl即为第一张图片的ImageUrl，imageurl_extend中的内容即为其他图片的ImageUrl

1. 后台设置

　　添加一篇文章

　　在文章中添加多张图片

1. 模版调用

　　<stl:contents channelName="单文章多图解决方案">

　　<stl:content type="title"></stl:content><br/><br/>

　　<stl:content type="imageurl" style="width:400px"></stl:content><br/><br/>

　　<span id="ext_image" style="display:none">

　　<stl:content type="imageurl_extend"></stl:content></span>

　　<div class="m-extimage"></div>

　　</stl:content>因为imageurl_extend中的数据是以“，”分割的图片地址例如

　　“@/upload/images/2015/1/322439649.jpg,@/upload/images/2015/1/322439852.jpg,@/upload/images/2015/1/322439985.jpg”所以要用js做简单处理。

　　<script type="text/javascript">

　　// 单文章多图片方式调用图片

　　var ext_img =$("#ext_image").text();

　　if(ext_img.length){

　　              var imgs = ext_img.split(',');

　　              for(var i=0;i < imgs.length;i++)

　　              {

　　                            imgs[i] = imgs[i].replace("@","");

　　                            $('.m-extimage').append("<img src=/&/index.html style='width:400px'/><br/><br/>");

　　              }

　　}

　　</script>

　　3、页面效果

　　说明：这种方式只需要上传一篇文章，可以简化内容管理。将多张标题图片作为图片来源进行调用。这种方式中只能调用每张图片的ImageUrl，因为无法对单张图片添加描述信息，所以无法调用每张图片的Title。这个实现参考了http://bbs.siteserver.cn/thread-39-350887.aspx，TKS。

1. 编辑器传图方案

　　将多张在编辑器中上传，前台调用文章内容即可调用图片。

1. 后台设置

　　上传文章

　　在编辑器中上传图片添加相应的图片描述

1. 模版调用

　　<stl:contents channelName="编辑器传图解决方案">

　　<stl:content type="Content"></stl:content>

　　</stl:content>

1. 页面效果

　　说明：这种方式最简单，在所见即所得的编辑器中添加图片，前台调用即可。但是灵活性不好，基本后台添加成什么样子前台就是什么样子了。

本文链接：http://www./xinqiguandian/32/88.html