はじめに
どうにも、記事の中に画像を取得する機能がBlogger公式の機能だとちゃんと撮ってきてくれなくて困っていました。
Bloggerの公式のやりかたでは、
<img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
などとやって記事中の画像を取得するのですが、これがどういう基準でとってくるのか、こないのかわかりづらい。
公式のやりかたは、こちらが参考になります。
Auto Read More with thumbnail for Blogger/Blogspot Posts | Helplogger | Blogger tips, tricks, tutorials and widgets
Javascript(jQuery)で画像を取ってくる
今回は、他の方が作ってくれている各テンプレートを参照して、自分にとって必要な部分だけを抜き出す形で作成しました。
ですので、個別の動きなどは実はよくわかっていません。すいません。。
Javascript
以下を/head の上あたりに入れてください。<script type='text/javascript'>
summary_noimg = 650;
summary_img = 450;
img_thumb_height = 150;
img_thumb_width = 200;
</script>
<script type='text/javascript'>
//<![CDATA[
function createSummaryAndThumb(pID,blogurl){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<a class="thumbx" href="'+blogurl+'"><img src="'+img[0].src+'"/></a>';
summ = summary_img;
}
var summary = imgtag;
div.innerHTML = summary;
}
//]]>
</script>
HTML
HTMLは以下のように修正。<b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <div expr:id='"summary" + data:post.id' ><data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>","<data:post.url/>");</script> </b:if> </b:if>
これで、画像が高確率で取得できます。
ちょっとカスタマイズ
『createSummaryAndThumb』というjavascriptの処理に今回は、編集対象となるdiv要素のIDと、記事のURLを渡して、javascript側で、画像を取得して書き換えてもらっています。<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>","<data:post.url/>");</script>
imgtag = '<a class="thumbx" href="'+blogurl+'"><img src="'+img[0].src+'"/></a>';
最後に
newsifyなどで自分の記事を一覧表示するとかなりみやすいので、出来ればiPhoneで見た時には、その形にできれば、と考えているのですが、なかなか難しいですね。以上です。
