How Show Image Clicked in Another Place Group on Page

aum · 2020-08-02T18:26:13.625Z

Hi All, wanted to share some knowledge that I don’t see well documented else where and took some work to figure out.

Say you have a list of static images on a page that you don’t want in a repeating group (i.e. not scroll bar etc.). And you want the user to be able to select each image and have it show in another part of the page. Say you have thumbnails or profile avatars, etc. that you want to show bigger somewhere else. Well Bubble doesn’t make it super easy to pass images around, or at least it’s not obvious to non-programmers because you don’t use Image fields to do this. KEY: you must pass the image URL around and then use that to show the image efficiently.

So to do this:

Lay out all of your images
For each image set a custom state “URL” type text
Set the default text to the be the AWS URL for the image found in the image’s editor pane
Do this for each static image on your page
Create an image inside a group on the page where you want to show the larger or selected image
Create a custom state for that group of “URL” type text as well
For each thumbnail/avatar image create a workflow where you set the state of the target group/images URL state to the URL state of the image you are selecting.

Now you should be able to click around the different images and have them each appear in your single target location. What you do from there, save it to an image field etc. is up to you of course. Hope this helps.

boston85719 · 2020-08-02T18:45:46.206Z

You could also set the group that contains the image element that you want to display to be of type text — this way you eliminate the customs state — and you can do a workflow to pass data to the group being the URL text

Bubble

Bubble Editor - Sortingnamesnumbers

Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications.

So each static image is contained by a group with type text and the datasource is the copied AWS URL — then when you set the workflow event to display data in the main group to show the larger image and that group is also of type text and the image element has the datasource for dynamic images set the the container groups text

I do have a question though…why do you have a list of static images? All those images are once you upload them as a static image in your file manager

Screen Shot 2020-08-03 at 1.42.06 AM1861×451 54.3 KB

Which means that they are taking up space in your apps storage and will count against your capacity usage…also using the static image upload feature doesn’t provide you with any ability to set a maximum file size of an image uploaded, which will also negatively impact your capacity and usage.

There are other ways out there as well to achieve the goal of having a list of images displayed without showing a scroll bar in a repeating group. You could set the repeating group to a full list which removes the scroll bar and if you are searching a large list of images stored in the database you could always set items from items until to get a specific number of images displayed.

What was your use case for the set up you put together?

aum · 2020-08-03T02:43:54.054Z

Good tips @Boston85719 . Would definitely save a lot of work with the custom states. My use case is just an avatar selector with a wide range of avatars; fortunately they don’t take up much space. I will look for an upload solution that limits file size - thanks for the warning. I will also explore your tips around RGs too.

boston85719 · 2020-08-03T06:17:16.371Z

Check this application for responsive repeating group…it eliminates scroll bars, and is responsive

Bubble

Bubble Editor - Responsiverepeatinggroup

Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications.

Scroll to bottom of page to find the Repeating Group…need the settings in responsive editor for collapsing widths as well as max width on groups that are not fixed width to set how many columns to display.

This could help with your overall design for responsive behavior…just make the images a square and they should always remain same proportionally. You could still use the display data to send the images from a repeating group to another larger group, but wouldn’t be with static images but dynamic.

If you are creating an avatar selector, consider making a option set for it…in option sets you can use the display to ‘label’ them then create a new attribute of type image…you could also create a new attribute that is the AWS URL and make it type text.

With option sets you don’t need to ‘do a search’ which means faster loads.

aum · 2020-08-03T15:02:42.499Z

@boston85719 thank you again. Very helpful.

sheepherd.co · 2024-09-02T13:54:12.396Z

You helped me out!! I was able to take what you shared and just make it work for my dynamic images. Then simple make the group and image align to parent forgot to over lap!! Now all my images I send can just be clicked and enlarged in a pop up.