Hi there,
I have an image dynamically loaded onto my page.
I need to update that image depending on if someone clicks a certain element.
The quick and dirty solution is a page refresh, but wondering if there’s a more elegant solution.
Thanks!
Hi @tom.matthews, try this:
Select the image element.
Choose Arrange > Group elements in a group
Make the new group Type of content: image
Set a url of an image in the Data source. This will be the default image.
Select the image element.
Set Dynamic image to Parent group’s image.
Choose the workflow of the element click
Add a step: Display data in Group
Choose the newly created group.
Set a new url in Data to display. This can be retrieved from an API, if it is set to Data, or retrieved as Results from step 1 if API is set to Action… and Call API on the previous step.
Hero!
This mostly works. It only appears to work for the first time that element is clicked, and it’ll be pressed multiple times.
Any thoughts? I’m guessing I need to remove the old image once one’s already loaded!
This is probably because you have a GET API, and Bubble caches the result if the parameters, url, and headers are unchanged.
You can bypass the cache by, for example, adding a header that your API will ignore, and putting in current date/time extract milliseconds.
Oh okay, do you have any more detail on how to do that?
Do you mean on the Bubble side? E.g. Plugins > API connector > My API > Headers
Yes, make the header something that can be altered on the workflow action, i.e. uncheck the Private option.
Sorry, I’m quite confused.
My API response looks like this, and screengrabs below.
{
"id":"LERXSVYn4_I",
"created_at":"2018-02-19T16:12:02-05:00",
"updated_at":"2018-08-28T20:48:52-04:00",
"width":4680,
"height":5850,
"color":"#E9EDF1",
"description":"aerial photo of mountains and clouds under blue sky",
"urls":{
"raw":"https://images.unsplash.com/photo-1519074025331-81dcc0c0ee6a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjQwMTUxfQ&s=f8bd85e77631509447fd083021af45fd",
"full":"https://images.unsplash.com/photo-1519074025331-81dcc0c0ee6a?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjQwMTUxfQ&s=dc98b5902dadd9c711c9a4a44f03fc49",
"regular":"https://images.unsplash.com/photo-1519074025331-81dcc0c0ee6a?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjQwMTUxfQ&s=593386ba67b0d82ae2ccce81a647cabd",
"small":"https://images.unsplash.com/photo-1519074025331-81dcc0c0ee6a?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjQwMTUxfQ&s=ffb0d2fac972a528c13865100f5c580f",
"thumb":"https://images.unsplash.com/photo-1519074025331-81dcc0c0ee6a?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&ixid=eyJhcHBfaWQiOjQwMTUxfQ&s=6402ae9ab32d4b10ce94e1f75a2a5ee8"
},
"links":{
"self":"https://api.unsplash.com/photos/LERXSVYn4_I",
"html":"https://unsplash.com/photos/LERXSVYn4_I",
"download":"https://unsplash.com/photos/LERXSVYn4_I/download",
"download_location":"https://api.unsplash.com/photos/LERXSVYn4_I/download"
},
"categories":[
],
"sponsored":false,
"sponsored_by":null,
"sponsored_impressions_id":null,
"likes":56,
"liked_by_user":false,
"current_user_collections":[
],
"slug":null,
"user":{
"id":"4WfMZVniq4M",
"updated_at":"2018-06-27T11:18:02-04:00",
"username":"connor_jalbert",
"name":"Connor Jalbert",
"first_name":"Connor",
"last_name":"Jalbert",
"twitter_username":"connor_jalbert",
"portfolio_url":"http://www.connorjalbert.com",
"bio":"Photographer, Videographer and Journalist from Seattle, WA.\r\nInstagram @connor_jalbert",
"location":"Seattle",
"links":{
"self":"https://api.unsplash.com/users/connor_jalbert",
"html":"https://unsplash.com/@connor_jalbert",
"photos":"https://api.unsplash.com/users/connor_jalbert/photos",
"likes":"https://api.unsplash.com/users/connor_jalbert/likes",
"portfolio":"https://api.unsplash.com/users/connor_jalbert/portfolio",
"following":"https://api.unsplash.com/users/connor_jalbert/following",
"followers":"https://api.unsplash.com/users/connor_jalbert/followers"
},
"profile_image":{
"small":"https://images.unsplash.com/profile-1491702339387-8c20486cb93a?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=32&w=32&s=30cb979dafcfda391e4f3333c9ea1710",
"medium":"https://images.unsplash.com/profile-1491702339387-8c20486cb93a?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=64&w=64&s=a0763b1370cdbc3df2ac891416667a6b",
"large":"https://images.unsplash.com/profile-1491702339387-8c20486cb93a?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=128&w=128&s=d8ecaa768b6512ad224c858ead3f45a6"
},
"instagram_username":"connor_jalbert",
"total_collections":1,
"total_likes":16,
"total_photos":10
},
"exif":{
"make":"SONY",
"model":"ILCE-7RM2",
"exposure_time":"1/2000",
"aperture":"4.0",
"focal_length":"26.0",
"iso":100
},
"location":{
"title":"Queenstown, New Zealand",
"name":"Queenstown",
"city":"Queenstown",
"country":"New Zealand",
"position":{
"latitude":-45.0311622,
"longitude":168.6626435
}
},
"views":348385,
"downloads":2035
}
Thanks in advance, I really appreciate your help!
Something like this?
Something like that.
For the header, try naming it “dummytimestamp”, and pass a number 123456789.
For the header and parameter, uncheck “Private”.
(unless you whited-out an authentication header! in that case, create a new dummy header)
Then in the workflow, click on the API call and you can modify the header and parameters.
1 Like
You’re awesome. Thanks.