RG内の画像表示について

DBにList型で登録している画像をRG内で複数表示したいのですが、表示する画像の順番を指定することは可能なのでしょうか?

イメージとしては、image(List of image)に画像1・画像2・画像3が入っているとして、
画像AにDBのリストに入っている1枚目の画像(画像1)、画像Bにリストに入っている2枚目の画像(画像2)が表示したいです。
また、矢印をクリックでshow nextした場合に、「画像A→リストの2枚目(画像2)」「画像B→リストの3枚目(画像3)」といった具合に移り変わり表示できるようにしたいです。

よろしくお願いいたします。


List型にしてしまうと、表示順を設定する方法がなくなってしまうので、
新たに画像用のデータベースを作成する方法をおすすめします。

一例ですが、参考になれば幸いです。
①ImageというDBを作成
■必要なField
・Image:image
・Index:number(並び順用)
・User:User(紐付ける相手DB)

②RepeatingGroupには画像のようにImageDBからCurrentUserに絞り込んで
IndexNumbr順に並べ替えます。

③矢印アイコンにShow previousとShow nextを指定することで、次の画像前の画像に変更できます。

johnさん
いつもありがとうございます!!

画像ファイルを複数登録するのに、「Multi-File Uploader - Dropzone」を使用してDBへList型で登録しているのですが、上記でご教授いただいたやり方ですと、「Multi-File Uploader - Dropzone」は使用しないほうがよろしいでしょうか?

Multi-File Uploader - Dropzoneというプラグインを使ったことがないのですが、
Listで登録されているデータをRGに表示順序を指定して表示する方法が思いつきませんでした。
入力フォームやデータベースはどのような構造になっていますでしょうか。

複数の画像を一気にアップロードするために「Multi-File Uploader - Dropzone」というプラグインを使用しています!
公式ドキュメント

現状では、Multi-File Uploader - Dropzoneの値をcustom stateに格納してDBにList型で保存しています!


画像を3枚アップロードした場合が下の画像になります。

RGに表示順序を指定して表示する方を優先したいので、画像を複数枚アップロードできればこちらのプラグインでなくても良いと考えております!

「いいね!」 1

追加情報提供ありがとうございます。
複数枚アップロードですと、メルカリの投稿のようなイメージでしょうか。
CustomStateにList型で仮保存し、List Shifterプラグインを使って、複数枚Create new thingすることで対応できそうです。
Multi-File Uploader - Dropzoneプラグインは使わなくてもできそうです。

新規レコード複数追加方法は以下の記事を参考にしてみて下さい。



「いいね!」 1

johnさん
お返事遅くなり大変申し訳ありません…!
久しぶりに風邪でダウンしておりました…

まさにそのイメージです!
教えていただいたやり方で実装してみたいと思います!

いつもいつも本当にありがとうございます。

「いいね!」 1

@yunsu さん
とんでもないです。
急に大雨降ったり、蒸し暑くなったり寒暖差激しいですよね。

まさにそのイメージです!
教えていただいたやり方で実装してみたいと思います!

よかったです。
実装方法でわからないことがあれば、お気軽にご質問ください。

「いいね!」 2

@john03tgck01a さん

お世話になっております。
何度も質問申し訳ありません…!

ご教授いただいたやり方は、PictureUploaderに画像を一枚アップロード→登録を複数回繰り返すことでcustom statesに画像をListで仮保存し、仮保存されたデータをList Shifterプラグインを使って繰り返し処理でDBに保存するという流れでよろしかったでしょうか?

この場合、「PictureUploaderに画像を一枚アップロード」という部分を、「一枚ずつではなく一気にアップロード」する方法はございますでしょうか?

理解力が乏しく大変恐縮ですが、お力添えいただけますと幸いでございます。
よろしくお願いいたします。。。

PictureUploaderに画像を一枚アップロード→登録を複数回繰り返すことでcustom statesに画像をListで仮保存し、仮保存されたデータをList Shifterプラグインを使って繰り返し処理でDBに保存するという流れでよろしかったでしょうか?

はい、その通りです。

この場合、「PictureUploaderに画像を一枚アップロード」という部分を、「一枚ずつではなく一気にアップロード」する方法はございますでしょうか?

Multi-File Uploader - Dropzoneを使って画像を一括選択&CustomStateのList型に一時保存し、List Shifterを使って、データベースに1枚づつ保存してみてはどうでしょうか。

「いいね!」 1

NoCodeCampの共通エディタにて簡易的に作成してみました。
こちらも参考にしてみて下さい。

「いいね!」 1

@john03tgck01a
お返事ありがとうございます!

Multi-File Uploader - Dropzoneを使って画像を一括選択&CustomStateのList型に一時保存し、List Shifterを使って、データベースに1枚づつ保存してみてはどうでしょうか。

エディタを参考にさせていただき、こちらで一気にアップロードする部分は対応できそうでした!
本当にありがとうございます。

ただ、上記のやり方でjohnさんにご教授いただいた「新たに画像用のデータベースを作成する方法」を実装するところまではいけましたが、紐付けるDBを設定するところが苦戦しております。

