準備
本記事では、Pinterestのような様々な画像のサイズを活かした表示方法を解説します。
Bubbleは無料プランで大丈夫です。（料金の詳細はこちらをご覧ください：Bubbleの料金は？）
方法
１．データベースの作成
STEP.1
データタイプ「写真」を作成します。
Data type: 写真
Fields:
２．エレメントの設置
STEP.1
Repeating Groupを設置します。設定の詳細は以下の通りです。
後述のRepeating GroupはこのSTEP1のRepeating Groupのデータを参照します。これにより各Repeating Groupで個別に検索する必要がなくなります。
- Type of content: 写真
- Data source: “Do a Search for”でデータタイプ「写真」を指定し、新しい写真がうえにくるように、”Created Date”を”Yes”に設定します。
- This element is visible on page load: チェックを外します。
STEP.2
新たなRepeating Groupを設置します。設定の詳細は以下の通りです。
- Type of content: 写真
- Data source: “:items from #1″でSTEP1のRepeating Groupの「一番目のアイテムから」を指定します。
- Layout style: Ext. vertical scrolling
- Rows: 1
- Columns: 1
- Border: 本記事では分かりやすくするためにボーダーを設定します。
STEP.3
Repeating Group内にGroupを設置します。設定の詳細は以下の通りです。
“Collapse this element’s height…”へのチェックを忘れないよう注意です。
- Type of content: 写真
- Data source: Current cell’s 写真
- Cllapse this element’s height: チェックする
STEP.4
GroupにConditionalを設定します。設定の詳細は以下の通りです。
以下の設定をすることで、データベース内の「写真」コンテンツが4つおきに表示されるようになります。
STEP.5
GroupにImageを設置します。設定の詳細は以下の通りです。
- Dynamic Image: Parent group’s 写真’s 画像
- Run-mode rendering: Adjust element height
STEP.6
STEP2のRepeating Group（GroupとImageを含む）をコピー＆ペーストして並べます。
- Dynamic Image: Parent group’s 写真’s 画像
- Run-mode rendering: Adjust element height
STEP.7
コピペしたRepeating Groupの設定を変更し、左から2番目のRepeating Groupは「二番目のアイテムから」、左から3番目のRepeating Groupは「三番目のアイテムから」…表示するようにします。
STEP.8
最後に、Repeating Group, Group, Image間の空白を無くすために、それぞれのサイズを調整します。ImageがGroupからはみ出さない様に、GroupがRepeating Groupからはみ出さない様に注意して下さい。
これで画像を表示する準備ができました。
実際にテストする
実際に画像をアップロードしてどのように表示されるか確認します。
画像のアップロードは”Picture Uploader”とButton”を設置すると簡単です。
ワークフローは以下の通りです。
プレビュー画面を起動して、画像をアップロードします。
画像が元サイズに合わせてそれぞれ異なるサイズで表示されました！
ボーダーの色や丸みの、高さの制限など、細かく設定することでもっとおしゃれにアレンジできます。
ぜひ挑戦してみてください！
以上がBubbleでPinterest風に画像を表示する方法です。
