New Blogger Template : FlatUI 更新手記

近日更新了 Blogspot 的 Template(範本), 名稱是 FlatUI
http://www.stylifyyourblog.com/2013/04/FlatUI-Responsive-Blogger-Template.html

整體佈局, 個人萛是喜歡, 只是小小的, 修改了一些字型及色彩.
它的 post 以 單圖 + 文章片段 表列方式展示. 第一眼, 已經選定了它.

可是, 圖片總是怪怪的, 是正方型 200x200, 圖像變形, 不成比例, 細小圖像也會放大到 200x200.
動手修改了它的 javascript, 控制圖片大小部分程式碼, 順手留下一個手記.
~ 加大圖像到 300x300, 按比例顯示.
~ 不足300的, 便以原圖大小顯示.

原本的 javascript 是這樣子(部分節錄),
預設圖片寬度及高度都是 200;
取得圖像數量, 放到變數 img 裡;
讀出第一個圖像, 並以預設值顯示. 即是寬度及高度都是 200, 正方型.

img_thumb_height = 200;
img_thumb_width = 200;
var img = div.getElementsByTagName("img");
if(img.length>=1)
{ 
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
}

修改後的 javascript,
更改預設圖片寬度及高度是 300, 圖像比較大一點;
新增 2 個變數, img_width & img_height;
求出圖片寬度, 小於300便用回它原本的, 大過300便設定為300, 放到 img_width 裡;
求出圖片高度, 小於300便用回它原本的, 大過300便設定為300, 放到 img_height 裡;
如果原圖片的 寬度 > 高度 時...
即以 img_width 為準, 高度為 auto 顯示圖片;
否則, 便以 img_height 為準, 寬度為 auto 顯示圖片.

img_thumb_height = 300;
img_thumb_width = 300;
var img = div.getElementsByTagName("img");
if(img.length>=1)
{
if(img[0].width<img_thumb_width){img_width=img[0].width}else{img_width=img_thumb_width}
if(img[0].height<img_thumb_height){img_height=img[0].height}else{img_height=img_thumb_height}
if(img[0].width>img[0].height)
 {
 imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_width+'px" /></span>';
 } else {
 imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" height="'+img_height+'px" /></span>';
 }
}