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

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

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

Before Dong
PHP VIP Members
PHP VIP Members
Posts: 1570
Joined: 26/06/2017 10:11 am

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

Post by Before Dong »

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

CODE index.php

Code: Select all

<?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

Code: Select all

.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;
}
User avatar
tsukasaz
PHP VIP Members
PHP VIP Members
Posts: 12386
Joined: 18/04/2012 9:39 am

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

Post by tsukasaz »

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

Code: Select all

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

Code: Select all

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
Posts: 1570
Joined: 26/06/2017 10:11 am

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

Post by Before Dong »

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

Code: Select all

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

Code: Select all

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) Viewed 657 times
2.jpg
3.jpg
Post Reply
  • Similar Topics
    Replies
    Views
    Last post

Return to “Joomla Development”

Who is online

Users browsing this forum: No registered users and 5 guests