2018.12.09

【Craft 3 サイト構築の基本】アセットを登録する3つの方法

これは 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 経由で取得した画像を配置してください。