ThaiSEOBoard.com

พัฒนาเว็บไซต์ => CMS & Free Script => ข้อความที่เริ่มโดย: zerizava ที่ 19 เมษายน 2013, 00:21:41



หัวข้อ: ช่วยจัดแต่งCSS จากโค้ดดึงภาพแรกให้หน่อยครับ
เริ่มหัวข้อโดย: zerizava ที่ 19 เมษายน 2013, 00:21:41
สืบเนื่องมาจากกระทู้นี้ http://www.thaiseoboard.com/index.php/topic,315470.0.html
ผมได้ขอคำแนะนำวิํธีใช้งาน โค้ดดึงภาพแรก จนในที่สุดผมก็ทำได้แล้ว
เอาง่ายๆเลยนะครับ

ขั้นแรกเปิดไฟล์ index.template.php ของธีมขึ้นมา

ต่อมาหา
โค๊ด:
?>

นำโค้ดนี้ไปวางก่อนหน้าที่หา (สำหรับ 2.0.x)

โค๊ด:
function findIMG($text){
preg_match_all('/\[img\].*?\[\/img\]/i',$text,$page);
foreach($page as $value)
$src = substr($value[0],5);
$src = substr($src,0,-6);
return($src);
}

แล้วต่อด้วยโค้ดนี้
โค๊ด:
function ssi_pic($num_top = 12,$order,$board){
global $db_prefix, $scripturl, $smcFunc;
$request = $smcFunc['db_query']('', '
SELECT t.id_topic,m.body,m.subject
FROM {db_prefix}messages m,{db_prefix}topics t
WHERE t.id_first_msg=m.id_msg AND t.id_board='.$board.'
ORDER BY t.'.$order.' DESC
LIMIT '.$num_top,
array(
)
);
$posts = array();
while ($row = $smcFunc['db_fetch_assoc']($request))
{
// Build the array.
$topics[] = array(
'id' => $row['id_topic'],
'body' => $row['body'],
'subject' => $row['subject']
);
}
$smcFunc['db_free_result']($request);
foreach ($topics as $data){
$topic = "forum/?topic,".$data['id'];
$srcPic = findIMG($data['body']);
$subject = $data['subject'];
echo '<div class="boxpGal">
<div class="picpGal"><a href="'.$srcPic.'" title="คริกเพื่อดูภาพเต็ม."><img src="'.$srcPic.'" width="150" alt="" /></a></div><center>'.mb_substr($subject,0,25,'UTF-8').'</center>
<div class="viewAllpic"><a href="'.$topic.'" target="_blank">More info</a></div>  
</div>';
}
}


จากนั้นก็เปิดไฟล์ BoardIndex.template.php หรือ อันอื่นก็ได้ แต่อันนี้มันจะโชว์หน้าแรกเลย
แล้วก็วางโค้ดนี้ไว้ตรงไหนก็ได้ที่อยากวางที่ไม่ได้อยู่ใน echo'';

โค๊ด:
ssi_pic(20,'ID_TOPIC',4)

แต่ถ้าวางใน echo'';
ต้องเปลี่ยนเช่น
โค๊ด:
echo''.ssi_pic(20,'ID_TOPIC',4).'';

