2019年に入ってから友人とUCSB留学ブログ を運営しており、主に友人が記事の執筆、自分はブログサイトの開発を担当しています。

そこで現在、Netlify CMS を利用して執筆と開発を分離しているのですが、CMSからアップロードした画像のサイズが変更できないという苦情を受けたのでごにょごにょして修正しました。

EditorComponentを追加する

Netlify CMSはreactで書かれているということで、最初はカスタマイズできるか自信がなかったのですが、document を確認してみると、意外にもeditorのcomponentを簡単にカスタマイズできるようになっていて素敵でした。Hugoのfront matterに合わせて適当にボタンとかインプットとか増やせるみたいですね。

早速documentに従って、/static/admin/index.htmlに記述していきます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

CMS.registerEditorComponent({
  id: "customImage",
  label: "CustomImage",
  fields: [
    {label: "Image", name: "image", widget: "image"},
    {label: "Width", name: "width", widget: "number", min: 1, default: 400}
  ],
  pattern: /^{ {< customImage "(\S+)" (\S+) >} }$/,
  fromBlock: function(match) {
    console.log(match)
    return {
      image: match[1],
      width: match[2]
    };
  },
  toBlock: function(obj) {
    return '{ {< customImage "' + obj.image + '" ' + obj.width + ' >} }'
  },
  toPreview: function(obj) {
    return (
          '<figure><img src=' + obj.image + ' width=' + obj.width + ' style="height:auto;"/></figure>'
         );
  }
});

上記のようにindex.htmlにscriptを追加すると、CMSからcustomImageという項目を選択することができるようになります。

これで終わりかと思いきや、まだ一つやることがあります。

上記のEditorComponentを使用してcustomImageを選択し画像を挿入すると、

{ {< customImage "example.jpg" 400 >} } 

このようなshortcodeが実際のmarkdownファイルには記述されます。

このままではまだhugoがimageとして解釈してくれないため、custom shortcode を追加しましょう。

hugoのcustom shortcodeを追加する

hugoのプロジェクトルートにある/layout/shortcodesにcustomImage.htmlというファイルを作成し、以下のコードを保存してください。

<figure>
    <img src="{{.Get 0}}" width="{{.Get 1}}" style="height:auto;"/>
</figure>

shortcodeの第一引数にimageへのパス、第二引数にwidthの数値を入れることでサイズ可変のfigureを挿入することが可能になっています。

これで、CMSからサイズの変更できるcustomImageを挿入することができるようになりました。

Netlify CMS良き

CMSを選定する際にforestly.io とも迷いましたが、もともとの機能がシンプルな分Netlify CMSのほうが拡張性があったので、選んで正解だったかなと思いました。