これは Craft CMS Advent Calendar 2018 9日目の記事です。
連載「サンプル制作で覚える Craft 3 サイト構築の基本」の一環として、アセットの登録方法を見ていきます。あわせて「ニュース」セクションのエントリデータのインポートにあたり、必要な画像ファイルを事前に登録します。
ここでは、次の作業を行います。
- 画像素材の準備
- 「アセット」フィールドからの登録
- アセット一覧からの登録
- アセットインデックスを利用した一括登録
画像素材の準備
はじめに、サンプルとして登録するための画像ファイルを用意してください。
ここでは Unsample というウェブサービスを利用して、Unsplash に登録されている画像をランダムに取得してみます。
Unsample · Download Free Stock Images:
http://unsample.net/
次の内容を入力してから SAMPLEES!
ボタンをクリックします。
ラベル | 値 |
---|---|
Count | 5 |
Width | 1000 |
Terms | nature |
Zip 形式のファイルダウンロード後、展開したフォルダに含まれる画像ファイルを使用します。
なお、試した範囲だと macOS Mojave の Safari ではダウンロードを開始しないため、Chrome などを利用してください。
「アセット」フィールドからの登録
アセットを登録する1つめの方法は、「アセット」フィールドへのドラッグ&ドロップ操作です。
グローバルナビゲーションから エントリ
に移動後、サブナビゲーションで すべてのエントリ
が選択されていることを確認し、新規エントリ
ボタンのオプションから ニュース
をクリックします。
メイン画像
フィールド付近に画像ファイルを直接ドラッグ&ドロップします。
アップロード中はプログレスバーが表示されます。
アップロードが完了すると、フィールドの モードを見る。
設定に従いサムネイル画像が表示されます。また、ファイルのアップロード先はフィールド作成時に指定した 既定のアップロードロケーション
となるため、web/assets/site
直下に格納されます。
アセット一覧からの登録
2つめは、アセット一覧からアップロードする方法です。
「アセット」メニューの場合
グローバルナビゲーションから アセット
に移動後、右上にある アップロード
ボタンをクリックするとファイル選択ダイアログが表示されます。任意のファイルを選択すると、サブナビゲーションで選択されているボリュームにアップロードされます。
アップロードが完了すると、一覧にアセットが追加されています。
エントリの「アセット」フィールドの場合
「ニュース」セクションの 新しいエントリを作る
画面を例にします。
エントリ編集画面にある「アセット」フィールドの アセットを追加
ボタンをクリックします。「アセット」フィールドの設定で 選択ラベル
に任意のテキストをセットしてある場合は、ボタンのラベルを読み替えてください。
アセット一覧のモーダルウィンドウ左下にある アップロード
ボタンをクリックします。任意のファイルを選択するとアップロードされるのは、「アセット」メニューの場合と同様です。
なお、メイン画像
フィールド設定の ソース
を複数選択または すべて
にしておくとモーダルウィンドウの左側にサブナビゲーションが表示され、ボリュームを選択できるようになります。
アセットインデックスを利用した一括登録
3つめは、FTP などで対象ボリュームへあらかじめファイルをアップロードしておき、アセットインデックスを更新することで一括登録する方法です。
初回の「事前準備について > コーディングデータの準備」で web/assets
下層に配置した公式デモサイトリポジトリの画像ファイルを一括登録する想定のため、web/assets/site
直下に Craft 3 のアセットとして登録されていない画像ファイルが存在することを確認しておいてください。もし、未登録の画像がない場合は冒頭の Unsample 経由で取得した画像を配置してください。
グローバルナビゲーションから アセット
に移動し、作業前の状態を確認しておきます。サイトアセット
ボリュームには、画像が2つだけ登録されています。
グローバルナビゲーションから ユーティリティ
に移動後、サブナビゲーションから アセットインデックス
を選択します。次に アセットインデックスを更新
ボタンをクリックします。リモート画像をキャッシュしますか?
の項目については、公式ドキュメントも参照してください。
アセットインデックスの更新中は、アセットインデックスを更新
ボタンの右側にプログレスバーが表示されます。
スキップしたファイルなどがあった場合、更新処理の完了時にダイアログウィンドウが表示されることがあります。
グローバルナビゲーションから アセット
に移動し、web/assets/site
に格納された画像がサブフォルダを含めて Craft 3 のアセットとして登録されていることを確認します。
まとめ
今回は Craft 3 の管理画面でアセットを登録する際の3つの方法について確認しました。
「アセットインデックスを利用した一括登録」はウェブサーバー上に存在するファイルを Craft 3 のアセットとして自動登録できるため、リニューアル時のデータインポートなどで重宝すると思います。
次回は「ニュース」セクションの作成に戻り、「FeedMe プラグインを利用したエントリデータのインポート」について解説します。