Craft CMSの行列フィールドを使う

published: , updated: 2021年12月23日

これまでは1つのエントリフィールドにマークダウンで入力してましたが、移行にともない新しく行列フィールドを使って投稿方法を快適にしたいと思います。

目次

これまでの課題

1つのエントリフィールドでも問題は無いのですが、以下3点を解決して快適にしたいと思います。

  1. マークダウンで入力するので画像変換が使えない
    • アセットでセットした画像はアセットで設定した画像サイズ変換がされる。
  2. 入力エリアの可視性が悪い
    • エントリフィールドは行数を設定できますがマークダウンでの入力は長いと読みにくい。
  3. アンカーリンクの設定
    • idを振る必要があって＜a＞タグ使うことになる。
      • マークダウンの入力フィールドでHTMLをできるだけ使わないようにしたい。

行列フィールドを使う

とりあえずセットして試します。

まずはフィールド名を設定しフィールドタイプで「行列」を選択し、構成からブロックを設定していきます。
ブロックをHTMLの構造に置き換えると以下のようなセクション構造と考えたら良さそうです。

※ 最終は変更になるので失敗例です。

セクション作成からのエントリ画面

構成的にはsctionごとにブロックにするのは良いアイデアだと思いました。

  1. セクションで作成したフィールドを追加する
    • entry_sectionは行列フィールドのハンドル名です。
  2. 行列フィールドは閉じてる状態で必要に応じてブロックを追加できるようになります。
  3. ブロック単位で上下の入れ替えや折り畳み無効ができる。

エントリ画面はスッキリして良いのですが毎回見出しや画像を入力しないので、空フィールドを無くすために構成を変更したほうが良さそうだと考えました。

フィールドをブロックに変更

フィールド設定した項目をブロックにしました。これだとテキストブロックだけ使っても何とかなりますので空フィールドは無くなります。他のCMSだとConcrete5や初期のTYPOlightのような。

工夫次第でいろんなことできそうです。
例えば

増やしすぎに注意

自分で使う分には理解しているので都合よく入力処理をするので問題ありません。
ただし、依頼を受けて構築する場合は考慮する点は多いと思います。

関連投稿