全国统一咨询电话:4006-138-007         商务渠道合作电话:010-82743368

图片解决方案


SiteServerCMS图片调用解决方案

  项目中调用图片时主要取得图片的地址(ImageUrl)和标题(Title)。本文介绍SiteServerCMS中调用图片的几种方案。

  1. 图片模型方案

  栏目内容模型为“图片”,就可以在文章中添加多张图片,每张图片可以添加单独的描述,添加图片时自动生成缩略图。

  1. 后台设置

  

  栏目内容模型为“图片”

  

  

  可以添加多张图片,填写每张图片的说明

  1. 模版调用

  在内容模版中调用图片

  <stl:photoContents>

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

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

  

  </stl:photoContents>

  1. 页面效果

  4.0.3没法调用,请工作人员测试下。

  说明:这种方式思路自然合理,功能也最全面。对于图片的ImageUrl和Title都可以单独操作,非常灵活。

  1. 多文章方案

  在栏目下添加多篇文章,文章“标题”即是图片的Title,“图片”即是图片的ImageUrl。

  1、后台设置

  

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

  

  文章标题和图片分别代表图片的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='"+imgs[i]+"' 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. 页面效果

  

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