<s id="ux55u"><sub id="ux55u"></sub></s><thead id="ux55u"><legend id="ux55u"><sup id="ux55u"></sup></legend></thead>

    1. <strike id="ux55u"><u id="ux55u"><xmp id="ux55u"><dd id="ux55u"></dd>

      蟬知系統如何修改調整文章列表頁圖文顯示效果

      2016-07-20 16:39:00
      GavinHsueh
      原創
      4779

      蟬知系統的文章列表頁面是支持圖文并茂的,包括標題、簡介、封面圖片等。但有時并不能滿足客戶實際的期望需求,需要我們自定義修改調整顯示樣式,如果大家有其他好的解決方案,歡迎和大家一起分享交流,下面我介紹下個人在調整時用的方法。

      我直接修改的 模板文件,找到源文件目錄\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;
      }
      具體大小可以自行調整,保持即可,回到前臺,查看效果。

      聯系我們

      聯系人:ZSITE交流群

      電話/微信:

      Email:

      QQ:

      地址:青島市黃島區井岡山路157號中南金石國際廣場A座3205室

      无遮挡H肉动漫视频在线观看
        <s id="ux55u"><sub id="ux55u"></sub></s><thead id="ux55u"><legend id="ux55u"><sup id="ux55u"></sup></legend></thead>

      1. <strike id="ux55u"><u id="ux55u"><xmp id="ux55u"><dd id="ux55u"></dd>