2018-10-11 , ,

Org2blogでサムネイル画像のサイズをリンク毎に個別に設定する

このBlogは Org2blog + WordPress で書かれているわけなんですが、画像を張るときにちょっと気になることがあります。

それは画像のサイズを個別に指定する標準的な方法が無いこと。 org2blog/wp-image-thumbnailsorg2blog/wp-image-thumbnail-size という設定があってそれを使えば全体でサイズを指定出来るのですが、一つの文書の中でこの画像はどうでもいいので小さくしたい、この画像は重要なので大きくしたい、といった個別に指定する方法が用意されていません。

最終的にHTMLでエクスポートされるので、画像(img要素)に対してstyleやwidth属性を設定すれば無理矢理大きさを変えられます。

#+ATTR_HTML: :width 240px
[[file:./a.png]]

しかしこの場合、あくまで表示時に縮小することになるため不必要に大きな画像をダウンロードすることになります。WordPress側ではアップロード時にいくつかの解像度差分を自動的に生成してくれているのに勿体ない話です。

というわけで、作ったのが次のパッチ。

imgのwidth=を見て適切なサイズの画像を選ぶようにしてみました。

ただ、実はこれだけでは不十分で、同じ画像をサイズを変えて何度も使いたい場合にうまくいきません。org2blogは内部で一つのファイル名に対して一つのサムネイルサイズを前提にしているため、最初に指定した画像リンクのサイズが以降使われてしまいます。

それを解決してみたのが次のパッチ(一つ目のパッチを前提にしています)。

これによって同じ文書の中であっても次のような指定が可能になります。

# mediumサイズが使われる
#+ATTR_HTML: :width 200px
[[file:./a.png]]

# largeサイズが使われる
#+ATTR_HTML: :width 640px
[[file:./a.png]]

# org2blog/wp-image-thumbnail-sizeで指定したサイズが使われる
[[file:./a.png]]

ソースコード全体としては https://github.com/misohena/org2blog の image-fix ブランチで提供しています。

https://github.com/misohena/org2blog/commits/image-fix