カンプ画像をPixabayから検索して直接挿入する

使用アドオンWebhapp Pixabay Image Import

制作をする上でコンクリートファイブのようにラピッドプロトタイプ形式で、先に構造をなどを作っていきやすいCMSではページ上にサンプル画像をたくさん挿入する場合が多くあります。

Webhapp Pixabay Image Importアドオンをインストールします。

管理画面にPixelbayのメニューが追加されます。

スクリーンショット 2018-06-16 15.00.37.png

メニューをクリックすると、設定画面が表示されます。

スクリーンショット 2018-06-16 15.02.35.png

Search Languageでベースの言語を選択し、API Keyはpixabay.comにアクセスして、ユーザー登録するかすでにIDを持っている場合はログインします。

そのあとpixabay.com/api/docs/にアクセスします。

ページのSearch ImagesのYour API keyの右の緑の部分をコピーします。

スクリーンショット 2018-06-16 15.07.16.png

 

 

API keyをConcret5のPixabayの管理画面で入力し保存します。

2018-06-16_15.02.35.png

カンプ画像を挿入したい箇所にPixabay Imageブロックを挿入します。

スクリーンショット 2018-06-16 15.13.35.png

挿入すると画像を検索するダイアログが表示されますので「桜」と入力して検索すると下部に画像のリストが表示されます。

スクリーンショット 2018-06-16 15.15.07.png

画像を選択すると画像が挿入されます。

スクリーンショット 2018-06-16 15.21.43.png

挿入された画像は、ファイルの中ではpixelbayというフォルダにまとめられますので、あとでまとめて消去することも可能です。

スクリーンショット 2018-06-16 15.22.39.png