Cloudinary 上の画像を表示

このブログで画像を扱う手段として、普通に画像ファイルをサーバにアップロードして、その画像 URL を Markdown の image 記法使って表示するのではつまらないと思い、クラウド画像サービス Cloudinary のフリープランを使うことにした。

Django 用の Cloudinary ライブラリも提供されており、画像ファイルフィールドの CloudinaryField も含まれていたので導入は簡単だった。

これで画像ファイルアップロードは Admin サイトからできるようになったが、問題は Markdown で Cloudinary 上の画像をどう表示するか。これはきっと作るしかないと思い、Markdown 拡張を自作して PyPI にアップした。
python-markdown-cloudinary

この拡張を使えば、Markdown テキスト内で Cloudinary ライブラリが提供している Django のテンプレートタグが使えるようになり、HTML に変換されると Cloudinary 上の画像を示す <img> タグが生成される。

{% cloudinary "ykvf8fjku3hngq6kzpsa.jpg" width="290" %}

この Markdown で以下のように画像が表示される(実際のものはセキュリティオプションを加えているので少し異なる)。

6 月の groovisions 展で撮ったこのチャッピー画像を、顔認識 and 正方形に切り出し and 角丸にする場合、次のようにオプションを指定する。

{% cloudinary "ykvf8fjku3hngq6kzpsa.jpg" width="290" height="290" crop="thumb" gravity="face" radius="10" %}

数年ぶりに Cloudinary を使ったが、最近では Retina ディスプレイレスポンシブデザインにも対応していて、大きい解像度の画像を一つアップしておけば後はお任せできるようになっている様子。

Last updated on August 14, 2015