2022年05月10日
コードスニぺットを利用し画像以外のファイルを img タグで挿入する
PowerCMS のデフォルトで画像として扱わないファイルは、環境変数 AssetFileTypes を利用すると画像として扱うことができます。アイテムの種類が画像になると、記事/ウェブぺージなどのアイテムの挿入時に、img タグでの挿入が行えます。
しかし、対象のファイルの拡張子が「.webp」などの場合、ファイルの横幅と縦幅の取得ができず 環境変数 AssetFileTypes を設定しても種類が画像で登録することができません。
これは、テンプレートタグの MTAssetProperty で、横幅と縦幅の取得ができなくなるためです。
このような場合、代替えとはなりますがコードスニペットを利用して、記事編集画面にて、アイテム挿入時に img タグでの挿入をすることができます。
コードスニペットを使って画像挿入時の HTML を設定する手順は以下記事でもご案内しています。
こちらを利用し以下の手順でご利用ください。
手順
- ウェブサイト/ブログの左メニュー [記事] 内 [コードスニペット] を選択し、コードスニペット一覧画面を表示
- コードスニペット一覧画面上部「新規作成」を選択
- コードスニペット新規作成ページの[設定] ウィジェット内 [種類] を「ファイルの挿入」にする
- コードに以下を設定
<img src="<MTAssetURL>" width="100" height="100" alt="<MTAssetLabel escape="html">">
※横幅と縦幅は適宜修正してください。 - 記事編集画面にてアイテム挿入時、挿入オプションのダイアログにコードスニペットの項目が表示される。
- 手順.4で作成したコードスニペットを選択し挿入する。
横幅と縦幅がファイルから読み込めないため都度 width と height 書き直すが必要になりますが、複数コードスニペットを作成していただくなどで対応してください。
コメントを投稿する