a-blog cms Ver. 2.1 のカスタムユニットを使ってFlickr用のユニットを作ってみました

このエントリーは、平日毎日ブログをリレーの7/10のエントリーになります。

僕のブログでは、画像を全てFlickrに上げてその画像を引っ張ってきて表示する形で運用をしているのですが、画像URLでやってみたり、カスタムフィールドでやってみたり色々と試行錯誤を繰り返していました。Flickrに画像を上げると様々な解像度の画像を生成してくるのを有効活用したいなと、a-blog cms Ver. 2.1のカスタムユニット機能を使って、Flickr用のカスタムユニットを作ってみました。

カスタムユニットの基本的な使い方は、【a-blog cms】カスタムユニットが出来ました | セミナー | Web雑記帳 にわかりやすく書いてありますのでそちらを見ていただきたいのですが、このカスタムユニットをFlickrの画像のバリエーションに特化した形で作っていきたいと思います。

Flickrの画像のバリエーションは、横長の写真ですとこんな感じ、縦長ですとこういった感じで、長辺にあわせて生成されています。今回は横長の写真で見ていきたいと思います。

  • /themes/自分のテーマ/admin/entry/custom-unit.html

のファイル名で以下のテンプレートを置きました。

<table class="entryFormTable acms-table-entry">
	<tr>
		<th>Flickr画像URLベース</th>
		<td>
			<input type="text" name="flickr_image_url_base{id}" value="{flickr_image_url_base}" class="acms-form-width-3quarters" />_b.jpg
			<input type="hidden" name="unit{id}[]" value="flickr_image_url_base{id}" />
		</td>
	</tr>
	<tr>
		<th>Large 1600</th>
		<td>
			<input type="text" name="flickr_image_url_h{id}" value="{flickr_image_url_h}" class="acms-form-width-3quarters" />
			<input type="hidden" name="unit{id}[]" value="flickr_image_url_h{id}" />
		</td>
	</tr>
	<tr>
		<th>Large 2048</th>
		<td>
			<input type="text" name="flickr_image_url_k{id}" value="{flickr_image_url_k}" class="acms-form-width-3quarters" />
			<input type="hidden" name="unit{id}[]" value="flickr_image_url_k{id}" />
		</td>
	</tr>
	<tr>
		<th>キャプション</th>
		<td>
			<input type="text" name="flickr_caption{id}" value="{flickr_caption}" class="acms-form-width-3quarters" />
			<input type="hidden" name="unit{id}[]" value="flickr_caption{id}" />
		</td>
	</tr>
</table>

Flickrの画像は、Large 1024までは、ファイル名のお尻に _b など画像サイズに応じたテキストを入れると表示することができますので、まずベースになるURLを入力する項目を用意しました(Medium 500を基本として、校正オプションで拡張子を削ってうまく処理するとかやる方がいい気もしますが)。Large 1600、Large 2048の画像は、ファイル名に規則性がないため、別で入力する項目を用意しました。このあたりをスマートにやるのに、APIとか使うと思うんですが、結構アナログにやってます。

次に表示側ですが、見るウィンドウサイズに応じて表示する画像を切り替えたいので、ウィンドウサイズに応じて表示する画像を切り替える処理をJSで行いました。Choosing A Responsive Image Solution | Smashing Magazineからたどっていって、はじめPicturefillでトライしていたのですが、どうもうまくグリッドがそろわなかったので、HiSRCにあるbreakpoint.jsを使ってやってみました。具体的には、

  • /themes/自分のテーマ/include/custom-unit.html

のファイル名で以下のテンプレートを置きました。

<hr class="clearHidden">
<div class="flickrImage column-eximage-auto">
    <img src="{flickr_image_url_base}_n.jpg"
         data-minwidth320px="{flickr_image_url_base}.jpg"
         data-minwidth500px="{flickr_image_url_base}_z.jpg"
         data-minwidth640px="{flickr_image_url_base}_c.jpg"
         data-minwidth800px="{flickr_image_url_base}_b.jpg"
         data-minwidth1024px="{flickr_image_url_h}"
         data-minwidth1600px="{flickr_image_url_k}"
         alt="{flickr_caption}" class="columnImage">
	<p class="caption">{flickr_caption}</p>
</div>

あとは、breakpoint.js を読み込んで以下の用に書けば良いと思います。

<script src="/js/breakpoint.js"></script>
<script>
$(document).ready(function(){
	$(".flickrImage img").breakpoint();
});
</script>

ウィンドウサイズに応じて画像が切り替わっていることがわかりやすいように、Flickrの画像の解像度とファイル名のルールにあわせたサンプル画像をアーカイブに用意しました。


ユニットの変更画面は以下のような感じになっています。ダイレクト編集でも使えます。


折角なので、写真を何枚か上げてみます。








ひとまずこんな感じでFlickrの画像を使っていきたいと思います。


カテゴリー

yamada takuo

有限会社アップルップル デザイナー

カメラと自転車と本屋が好きです。愛知県岡崎市在住。