อยากให้ Featured Article เป็นแบบในรูปทำยังไงหรอครับ

ถามตอบ ปัญหาการพัฒนา Extension ไม่ว่าจะเป็น Module plugin Component หรือ แม้แต่ template การปรับแต่งโค้ด Joomla ต่างๆ ทุกเวอร์ชั่น 1.5 2.5 หรือ 3.x

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
Before Dong
PHP VIP Members
PHP VIP Members
โพสต์: 1030
ลงทะเบียนเมื่อ: 26/06/2017 10:11 am

อยากให้ Featured Article เป็นแบบในรูปทำยังไงหรอครับ

โพสต์โดย Before Dong » 07/09/2017 5:11 pm

Featured Article ปัจจุบันของผม
1.jpg
1.jpg (51.26 KiB) เปิดดู 55 ครั้ง


แต่ผมอยากได้แบบในรูปข้างล่างต้องทำยังไงหรอครับที่ดึงรูปจาก Article ไปใส่ในช่องสี่เหลี่ยมด้านซ้าย และ ตัด Article ที่ยาวเกินไป เป็นปุ่มอ่านเพิ่มเติม
2.jpg
2.jpg (55.29 KiB) เปิดดู 55 ครั้ง



CODE index.php

โค้ด: เลือกทั้งหมด

<?php
/**
 * @package     Joomla.Site
 * @subpackage  Templates.protostar
 *
 * @copyright   Copyright (C) 2005 - 2017 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

/** @var JDocumentHtml $this */

$app  = JFactory::getApplication();
$user = JFactory::getUser();

// Output as HTML5
$this->setHtml5(true);

// Getting params from template
$params = $app->getTemplate(true)->params;

// Detecting Active Variables
$option   = $app->input->getCmd('option', '');
$view     = $app->input->getCmd('view', '');
$layout   = $app->input->getCmd('layout', '');
$task     = $app->input->getCmd('task', '');
$itemid   = $app->input->getCmd('Itemid', '');
$sitename = $app->get('sitename');

if ($task === 'edit' || $layout === 'form')
{
   $fullWidth = 1;
}
else
{
   $fullWidth = 0;
}

// Add JavaScript Frameworks
JHtml::_('bootstrap.framework');

// Add template js
JHtml::_('script', 'template.js', array('version' => 'auto', 'relative' => true));

// Add html5 shiv
JHtml::_('script', 'jui/html5.js', array('version' => 'auto', 'relative' => true, 'conditional' => 'lt IE 9'));

// Add Stylesheets
JHtml::_('stylesheet', 'template.css', array('version' => 'auto', 'relative' => true));


// Check for a custom CSS file
JHtml::_('stylesheet', 'user.css', array('version' => 'auto', 'relative' => true));

// Check for a custom js file
JHtml::_('script', 'user.js', array('version' => 'auto', 'relative' => true));

// Load optional RTL Bootstrap CSS
JHtml::_('bootstrap.loadCss', false, $this->direction);
?>

<!DOCTYPE html>
<html lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
<head>
   <link rel="stylesheet" href="user.css" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <jdoc:include type="head" />
