Octpressで画像ファイルを扱う

Octpressで画像を扱う場合、どうすればよかったっけな?ってなりましたのでメモしておきます。

画像の格納ディレクトリ


画像の格納場所は、

1
~source/images

に格納すればよい

imagesディレクトリの配下にも、blogというディレクトリがあるのでブログ用の画像はそちらに格納すればよいっぽい。

Octpress公式の手順


公式の手順

以下の書式に従って記載すれば、いいらしい。

1
{\% img [class names] /path/to/image [width] [height] [title text [alt text]] \%}

そのため、画像サイズを640x480で表示させたい場合、以下のように書くことができます。

1
{\% img left /images/picture.png 640 480 \%}

コード上の「\」は不要です。(何故か、エスケープが正しく動作しなかった)

markdownを使用した方法


これは、前にも書いたように以下のようにすればよいでしょう。

1
[テスト画像](/images/picture.png "title")

但し、画像サイズは指定できないという欠点があります。
画像は、加工するしかないようですね。

htmlを直接記載する方法


以下のような感じで、htmlを使用した書き方もできるようです。

1
<img src="/images/picture.png" alt="alt" title="title" width="640" height="480">

注意する点があるとすれば、必ず前後に

タグが挿入されてしまうことです。
インラインで使用することは、できないっぽいです。

まとめ


個人的な見解は以下のような感じ

  • 基本はmarkdown記法で記載
  • 画像サイズを変更したい場合、Octpressの記法に従う
  • 汎用的にしたい場合、htmlで記載する
  • ブログ記事用の画像の場合、「souce/images/blog」の下に格納する
  • ブログ記事以外の画像の場合、「source/images」の下に格納する