ขอบคุณ คุณ kennn มากๆ ครับ แล้วถ้าอยากจะขยับรูปลงล่างให้มันพ้นตรงชื่อสินค้าละก็ขยายภาพสินค้าให้ใหญ่ขึ้นอีกหน่อยต้องไปแก้ไขตรงไหนครับ
ขอบคุณครับ
จะขยับรูปลงล่างเราต้องเพิ่มความสูงของเลเยอร์หัวข้อครับ โดยไปที่ไฟล์ global.css หาโค้ดตามนี้
#center_column div.products_block h5 {
display: block;
height: 2.57em;
}
แก้ความสูงที่ไฮไลท์สีแดงไว้ครับ เป็น px หรือ em ก็แล้วแต่ชอบครับ
หากต้องการทำภาพให้ใหญ่ขึ้น ให้แก้ไขตัวแปร homeSize ในไฟล์ homefeatured.php(อยู่ด้านล่างเกือบสุดบรรทัด) โค้ดจะเป็นแบบนี้ครับ
'homeSize' => Image::getSize('home'),
ให้แก้ไขที่ไฮไลท์สีแดงไว้จาก home เป็น large หรือขนาดที่ต้องการใช้ครับ ส่วนนี้อ้างอิงจากหน้า BackOffice >> Preferences >> Image เราจะสร้างขนาดที่ต้องการขึ้นมาใช้เองก็ได้ครับ สร้างขนาดใหม่ขึ้นมาใช้ต้องทำการ Regenerate thumbnails ใหม่ด้วยนะครับเพื่อสร้างรูปภาพขนาดใหม่ขึ้นมาใช้
เมื่อเราปรับความกว้างหรือความสูงของรูปภาพมากกว่า 129 เราอาจจะต้องปรับความกว้างของแต่ละคอลลัมใหม่ด้วยครับ อย่างแรกให้คำนึงถึงความกว้างของตรงกลางเพจก่อนครับ ความกว้างกลางเพจจะมีขนาดประมาณ 570px โมดูล homefeatured จะหดพื้นที่แสดงผลเข้าไปอีกข้างละ 17px(ลดความกว้างลงไป 34px) เหลือพื้นที่ 570-34=536px
หากต้องการให้ 1 แถวแสดง 4 สินค้า ก็ให้นำ 536/4 = 134px
หากต้องการให้ 1 แถวแสดง 3 สินค้า ก็ให้นำ 536/3 = 178px(ใช้ค่าประมาณปัดเศษลง หากปัดเศษขึ้นเลยเยอร์จะตกได้)
หากต้องการให้แสดงผล 1 แถวต่อ 3 สินค้า รูปภาพจะต้องกว้างไม่เกิน 176px เนื่องจากเลเยอร์รูปภาพจะมีการเพิ่มความกว้างทางด้านซ้าย(margin-left) อีก 2px ถ้าหากใช้รูปภาพกว้าง 178px จะทำให้เลเยอร์ตกได้
เมื่อได้ความกว้างแต่ละคอลลัมและความกว้างของรูปภาพแล้ว เราก็ต้องแก้ไขไฟล์ global.css ตามบรรทัดนี้ครับ
#center_column .products_block ul li {
border-right: 1px solid #eaeaea;
border-bottom:1px solid #eaeaea;
float: left;
clear: none;
width:133px;
/* height:375px;*/
background-color: #fff;
padding: 0;
margin-top:0;
}
แก้ไขความกว้างของแต่ละคอลลัมที่คำนวนได้ ตามตัวอย่างจะได้เป็น 178px
#center_column div.products_block a.product_image {
display: block;
background-color: transparent;
width: 129px;
height: 129px;
margin-left:2px;
}
แก้ไขความกว้างความสูงของรูปภาพที่จะใช้งาน
จากนั้นไปที่ไฟล์ homefeatured.tpl ทำการแก้ไขความสูงของแต่ละคอลลัม หากโค้ดในไฟล์เป็นแบบนี้
{if isset($products) AND $products}
<div class="block_content">
{assign var='nbItemsPerLine' value=4}
{assign var='nbLi' value=$products|@count}
{assign var='nbLines' value=$nbLi/$nbItemsPerLine|ceil}
<ul>
ให้แก้ไขโค้ดให้เป็นแบบนี้
{if isset($products) AND $products}
<div class="block_content">
{assign var='liHeight' value=342}
{assign var='nbItemsPerLine' value=4}
{assign var='nbLi' value=$products|@count}
{assign var='nbLines' value=$nbLi/$nbItemsPerLine|ceil}
{assign var='ulHeight' value=$nbLines*$liHeight}
<ul style="height:{$ulHeight}px;">
- แก้ไข value ของ liHeight ตามความเหมาะสม(ความสูงของแต่ละคอลลัม) หากกำหนดน้อยไปอาจจะทับเลเยอร์โมดูลที่อยู่ด้านล่างได้ มากไปก็จะเหลือพื้นที่ด้านล่างเยอะ
- แก้ไข value ของ nbItemsPerLine ตามจำนวนคอลลัมต่อแถวที่ต้องการ
พัฒนาเว็บไซต์