</head>
<body>
      
   <div class="container-fluid">
            <div class="warpper" style="background-image: url(images/bg-top.jpg);">
            <div class="row">
               <div class="span6">
                  <div class="logotop"><jdoc:include type="modules" name="logotop" style="none" /> </div>
               </div>
               <div class="span6 pull-right">
                  <div class="searchtop"><jdoc:include type="modules" name="search-top" style="none"/> </div>
               </div>
            </div>
            </div>
         
            <div class="bg-menu-top">
               <div class="row">
                  <div class="navbar">
                     <div class="span12">
                        <nav class="navigation" role="navigation">
                           <div class="navbar pull-left">
                              <a class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">
                                 <span class="element-invisible"><?php echo JTEXT::_('TPL_PROTOSTAR_TOGGLE_MENU'); ?></span>
                                 <span class="icon-bar"></span>
                                 <span class="icon-bar"></span>
                                 <span class="icon-bar"></span>
                              </a>
                           </div>
                           <div class="nav-collapse">
                              <div class="menu-nav-top">
                              <div class="navbar">
                              <div class="navbar-inner">
                              <ul class="nav">
                                 <li><jdoc:include type="modules" name="menu-top" style="none" /></li>
                               </ul>
                               </div>
                              </div>
                              </div>
                           </div>
                        </nav>
                     </div>
                  </div>
               </div>
            </div>
         
      <div class="container">
         <div class="nav-collapse pull-left">
               <jdoc:include type="modules" name="pathway" style="none" />
         </div>
      </div>
         
      <div class="container">
         <div class="row">
            <div class="span12 ">
               <jdoc:include type="modules" name="pic-slide-home" style="none" />
            </div>
         </div>
      </div>
      
      <div class="container-fluid">
         <div class="row-fluid">
            <div class="<?php echo ($this->countModules('right-menu')) ? 'span8' : 'span12' ; ?>" >
                  <jdoc:include type="component" />
            </div>
            <?php if ($this->countModules('right-menu')) : ?>
            <div class="span4"> <div class="right"> <jdoc:include type="modules" name="right-menu" style="none" /> </div></div>
            <?php endif; ?>
         </div>
      </div>   
      
      <div class="container">      
      <div class="bg-conten-home">
         <div class="row">
            <div class="span12 ">
               <jdoc:include type="modules" name="content-home" style="none" />
            </div>
         </div>
      </div>
      </div>   
      
      <div class="warpper footer-wrapper" style="background-image: url(images/bg-top.jpg);">
      <div class="container">
      <footer>   
               <div class="row" >                  
                     <div class="span3">   
                        <jdoc:include type="modules" name="footer-1" style="none" />
                     </div>
                     <div class="span3" >
                        <jdoc:include type="modules" name="footer-2" style="none" />
                     </div>   
                     <div class="span3" >
                        <jdoc:include type="modules" name="footer-3" style="none" />
                     </div>   
                     <div class="span3" >
                        <jdoc:include type="modules" name="footer-4" style="none" />
                     </div>   
               </div>
      </footer>
      </div>      
      </div>
      
      <div class="container">      
               <div class="row">                  
                     <div class="span12">   
                        <jdoc:include type="modules" name="footer-bottom" style="none" />
                     </div>
               </div>
      </div>
   </div>
</body>
</html>


CODE css

โค้ด: เลือกทั้งหมด

.logotop{
margin-top: 5px;
    margin-left: 100px;
}
.searchtop{
margin-top:23px;

}
.navigation {
    padding: 0px 0;
    border-top: 0px solid rgba(0,0,0,0.075);
    border-bottom: 0px solid rgba(0,0,0,0.075);
    margin-bottom: 0px;
}
.menu-nav-top{
margin-top:10px;
margin-left:110px;
font-size:25px;    
}
.bg-menu-top{
background-color: #f8f8fa;
padding-bottom: 7px;
font-weight: bolder;
border-bottom:5px solid #404751;
}
.container-fluid {
    padding-right:0px;
    padding-left:0px;
}
.item-115:hover{
background-color:#e6e6e6;
}
.item-116:hover{
background-color:#e6e6e6;
}
.item-117:hover{
background-color:#e6e6e6;
}
.item-118:hover{
background-color:#e6e6e6;
}
.slideshow{
margin-top:20px;
margin-left:145px;
border:1px solid;
width:100%;
}
.carousel-caption {
    position: absolute;
    left: 0%;
    right: 0%;
    bottom: 0%;
    padding: 15p%;
    background: none;
    background: none;
}
.langtop{
margin-top:30px;
}
.width-searchtop{
}