แต่ว่าผลที่ได้คือตามรูปด้านล่างนี้อ่าครับ
(http://image.ohozaa.com/i/8f3/xnXozS.JPG)



เลยอยากแค่วิธีปรับแต่งสไตล์ Css ให้ออกมาเป็นดังภาพข้างล่างนี้อ่าครับ
อ้างถึง
([url]http://image.ohozaa.com/i/g3c/ZTjBY6.JPG[/url])


ท่านใดก็ได้ที่ชำนาญเรื่องนี้ขอคำแนะนำหน่อยครับ
ปล. แล้วถ้าจะกำหนดความยาวของ ข้อความใต้ภาพให้ยาวขึ้นทำอย่างไรหรอครับ รบกวนอีกซักกระทู้ครับ หมดหนทางแล้วเพราะผมไม่ค่อยมีความรู้ด้านนี้จริงๆ
:wanwan017:


หัวข้อ: Re: ช่วยจัดแต่งCSS จากโค้ดดึงภาพแรกให้หน่อย&#
เริ่มหัวข้อโดย: chlorophill ที่ 19 เมษายน 2013, 00:35:06
เพิ่งเห็นว่าตั้งใหม่ --"

เพิ่ม style นี้
โค๊ด:
<style>

.boxpGal {
padding: 15px;
width: 685px; /* real width = 715px -- กำหนดความกว้างของกล่อง */
background: #fff;
}


.boxpGal .picpGal {
float: left;
margin: 10px;
width: 150px;
}

.boxpGal .picpGal a {
}

.boxpGal .viewAllpic { text-align: right; }

.clearfix { clear: both; }

</style>

ลองแก้ไขตรงส่วนนี้ (ย้ายแท็ก <center> กับเพิ่ม <div class="clearfix">
โค๊ด:
foreach ($topics as $data){
$topic = "forum/?topic,".$data['id'];
$srcPic = findIMG($data['body']);
$subject = $data['subject'];
echo '<div class="boxpGal">
<div class="picpGal"><a href="'.$srcPic.'" title="??????????????????."><img src="'.$srcPic.'" width="150" alt="" /></a><center>'.mb_substr($subject,0,25,'UTF-8').'</center></div>
<div class="viewAllpic"><a href="'.$topic.'" target="_blank">More info</a></div>   
<div class="clearfix"></div></div>';
}


หัวข้อ: Re: ช่วยจัดแต่งCSS จากโค้ดดึงภาพแรกให้หน่อย&#
เริ่มหัวข้อโดย: zerizava ที่ 19 เมษายน 2013, 00:52:57
เพิ่งเห็นว่าตั้งใหม่ --"

เพิ่ม style นี้
โค๊ด:
<style>

.boxpGal {
padding: 15px;
width: 685px; /* real width = 715px -- กำหนดความกว้างของกล่อง */
background: #fff;
}


.boxpGal .picpGal {
float: left;
margin: 10px;
width: 150px;
}

.boxpGal .picpGal a {
}

.boxpGal .viewAllpic { text-align: right; }

.clearfix { clear: both; }

</style>

ลองแก้ไขตรงส่วนนี้ (ย้ายแท็ก <center> กับเพิ่ม <div class="clearfix">
โค๊ด:
foreach ($topics as $data){
$topic = "forum/?topic,".$data['id'];
$srcPic = findIMG($data['body']);
$subject = $data['subject'];
echo '<div class="boxpGal">
<div class="picpGal"><a href="'.$srcPic.'" title="??????????????????."><img src="'.$srcPic.'" width="150" alt="" /></a><center>'.mb_substr($subject,0,25,'UTF-8').'</center></div>
<div class="viewAllpic"><a href="'.$topic.'" target="_blank">More info</a></div>   
<div class="clearfix"></div></div>';
}
ลองทำตามของท่านแล้ว error ครับ ไม่รู้ว่าผมใส่ถูกรึเปล่า เอาโค้ดcss ที่ท่านให้มาไปใส่บนโค้ด ดึงภาพแรก มันก็error ครับ ไม่แน่ใจว่าใส่ถูกที่มั้ย :-X


หัวข้อ: Re: ช่วยจัดแต่งCSS จากโค้ดดึงภาพแรกให้หน่อย&#
เริ่มหัวข้อโดย: max30012540 ที่ 19 เมษายน 2013, 01:15:42
เพิ่งเห็นว่าตั้งใหม่ --"

เพิ่ม style นี้
โค๊ด:
<style>

.boxpGal {
padding: 15px;
width: 685px; /* real width = 715px -- กำหนดความกว้างของกล่อง */
background: #fff;
}


.boxpGal .picpGal {
float: left;
margin: 10px;
width: 150px;
}

.boxpGal .picpGal a {
}

.boxpGal .viewAllpic { text-align: right; }

.clearfix { clear: both; }

</style>

ลองแก้ไขตรงส่วนนี้ (ย้ายแท็ก <center> กับเพิ่ม <div class="clearfix">
โค๊ด:
foreach ($topics as $data){
$topic = "forum/?topic,".$data['id'];
$srcPic = findIMG($data['body']);
$subject = $data['subject'];
echo '<div class="boxpGal">
<div class="picpGal"><a href="'.$srcPic.'" title="??????????????????."><img src="'.$srcPic.'" width="150" alt="" /></a><center>'.mb_substr($subject,0,25,'UTF-8').'</center></div>
<div class="viewAllpic"><a href="'.$topic.'" target="_blank">More info</a></div>   
<div class="clearfix"></div></div>';
}
ลองทำตามของท่านแล้ว error ครับ ไม่รู้ว่าผมใส่ถูกรึเปล่า เอาโค้ดcss ที่ท่านให้มาไปใส่บนโค้ด ดึงภาพแรก มันก็error ครับ ไม่แน่ใจว่าใส่ถูกที่มั้ย :-X

ห้ามใส่ภายใน <?Php ?> นะครับ เพราะตรงนั้นเป็นการประมวลผลโค้ด Php
ให้เอา <style> ไปไว้ก่อน <?Php ครับ


หัวข้อ: Re: ช่วยจัดแต่งCSS จากโค้ดดึงภาพแรกให้หน่อยครับ
เริ่มหัวข้อโดย: zerizava ที่ 19 เมษายน 2013, 01:25:20
อ้างถึง
ห้ามใส่ภายใน <?Php ?> นะครับ เพราะตรงนั้นเป็นการประมวลผลโค้ด Php
ให้เอา <style> ไปไว้ก่อน <?Php ครับ
จะรบกวนมั้ยครับ ถ้าให้ท่านลงใส่เป็นตัวอย่างในโค้ดด้านบนให้หน่อยครับ เพราะผมลองแล้วerror เหมือนเดิมครับ คิดว่าผมอาจจะใส่ผิด
เพราะโค้ด ผมจะต้องเอาไปวางในไฟล์ index.template.php อ่าครับ ใส่ยังไงก็error  :-[


หัวข้อ: Re: ช่วยจัดแต่งCSS จากโค้ดดึงภาพแรกให้หน่อย&#
เริ่มหัวข้อโดย: chlorophill ที่ 19 เมษายน 2013, 01:37:19
อย่าเอาไปใส่ใน <?php> เหมือนอย่างท่านข้างบนบอกนะแหละครับ
เอาซะไปต่อไม่ถูกเลยทีเดียว  :-X

ใช้อะไรทำครับ หรือว่าเขียนเอง
พอจะมีไฟล์ชื่อ header.php อะไรทำนองนี้มั้ยครับ


หัวข้อ: Re: ช่วยจัดแต่งCSS จากโค้ดดึงภาพแรกให้หน่อย&#
เริ่มหัวข้อโดย: zerizava ที่ 19 เมษายน 2013, 01:43:46
อย่าเอาไปใส่ใน <?php> เหมือนอย่างท่านข้างบนบอกนะแหละครับ
เอาซะไปต่อไม่ถูกเลยทีเดียว  :-X

ใช้อะไรทำครับ หรือว่าเขียนเอง
พอจะมีไฟล์ชื่อ header.php อะไรทำนองนี้มั้ยครับ
คือจะเอาไปโมในsmf ครับ แทรกเข้าไปในไฟล์ index.template.php ครับ  :P


หัวข้อ: Re: ช่วยจัดแต่งCSS จากโค้ดดึงภาพแรกให้หน่อยครับ
เริ่มหัวข้อโดย: chlorophill ที่ 19 เมษายน 2013, 01:51:18
ผมไม่เคยแตะ smf เลยครับ คงต้องรอผู้รู้มาช่วยบอกว่าแก้ไข/เพิ่ม css ได้ตรงไหน


หัวข้อ: Re: ช่วยจัดแต่งCSS จากโค้ดดึงภาพแรกให้หน่อยครับ
เริ่มหัวข้อโดย: zerizava ที่ 19 เมษายน 2013, 09:16:34
ดันหน่อยรอต่อไป :-X


หัวข้อ: Re: ช่วยจัดแต่งCSS จากโค้ดดึงภาพแรกให้หน่อยครับ
เริ่มหัวข้อโดย: MD.18 ที่ 19 เมษายน 2013, 09:37:59
??? ไม่ใส่ไปที่ index.css ละครับ ....


หัวข้อ: Re: ช่วยจัดแต่งCSS จากโค้ดดึงภาพแรกให้หน่อยครับ
เริ่มหัวข้อโดย: zerizava ที่ 19 เมษายน 2013, 17:18:03
(http://image.ohozaa.com/i/ee6/lFdy33.JPG)
ตอนนี้ได้เป็นแบบนี้แล้วครับ มั่วๆไป แต่ว่าก็เป็นปัญหาดังรูปอ่าครับ เพราะว่าผลเอาโค้ด สไตล์ css ไปใส่ในหน้าindex.template.php ร่วมกับโค้ดดึงภาพแรก แต่ว่าโค้ดcss ผมใส่ไว้บรรทัดล่าสุดของหน้า index.template.php หลัง ?> ผลที่ออกมาเลยเป็นแบบนี้ครับ ตัวอักษรในวงกลมมันใหญ่ขึ้น ตอนนี้เลยอยากทราบว่า จะต้องเอาโค้ด สไตล์ css ไปวางไว้หน้าไหนหรอครับ  นั่งทำทั้งวันแล้วยังไม่สมบูรณ์ซักที:wanwan022:


หัวข้อ: Re: ช่วยจัดแต่งCSS จากโค้ดดึงภาพแรกให้หน่อยครับ
เริ่มหัวข้อโดย: zerizava ที่ 19 เมษายน 2013, 18:26:28
รอเทพsmf นานเกินไม่มีใครแวะมาเลย จนทำเองได้แล้วตอนนี้ สำหรับท่านก่อนหน้่านี้ขอบคุณนะครับ ที่คอยช่วยเหลือมาตลอด ตอนนี้ผมมั่วๆไปเรื่อย ด้วยการสร้างphpขึ้นมาใหม่หน้านึงได้แล้ว ในที่สุดก็ทำจนได้

จะเหลือแค่เพียงทำให้ข้อความเป็นลิ้ง และเปลี่ยนเป็นภาษาไทยครับ
:'(

(http://image.ohozaa.com/i/c3c/4hFPsM.JPG)


หัวข้อ: Re: ช่วยจัดแต่งCSS จากโค้ดดึงภาพแรกให้หน่อยครับ
เริ่มหัวข้อโดย: chlorophill ที่ 19 เมษายน 2013, 22:32:07
อ้างถึง
จะเหลือแค่เพียงทำให้ข้อความเป็นลิ้ง และเปลี่ยนเป็นภาษาไทยครับ :'(

ข้อความหรือโค้ดที่อยู่ในแท็ก <a></a> จะเป็นลิ้งค์ครับ