使用CSS將 Zen-Cart 的商品圖片加上框及陰影

[BabyStep]

Zen-Cart 有許多商品圖片，使用 CSS 可以將商品圖片(無論圖片的長及寬是若干)自動加上框及陰影，增加商品的質感。
這個方法不用每個商品圖片使用影像編輯軟體編修後上傳到網站，節省使用者許多時間。

下圖左邊是商品圖片，右邊是本範例的完成品。



1. 使用影像編輯軟體製作一長及寬各為400px的陰影，如果你的商品圖片長及寬超過400px，請自行將400px增加至符合你的需求。將圖片存檔為 shadow.gif。

綠色方框說明陰影圖片的範圍，製作陰影圖片時，不需要繪製。
注意：陰影必須包括在圖片中。


2. 將下面的 CSS 程式碼加入 your_template/css/stylesheet.css 中。

程式碼:

.img-wrapper {
background: url(../images/shadow.gif) no-repeat bottom right;
clear: right;
float: left;
position: relative;
}

.img-wrapper img {
background-color: #fff;
border: 1px solid #a9a9a9;
padding: 4px;
display: block;
margin: -5px 5px 5px -5px;
position: relative;
}

3. 如何使用。

程式碼:

<div class="img-wrapper"><img src="example.jpg" width="200" height="200" alt="CSS Photo Shadow Example" /></div>

4. 在  Zen-Cart 上應用。以新商品為例，在 your_templte/template/tpl_modules_products_new_listing.php 找到下列程式碼。

程式碼:

      if (PRODUCT_NEW_LIST_IMAGE != '0') {
        $display_products_image = '<a href="' . zen_href_link(zen_get_info_page($products_new->fields['products_id']), 'products_id=' . $products_new->fields['products_id']) . '">' . zen_image(DIR_WS_IMAGES . $products_new->fields['products_image'], $products_new->fields['products_name'], IMAGE_PRODUCT_NEW_LISTING_WIDTH, IMAGE_PRODUCT_NEW_LISTING_HEIGHT) . '</a>' . str_repeat('<br clear="all" />', substr(PRODUCT_NEW_LIST_IMAGE, 3, 1));
      } else {
        $display_products_image = '';
      }

改為

程式碼:

      if (PRODUCT_NEW_LIST_IMAGE != '0') {
        $display_products_image = '<a href="' . zen_href_link(zen_get_info_page($products_new->fields['products_id']), 'products_id=' . $products_new->fields['products_id']) . '"><div class="img-wrapper">' . zen_image(DIR_WS_IMAGES . $products_new->fields['products_image'], $products_new->fields['products_name'], IMAGE_PRODUCT_NEW_LISTING_WIDTH, IMAGE_PRODUCT_NEW_LISTING_HEIGHT) . '</a></div>' . str_repeat('<br clear="all" />', substr(PRODUCT_NEW_LIST_IMAGE, 3, 1));
      } else {
        $display_products_image = '';
      }

注意：shadow.gif 要上傳到 your_template/images。

完成。

[seethrou]

謝謝分享！ 

請問這個在什麼的版本上應用？

這個和單純使用 css 來加上陰影的 (不使用附加圖像，也不修改程式) ，有什麼分別？

[ThanksGod]

請問shadow.gif要存放的路徑為何?謝謝指點!

[seethrou]

請問shadow.gif要存放的路徑為何?謝謝指點!

上面已經有註明。

注意：shadow.gif 要上傳到 your_template/images。

includes/templates/您的佈景板/images/shadow.gif

[seethrou]

利用 css，可以有比較快的方法，

以下例子，使用在 Zen Cart v1.3.x,

1. 在產品詳細資料頁面的圖片上加上邊框，也可以有陰影效果

1A. 邊框：

程式碼:

#productMainImage img {
border: 0.3em solid #C2C2C2;
}

1B. 邊框加陰影 (淺色和深色)：

程式碼:

#productMainImage img {
border: 0.3em outset #C2C2C2;
}

其中：
border 為邊框，0.3em 為邊框本身的寬度，
#C2C2C2 為邊框本身的顏色，或陰影開始顏色
solid, outset 為邊框的不同表現形式，還有其他形式，請參考 css 的使用說明。

不過這有些問題，不同的瀏覽器，所表現出的效果會有些差別，需要在 stylesheet 上微調。

[BabyStep]

上圖是我用Firework模擬的比較圖片，用圖說明比較清楚。
右圖是CSS一般的方法，是利用內外框，位移後顯現外框的顏色作為陰影。沒有漸層效果。
左圖是本主題的方法，陰影有漸層的效果，因為使用圖片作陰影，這是二種方法最大的不同點。在IE7測試沒有問題，Firefox我沒有測試，不過我認為應該沒有問題。以Firefox測試過的人，請說明一下結果。
二種方法都可以隨圖片的大小縮放。

至於版本，我個人認為Zen-Cart任何版本都適用，無關程式，只是單純的CSS應用。


至於seethrou提供的方法，嚴格說是框的用法。框右邊及下邊的顏色會比框的左邊及上邊的顏色深。與本文章的方法功能不同。見下圖。




以上淺見，僅供參考。

[seethrou]

首先，在這是希望大家多些交流和研究！   

至於版本，我個人認為Zen-Cart任何版本都適用，無關程式，只是單純的CSS應用。

不好意思，在原理上個人是了解的，
只是因為，現在流行的有 2 大 Zen Cart 版本，他們是 v1.2.x 和 v1.3.x,
在細節上，它們的修改應該有所不同，所以希望大家會留意到。

至於seethrou提供的方法，嚴格說是框的用法。框右邊及下邊的顏色會比框的左邊及上邊的顏色深。與本文章的方法功能不同。

是的，這個只是單純 css 和單純框的用法，
用法是可擴展的，而且不用修改任何源程式碼，也不用加圖像，只需把式樣 (style) 加上 stylesheet 便完成，
也希望大家留意到。

[jumio]

感謝以上各位的建議