.rowtop{
margin-left:100px;
}
.form-inline{
float:left;
margin-left: 55px;
}
.carousel-inner {
   position:relative;
   margin: auto;
}
.carousel {
    position: static;
}
.carousel-control {
    top: 45%;
}
.footer-wrapper{
background-color:#72cee7;
}
.navi-foot-left{
margin-left:20px;
}
.dev-footer{
position:relative;
}
.btn.widget-item-button{
float:right;
}
.bg-conten-home{
margin-bottom:20px;
}
.facebook-ic:hover{
border:1px solid #00AFF0;
background-color:blue;
}
.youtube-ic:hover{
border:1px solid #00AFF0;
background-color:red;
}
.google-ic:hover{
border:1px solid #00AFF0;
background-color:#d62222;
}
.about-con {
margin-left: 50px;
}
.border-content-home{

padding-bottom: 40px;
}
.btn {
margin-right: 10px;
}
.navbar-inner{
margin-bottom: -15px;
margin-left: 32px;
border: 0px solid #d4d4d4;
}
.navigation .nav.nav-child {
    /* top: -8px; */
    /* left: 100%; */
}
.right{
margin-top:20px;
}
.jicons-icons{
display:none;
}
.dl-horizontal {
    margin-left: -100px;
}
.clearfix {
    clear: both;
}
.featured-images {
    position: relative;
    height: 200px;
    overflow: hidden;
    border: #cccccc 3px solid;
}
dl.article-info {
    border-top: none;
}
dl.article-info {
   margin-top: -2px;
}
.article-info{
float: left;
    display: -webkit-inline-box;
}
.featured-article-box {
    border: #e8eaf1 1px solid;
    background-color: #f8f8fa;
    margin-bottom: 20px;
    padding: 5px 5px 10px;
    -webkit-box-shadow: 0px 10px 5px -5px rgba(136,136,136,1);
    -moz-box-shadow: 0px 10px 5px -5px rgba(136,136,136,1);
    box-shadow: 0px 10px 5px -5px rgba(136,136,136,1);
}
.blog-featured{
padding-left:30px;
}

ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 6610
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

Re: อยากให้ Featured Article เป็นแบบในรูปทำยังไงหรอครับ

โพสต์โดย tsukasaz » 07/09/2017 6:30 pm

ใช้โค้ด php ช่วยในการตัดคำครับ

โค้ด: เลือกทั้งหมด

echo JHTML::_('string.truncate', 'ข้อความเนื้อหา', 200); // 200 คือจำนวนคำที่ต้องการแสดง  


ส่วนการดึงรูปออกจาก เนื้อหาบทความ ต้องใช้คำสั่ง

โค้ด: เลือกทั้งหมด

preg_match_all('/< *img[^>]*src *= *["\']?([^"\']*)/i'$this->item->introtext$matches);
if(
count($matches[1]))
{
    
$image $matches[1][0];
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)

ภาพประจำตัวสมาชิก
Before Dong
PHP VIP Members
PHP VIP Members
โพสต์: 1030
ลงทะเบียนเมื่อ: 26/06/2017 10:11 am

Re: อยากให้ Featured Article เป็นแบบในรูปทำยังไงหรอครับ

โพสต์โดย Before Dong » 08/09/2017 11:01 am

tsukasaz เขียน:ใช้โค้ด php ช่วยในการตัดคำครับ

โค้ด: เลือกทั้งหมด

echo JHTML::_('string.truncate', 'ข้อความเนื้อหา', 200); // 200 คือจำนวนคำที่ต้องการแสดง   


ส่วนการดึงรูปออกจาก เนื้อหาบทความ ต้องใช้คำสั่ง

โค้ด: เลือกทั้งหมด

preg_match_all('/< *img[^>]*src *= *["\']?([^"\']*)/i', $this->item->introtext, $matches);
if(
count($matches[1]))
{
    $image = $matches[1][0];
}


หลังจากที่ได้ไปทำการเพิ่ม Code ด้านบน ใน File default_item.php ผลที่ได้คือ

1.jpg
1.jpg (208.99 KiB) เปิดดู 43 ครั้ง


2.jpg


3.jpg


ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 2 และ บุคคลทั่วไป 0 ท่าน