shig**のブログ

shignoとshigenが日々をblogするところです。

zenPhotoにブログパーツを用意する

2011-09-26 14:38:26 | xianでサーバー
一応、テキストエディタ上で編集する方法は開発してたけど、
やっぱり面倒だったので自作してみましたー
利用しているテーマによってはデフォルトで用意してあるかも。

ブログパーツというか、写真のサムネイルを張ってクリックするとアルバムのページに飛んでいってくれるやつ。
DSC01856.JPG
こんなの。



結論から書くと、以下のコードをimage.phpの好きなところに書けばOK。

<div style="margin: 3em 0 0 0;color: #505050;">for your blog.<textarea style="width:100%;color: #505050;border: none;background-color: transparent;height: 5em;">' .
'<a href="###hostname###' . htmlspecialchars(getImageLinkURL( )) . '">' .
'<img border="0" src="###hostname###' . htmlspecialchars(getDefaultSizedImage()) . '" alt="' . getImageTitle() . '" title="' . getImageTitle() . '">' .
'</a></textarea>';
?>

**文中の###hostname###はhttp:// + 自分のホスト名に置き換えてください。最後に/をつける必要はありません。
(http://blog.goo.ne.jp とか。)



以下メモ書き。


zenPhotoで実際の画像表示に使っている、printDefaultSizedImage(getImageTitle()); が使えればいうことなしだったのだけれど、
(これを使うとタグ付きで画像表示のHTMLが取得できる)
相対URLだったのと、細かい調整が出来なかったので少し回り道をしました。

参考にしたのは公式のドキュメントサイトと、ソースコード。
結局ソースコード(zp-core/ template-functions.php)読んだ方が早かった。

サムネイルをさらに小さくすることも出来るはず。
ただ、そうすると縮小処理が入るのと、キャッシュもされるはずなので
アルバムの表示に使っているサイズをそのまま利用。
(ホストしているサーバーがATOM機なので画像の縮小処理が重いw)
幸い、このブログだと横幅ぴったりだし。


getImageLinkURL()
画像ファイルへのURLを取得する。
上にも書いたけれど、FQDNではなくてhostnameを除いた相対リンクなので、頭に無理矢理http://[hostname]を付けてますw
htmlspecialchars()でラップしてるのは、zenPhotoのソースで実際にそうやってたからw
たぶん不味い文字列をエスケープしてくれてるんだと思う。(スラッシュとか?)

getImageTitle()
画像のタイトルを取得する。
うちでは基本的にファイル名。ファイル名のほかにも別に設定できたはずだけど、特に使ってない。
これが、altとtitleプロパティに入る。

あとはスタイルを適当に編集してできあがり。


こんな感じで表示されます。
一応配慮して、目立たなくしてみました。

zenPhotoはwebの設定画面の中にテーマを編集するテキストエディタが備わってるので、楽ちん~

最新の画像もっと見る