首頁 > ECSHOP 相關舊文章 > Ecshop 綜合文章 > ecshop4 文章內容或商品描述圖片超寬自動調整、自動加屬性、自動套用燈箱效果

如果文章內容或商品描述如因圖片太大導致超出版面寬度時，往往導致圖片只看到一部分或是整個版面被撐開，有是因為設置了尺寸導致圖片變形等問題，這種情形在寬度不大的移動設備上更是常見，編輯器也無法在插入圖片時自動加入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['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_desc'] = preg_replace($pattern, $replacement, $goods['goods_desc']);
	上一行加入
	if ($goods === false)

點擊圖片可以放大檢視

存檔

4、編輯模板目錄的 style.css 最後一行加入

	img {
		max-width: 100%;
	}

存檔，完成

如果你對ecshop4 文章內容或商品描述圖片超寬自動調整、自動加屬性、自動套用燈箱效果有任何問題請到討論區發帖。