網頁

2014年9月1日

|

New Blogger Template : FlatUI 更新手記

Views:
近日更新了 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>';
 }
}

沒有留言:

發佈留言

★ 謝謝留言,留下的一句話,已經是很好的推動力 !
★ 勾選右下角的「通知我 」可以由電郵收到留言回覆!
★ 留言與文章無關的主題時,請到頂列「留言版 GuestBook」暢所欲言。
★ 若發佈留言後,留言不見了。可能被系統錯誤判斷為垃圾留言,請不用擔心,我會盡快將留言恢復。
◎ 本留言區已經支援 Unicode Emoji,對應 Win10 的浮動鍵盤。歡迎貼上,增加效果。
◎ 支援 YouTube 超連結對應,支援 jpg , jpeg , gif , png 這4種圖片顯示格式。
◎ 文章介紹 2016 表情符號 V2 更新版 ( Unicode Emoji 格式 ) 顯示策劃