• 在线客服
    • 蝉知客服

蝉知系统如何修改调整文章列表页图文显示效果

2016-07-20 16:39:00
GavinHsueh
原创
1864

蝉知系统的文章列表页面是支持图文并茂的,包括标题、简介、封面图片等。但有时并不能满足客户实际的期望需求,需要我们自定义修改调整显示样式,如果大家有其他好的解决方案,欢迎和大家一起分享交流,下面我介绍下个人在调整时用的方法。

我直接修改的 模板文件,找到源文件目录\template\default\article中的browse.html.php文件,找到里面的第38-45行代码,即:


            <?php if(!empty($article->image)):?>
            <div class='media pull-right'>
              <?php
              $title = $article->image->primary->title ? $article->image->primary->title : $article->title;
              echo html::a($url, html::image($article->image->primary->smallURL, "title='{$title}' class='thumbnail'" ));
              ?>
            </div>
            <?php endif;?>
将这段代码剪贴到底25行的下面,即:



        <div class='item' id="article<?php echo $article->id?>" data-ve='article'>
            <?php if(!empty($article->image)):?>
            <div class='media pull-left'>
              <?php
              $title = $article->image->primary->title ? $article->image->primary->title : $article->title;
              echo html::a($url, html::image($article->image->primary->smallURL, "title='{$title}' class='thumbnail'" ));
              ?>
            </div>
            <?php endif;?>

然后将<div class='media pull-right'>中的pull-right 改为pull-left。保持即可。

注:修改文件之前最好做下备份。


上面是将图片的展示位置移到左侧显示。下面我们调节样式来控制图片显示大小。

进入后台--设计--代码管理--文章列表页面:在CSS中输入下面代码


.thumbnail{
    width:150px;
    height:100px;
}
具体大小可以自行调整,保持即可,回到前台,查看效果。

下载提示

蝉知使用问题交流,请加 官方QQ群: 284891062 加群请注明暗号: 蝉知。

获取技术支持注意事项: http://www.chanzhi.org/page/qqgroup.html

欢迎关注我们的微博微信。

新浪微博:易软天创

微信公众号:易软天创

发表评论
贰 减 捌 =
评论通过审核后显示。
文章分类
联系我们

联系人:毕晓敏

电话:13165056632

Email:bixiaomin@cnezsoft.com

QQ:3137772959

地址:青岛开发区武夷山路167号千禧龙花园 9-1-101室

联系人:魏中显

电话:18561939726

Email:weizhongxian@cnezsoft.com

QQ:1746749398

地址:青岛开发区武夷山路167号千禧龙花园 9-1-101室

联系人:杨苗

电话:13165050229

Email:yangmiao@cnezsoft.com

QQ:3142565561

地址:青岛开发区武夷山路167号千禧龙花园 9-1-101室

联系人:丁芝

电话:17663906485

Email:dingzhi@cnezsoft.com

QQ:1481227768

地址:青岛开发区武夷山路167号千禧龙花园 9-1-101室