Craft CMS のリッチテキストフィールドから、任意の長さのテキストだけを出力してみる

今日も、覚えたてのちょっとした Tips をまとめます。
Craft CMS の リッチテキスト フィールドは、Redactor II を利用した WYSIWYG エディタです。

Rich Text Fields | Documentation | Craft CMS
https://craftcms.com/docs/rich-text-fields

見出しや段落など HTML タグを含むデータを入力できますが、一覧ページでループ処理する際など、概要文だけ抜き出したいことがあります。

そこで、任意の長さのテキストを取得する方法について調べてみました。

フィールドを用意する

はじめに richtext_body というハンドル名の リッチテキスト タイプのフィールドを用意します。

The Architect プラグインをインストール済みであれば、プラグイン設定の Raw Input タブに次の JSON をコピーして Construct ボタンをクリックしてください。

{
    "groups": [
        "RichText"
    ],
    "fields": [
        {
            "group": "RichText",
            "name": "本文",
            "handle": "richtext_body",
            "instructions": "",
            "required": false,
            "type": "RichText",
            "typesettings": {
                "configFile": "",
                "availableAssetSources": "*",
                "availableTransforms": "*",
                "cleanupHtml": "1",
                "purifyHtml": "1",
                "purifierConfig": "",
                "columnType": "text"
            }
        }
    ]
}

参考:The Architect for Craft CMS
https://github.com/Pennebaker/craftcms-thearchitect

テンプレートを調整する

エントリを entry で参照できるテンプレート上に、下記のサンプルコードを記述します。

{# 設定 #}
{% set text_limit = 50 %}
{% set body_text = entry.richtext_body|striptags %}
{% set summary = body_text|slice(0, text_limit) %}

{# 出力 #}
{% if summary %}
<p class="text">{{ summary }}{% if body_text|length > text_limit %}...{% endif %}</p>
{% endif %}

行ごとに見ていきましょう。

{% set text_limit = 50 %}

初めに、取得する文字数をセットします。

{% set body_text = entry.richtext_body|striptags %}

次に、striptags フィルタで HTML タグを除去したリッチテキストのテキストを変数にセットしています。

{% set summary = body_text|slice(0, text_limit) %}

さらに、slice フィルタでテキストの先頭から指定した文字数を抜き出しています。
このサンプルでは、最大50文字まで抽出されます。

あとは、これを出力すれば完了です。

{% if summary %}
<p class="text">{{ summary }}{% if body_text|length > text_limit %}...{% endif %}</p>
{% endif %}

ここでは、テキストがある場合のみ p.text で概要文を囲み、さらに指定した文字数よりもテキストが多ければ ... を出力する分岐を加えています。

フィルタをうまく使えば、比較的簡単にテンプレートが書けて便利ですね。

comments powered by Disqus