網頁

2015年7月5日

|

可定義大小的 YouTube 縮圖

Views:
我的自家 首頁/標籤 "排版"是用 list 方式, 當中只是列出一張圖片,
但是當內文沒有上載的圖片時, 它是沒有的,
或是, 只有 YouTube 的嵌入影片時, 它會自動得出一張 youtube 小圖,
連結方式是 http://img.youtube.com/vi/[youtube-ID]/default.jpg
可惜這圖片大小是 120×90, 它太小了.

原來這個大小是有修改空間, 只要把 default.jpg 改成一些已經知曉的名稱,
可以得出不同的圖片大小. 以下是它們的定義...
0.jpg (480×360)
1.jpg (120×90)
2.jpg (120×90)
3.jpg (120×90)
default.jpg (120×90)
hqdefault.jpg (High Quality 480×360)
mqdefault.jpg (Medium Quality 320×180)
sddefault.jpg (Standard 640×480)
maxresdefault.jpg (Maximum Resolution 1920×1080)

好了, 為了配合我現時所用的"排版"方式, 馬上簡單的修改當中的 code.
當中只是在 javascript 加入了一句. (原 code 加在第16行)
pic = pic.replace("default.jpg","mqdefault.jpg");// 設定youtube圖片大小
把 default.jpg 改成 mqdefault.jpg, 即是 320x180 大小,
跟我設定把圖示大小為 S350 配合. (可以由這些數據自由設定大小)

詳情可回看 "Blogspot 列表模式-文章標題;自定大小的首幅圖片;部分內文;閱讀更多"
http://freetongdiy.blogspot.hk/2014/09/blogspot.html

現時本網誌所使用的結構, 左右排版; 大圖示(修改後code).
<!-- <b:include data='post' name='post'/> 原有語句 -->
<!-- 不是單頁時,顯示文章標題;自定大小的首幅圖片(左側);部分內文;閱讀更多 start-->
 
<b:if cond='data:blog.pageType == "static_page"'>
<b:include data='post' name='post'/>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='post'/>
<b:else/>
<a expr:href='data:post.url' imageanchor='1' style='clear:left; float:left; margin-right:10px;'>
<!-- 自設縮圖大小  -->
<script type='text/javascript'>
(function() {
     var pic = "<data:post.thumbnailUrl/>";
     pic = pic.replace("s72-c","s350");// 設定圖片大小, e.g. S350
     pic = pic.replace("default.jpg","mqdefault.jpg");// 設定youtube圖片大小,
     document.write("<img src='"+ pic +"'/>"); 
    })()
</script>
</a>
<div><h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3><div>
<div style='margin-top:10px;'><data:post.snippet/></div><br/>
<div style='clear:both'/></div>
<div style='clear:left; float:left; margin-right:10px; margin-top:10px;'>
<a href='http://freetongdiy.blogspot.hk/2015/07/youtube.html' target='_blank' title='Blogspot 列表模式 程式設計:FreeTong'><img src='https://www.google.com/images/icons/product/blogger-16.png'/></a>
<!-- 留言數量 -->
<span class='post-comment-link'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/>
<b:else/><data:post.numComments/><data:top.commentLabelPlural/>
</b:if></a></b:if>
 </span>
<!-- 標籤 -->
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if></b:loop></b:if>
 </span>
 </div>
<!-- 閱讀更多 -->
<div class='jump-link' style='text-align:right; margin-top:10px;'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
 </div>
 </div>
 </b:if></b:if>
 
<!-- 不是單頁時,顯示文章標題;自定大小的首幅圖片(左側);部分內文;閱讀更多 end-->

貼上一段香港影片, 作為這篇 YouTube 縮圖的參照

3 則留言:

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