Netlify CMSで画像の大きさを変更できるようにする

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

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

404 Page not found

UCSBに留学する日本人学生のブログ!

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/shortcodescustomImage.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のほうが拡張性があったので、選んで正解だったかなと思いました。

Share Comments
comments powered by Disqus