ListShifterKW A Iterate from List Shifterで複数回Create new thingを行う際、Userの場合はCurrent userを使用して紐付けができるかと思うのですが、Userではなく新たに作成するDB(今回はListという名前になっています)に紐付けたい場合はどのように対応すれば良いでしょうか?

イメージとしては、画像のように商品を登録するフォームがあり、そちらに登録する画像を今回お伺いした方法で複数回Create new thingしたいという感じです。
その場合に、List DBに商品情報・Images DBに登録した商品情報と紐付いた画像情報が格納されるようにしたいのですが、ListShifterKW A Iterate from List ShifterでCreate new thing→Create new Images

image = This ShiftLisfterKW’s Current Iteration Item
index =
List = (新しく作成するListと紐付けしたい)

上記のListの部分を上手く作成した商品情報と紐付けることができずにいます…

長文かつわかりにくく大変恐縮ですが、ご確認よろしくお願いいたします。


なるほど、結構複雑ですね。
以下の流れで実装できたと思うので、ご確認ください。
先ほどのURLに作成しています。

①ボタン登録アクション
Step1.Listデータを新規作成
Step2.CustomStateに①のデータを仮置き
Step3.ListShifter起動(BEGIN ITERATE List Shifter…)

②ListShifter起動時のアクション
Step1.Imageデータ新規作成
image = This ListShifterKW’s Current Iteration item
index = This ListShifterKW’s Current Iteration Index
List = ①Step2のCustomState
Step2.①Step1のデータをMake Chage
Image add Result of step1

@john03tgck01a

以下の流れで実装できたと思うので、ご確認ください。
先ほどのURLに作成しています。

ありがとうございます!
無事理想の形でDBへ保存ができました!

あとは、一番初めに教えていただいたやり方で画像を順番に表示するだけなのですが、1つ実現可能なのか確認したいことがございます。

お教えいただいた画像を表示するやり方で、画像のような形の表示を再現することは可能なのでしょうか?
横並びではないので、RGを2つ用意して(画像1の部分と画像2の部分)、画像2の部分のRGにImagesに入っている画像データの2つ目の画像を表示するよう指定すれば良いのかなとは考えたのですが、具体的な実装で詰まっておりまして…

本当に何度も恐縮ですが、ご確認いただけますと幸いでございます。
よろしくお願いいたします。

DBに画像が4枚ある場合なら、下の絵のように4枚が順番に巡っていくイメージです…!

画像1について
初期表示はitem# CustomState(number)にしておいて、「>」を押されたらCostomStateに+1して表示を変えるのはどうでしょうか。
また、OnlyWhenにて最小値と最大値の場合の処理を書く必要があります。
・1枚目表示中にpreviousは非活性にする。
・最後のImageが表示されていてnextを押されたら1に戻す

画像2について
こちらは画像1の#item +2 にすると表示できそうですね。

#itemの値はデータベースImageのIndexの値をお使い下さい。

@john03tgck01a

初期表示はitem# CustomState(number)にしておいて、「>」を押されたらCostomStateに+1して表示を変えるのはどうでしょうか。
また、OnlyWhenにて最小値と最大値の場合の処理を書く必要があります。
・1枚目表示中にpreviousは非活性にする。
・最後のImageが表示されていてnextを押されたら1に戻す

item# CustomState(number)というのは、ページに新たにnumber型のCustomStateを作成するということでしょうか?
#itemの使い方を上手く理解できておらず
理解力が乏しく本当に申し訳ありません…


こちら1枚目の画像のRGなのですが、このようにして#で数字の順番をしていするということは理解できているのですが、上手く指定ができずにいます。

こちらの画像のList imageというのは質問の際使用しているImage DBと同じものです!

はい、おっしゃる通りです。
item# の後に数字を入力すると、〇番目のデータが表示されます。
First itemは最初のデータ、Last itemは最後のデータですね。
なので、この〇番目を動的に指定してあげることが重要です。

まずは1、2、3などの数字を入れてみて、挙動を確認しながら
データの表示を確認してみてはいかがでしょうか。
その後に、1、2、3を矢印アイコンを押すことで変更するようにする。(動的にする)


そして、Image2のitem# は動的にした数値+1の値を入れてみる。

しかし、自分も一気に話してしまって混乱させてしまい、申し訳ありませんでした。
一つずつ解決していくためにも、イベントに参加してみませんか?
5:00~6:00に毎日Bubbleの会を開いているので、こちら参加いただけると解決も早いと思います。
朝が難しければ、7月22日(金)21:00~22:00のBubbleイベントもあります。

ご丁寧にありがとうございます!

とんでもありません!
johnさんにはいつも本当にわかりやすく教えていただいています…!

朝からそのような時間があったのですね!
明日も5:00から開催しておりますでしょうか?
もしかすると途中からになってしまうかもしれませんが、ぜひ参加させていただきたく思います!
よろしくお願いいたします。

毎日開催しているので、ご都合付く日にお気軽にお越しくださいませ