以前追加した「Tumblrで共有」ボタンの設定を変更し、画像を含むエントリの場合は画像がリブログされるようにする。Tumblrで用意されているスクリプトではphotosetのリブログは出来ないようなので、エントリ中の1つめの画像ファイルでリブログする事にした。エントリ中に画像を含まない場合は今まで通りにエントリ本文の引用をリブログする。
前回の手順3の代わりに以下の設定を行う。
手順1本文を含むテンプレート変数(本文:<%topentry_body>や追記:<%template_extend>)を囲む<div>タグや<span>タグの属性に、以下を追加、、、というか
Evernote用に記載したものを流用した。
id="content<%topentry_no>"手順2<!--topentry-->~<!--/topentry-->に以下を記載。
<script type="text/javascript">
var imgObj = document.getElementById("content<%topentry_no>").getElementsByTagName("img");
var tumblr_button<%topentry_no> = document.createElement("a");
if( imgObj.length != 0 ){
imgurl = imgObj[0].src.replace("s.jpg",".jpg");
tumblr_button<%topentry_no>.setAttribute("href", "http://www.tumblr.com/share/photo?source=" + encodeURIComponent(imgurl) + "&caption=" + encodeURIComponent("<%topentry_title> - <%blog_name>") + "&clickthru=" + encodeURIComponent("<%topentry_link>"));
}
else{
tumblr_button<%topentry_no>.setAttribute("href", "http://www.tumblr.com/share/link?url=" + encodeURIComponent("<%topentry_link>") + "&name=" + encodeURIComponent("<%topentry_title> - <%blog_name>") + "&description=" + encodeURIComponent("<%topentry_discription>"));
}
tumblr_button<%topentry_no>.setAttribute("title", "Share on Tumblr");
tumblr_button<%topentry_no>.setAttribute("style", "display:inline-block; text-indent:-9999px; overflow:hidden; width:81px; height:20px; background:url('http://platform.tumblr.com/v1/share_1.png') top left no-repeat transparent;");
document.getElementById("tumblr_button_<%topentry_no>").appendChild(tumblr_button<%topentry_no>);
</script>
説明見たままなので説明を記述するほどでもないが、、
1、エントリを特定するID(content<%topentry_no>)で各エントリのオブジェクトを取得
2、エントリオブジェクトに含まれる一つ目の"img"オブジェクトを取得
3、"img"が一つ以上ある場合、imgのsrcの末尾をs.jpgから.jpgに置き換え(小さいサムネイルではなく大きい画像を指定してリブログするように)、後はphotoのリブログとして各種の属性を指定する
4、"img"が無い場合は、リンクのリブログとして各種の属性を指定する