目前位置: 首頁 > ecshop4 購物網站通用響應式模板 > ecshop4 文章內容或商品描述圖片超寬自動調整、自動加屬性、自動套用燈箱效果

ecshop4 文章內容或商品描述圖片超寬自動調整、自動加屬性、自動套用燈箱效果 超大 稍大 正常

發表於: 2022-02-06 最後更新: 現在時間:2022-12-08 04:05:55
如果文章內容或商品描述如因圖片太大導致超出版面寬度時,往往導致圖片只看到一部分或是整個版面被撐開,有是因為設置了尺寸導致圖片變形等問題,這種情形在寬度不大的移動設備上更是常見,編輯器也無法在插入圖片時自動加入ALT屬性值,對SEO不夠友好,雖然你可以自行加入效率卻很低,底下的作法可以解決當圖片超出寬度時,自動縮為容器寬度並保持寬高比,當點擊圖片時以燈箱效果顯示大圖。並且自動以文章標題或商品名稱作為ALT屬性,以加強SEO效果...

做法如下:
1、燈箱效果展示大圖(支援拖動),加在 page_header.lbi 第四行和 page_header1.lbi 第二行插入下列代碼(如果不想使用燈箱效果可以省略):
	<link href="{$template_dir}/fancybox/fancybox.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="{$template_dir}/fancybox/fancybox.umd.js">

將解壓縮的 fancybox 整個資料夾上傳到模板目錄

2、編輯 article.php 約 182 行找到
	$row = $GLOBALS['db']->getRow($sql);
	下一行加入
	$pattern = "/<img(.*?)src=('|\")([^>]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i";
	$replacement = '<a data-fancybox="gallery" href=$2$3.$4$5 data-caption="'.$row['title'].'">'.$row['title'].'';
	$row['content'] = preg_replace($pattern, $replacement, $row['content']);
	上一行加入
	if ($row !== false)

存檔

3、編輯 goods.php 約 150 行找到
	/* 获得商品的信息 */
	$goods = get_goods_info($goods_id);
	下一行加入
	$pattern = "/<img(.*?)src=('|\")([^>]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i";
	$replacement = '<a data-fancybox="gallery" href=$2$3.$4$5 data-caption="'.$goods['goods_name'].'">'.$goods['goods_name'].'';
	$goods['goods_desc'] = preg_replace($pattern, $replacement, $goods['goods_desc']);
	上一行加入
	if ($goods === false)

存檔

4、編輯模板目錄的 style.css 最後一行加入
	img {
		max-width: 100%;
	}
存檔,完成
對於本站文章有任何問題或建議歡迎寫信給我
本站提供ECSHOP技術支援, 是網路開店最佳選擇 ,最後更新時間: 現在時間:2022-12-08 04:05:55