画像をクリックして拡大表示、画像のアップロード時のサイズ縮小

はじめまして、先日入会させてもらったばかりの翔平です!

今bubbleを使って自分が行っている町歩きのようなイベントのアプリを作っていて、だいぶ形になってきたのですが、ちょっと調べても見つからなかったのでわかる方いたら教えてほしいです。
※参加者の利用はスマホを前提としています。

実施したい事

▼1つ目:参加者入力画面に表示されている写真をクリックして拡大表示したい。
①の写真が設定画面になっており、imgixを使ってサイズは表示速度を上げるために50に落としてます。
ただこれ以上のクリックしたら拡大表示できるような設定がみつからず・・・わかる方いたら教えてください。

▼2つ目:画像アップロードの速度をあげたい。
参加者入力画面の「チェックポイントで撮った写真を送ろう」をクリックして写真をアップロードできるようにしています。
自分のスマホで撮影した画像が重たいからなのか、アップロードに時間がかかります。
例えばLINEアプリのように重たい画像は自動で軽く変換されて素早くUPされる、みたいな設定は可能でしょうか?
現在のアップローダーエレメントには重たいファイルはアップできないという制限を付けている程度となっています。(画像②参照)
以上2点わかる方いましたらよろしくお願いします。

スクリーンショット



①クリックで拡大
popupを作成して、type of contentをimageにします。クリック時にpopupを表示してDisplay dataで画像をpopupに送り込んで、あとはPopup内で大きなimageエレメントを配置して表示します。

②画像圧縮
圧縮プラグイン(有料)がいくつかあるのでそれを利用すればiPhoneの数MBのデータは数100KBレベルまで落とせます。
僕がいつも使っているのはこのプラグインです

「いいね!」 2

K.nakataさん

さっそくありがとうございます!
①・②ともに試してみようと思います!

試してみてまた不明点出てきたら質問させてください!

度々の質問すいません。
早速試してみたのですが、送るデータと受け取るデータの設定がうまくいかないのか表示されません。
下に今の設定を貼りますので③と④の部分をどうすればいいのか教えてもらえると助かります

①popupを作成しtype of kontentをイメージに変更

②拡大表示させたい画像のワークフロウを以下に設定

③この後の送るデータはThis imageでいいんでしょうか?
また、その場合ここでwidthとheightの設定が必要なんでしょうか?


④受け取る側のデータ設定
仮に↑をThisimageとした場合に、POPUPに配置したイメージにそれらしき項目がありません。

This imageで大丈夫です。
受け取り側は parent imageです。
どのエレメントに画像データを転送して、参照すべきなのかを意識してみてくださいー。
image 拡大表示 エレメントが参照したいのはPopupに転送されたデータなので、parent group’s という表現になります。

「いいね!」 1

K.nakataさんありがとうございます。

ちょっとやってみたのですが、まだうまく表示されないので、頂いたアドバイスをもとにもう少し試してみます!

「いいね!」 1