Ghostで画像にclass指定する方法 #jQuery

はじめに

GhostはMarkdownでブログ記事がかけて非常に楽な反面、スタイル指定が難しいことがあります。
例えばBootstrapを使っているときに、画像にimg-responsiveやimg-fluidを指定したい場合、うまい設定方法が提供されていないように思われます。

対策として、stackoverflowの方法をアレンジしてjQueryでclass指定するようにしてみました。

仕組み

Ghostで画像を埋め込む際のパラメータとして使えるのはsrc属性ぐらいしかないため、ここにクエリを入れるか、またはフラグメントを入れるぐらいしか方法は無いように思われます。
ここではフラグメントを使うことにします。

Markdown

![](src#フラグメント)

#フラグメントのところに、目的のクラスであるimg-responsiveなどを入れて、jQueryで操作します。

JavaScript（インジェクションか、テーマをいじって入れます）

$("[src*='#']").attr("src", function (i, value) {
  var fragment = value.substring(value.indexOf('#')).replace('#', '');
  $(this).addClass(fragment);
});

出力例

※Bootstrap v4.0.0-alpha.2を使っています。

Markdown

<div class="row">
  <div class="col-md-4 m-b-2">
![](https://placekitten.com/400/300?image=1#img-fluid)
  </div>
  <div class="col-md-4 m-b-2">
![](https://placekitten.com/400/300?image=2#img-fluid)
  </div>
  <div class="col-md-4 m-b-2">
![](https://placekitten.com/400/300?image=3#img-fluid)
  </div>
</div>

結果

オチ

一旦Markdown記法で画像を入れた後に、ソース上で表示されるパスをコピーして、imgタグに書き換えれば普通にクラス指定ができることに気が付きました。