https://discord.gg/botpress logo
Caraousel problem
# 🤝help
b
#helping me "Hey everyone, I'm stuck on a Carousel issue in Botpress Cloud. The Problem: I have an array of image URLs and titles stored in a workflow variable (
workflow.photoGallery
). I cannot get these variables to actually work inside the Carousel cards. Specific Issues: * I can't find the 'Items' field or the Dynamic
{x}
Toggle
in the Carousel card Inspector to pass my array through. * When I try to manually point the Image field to
{{workflow.photoGallery[0].imageUrl}}
, it doesn't render correctly or just fails. Basically, I have the data ready in my variables, but the Carousel UI isn't letting me map that data to the cards dynamically. Has anyone else had the 'Items' field disappear, or is there a specific syntax I'm missing for https://cdn.discordapp.com/attachments/1499745100014686259/1499745100798890044/rn_image_picker_lib_temp_c51ff4f0-e9a0-4cd6-87bb-00081c897f31.jpg?ex=69f5e9f7&is=69f49877&hm=eabb8ad6cc5459a15e6b4c2589d16fe86b5fe61313a4e7566ef51e689b04fffc&
b
Yes but i am fetching my images by api and I need caraousel to display those images fetched from api stored in the variable but in the carausel the chatgpt is saying there are advanced setting of type where we can insert the variables stored images
IIf not can you tell me any other way by which I can display the images in the caraousel form after fetching them from
If not can you tell me any other way by which I can display the images in the caraousel form after fetching them from
l
can you respond with your bot ID? I'll go and take a look
b
Here I had to add 10 caraosel cards to display my images what is want is that my api fetched value stored in the variable PhotoGallery to be done with one card because if in future more photos are are but only 10 cards so 10 photos will be only seen https://cdn.discordapp.com/attachments/1499745100014686259/1499830796784238642/rn_image_picker_lib_temp_9327ea5c-6ecc-4b75-a574-a998cd69c7f8.jpg?ex=69f639c7&is=69f4e847&hm=cb22151b81a306ff5a4ffd3d83e0fa9128b5a806188745b38d60d5b4e0afcd35&
3ec167b9-1e09-435f-92f7-94d114f8caf4
l
so it works with 10 but not greater than 10?
b
problem is if in future more images are added in my api say 15 but cards made are 10 then 5 images will not be displayed what can be solution to this
l
Taking a look for a solution!
b
Yes please
l
So the limit is 10 per card, you would need to use multiple cards!
b
No no there is no limit to the cards let me explain once more
This was from our docs!
b
. The Photo_Gallery Node (The Carousel Card) This is where the "Image Problem" actually shows up in the UI. The Intent: Display a swipeable row of wedding photos. The Problem (Fixed Amount): By default, a Carousel card is static. If you manually create 3 cards, it will only show 3 images, even if your API returned 10. The Problem (Missing "Items" Field): In your version of the Botpress Inspector, the "Items" setting—which tells the Carousel to "loop" through the whole photoGallery automatically—is missing or hidden.
l
where are you getting this?
b
The Dynamic Loop (The "Items" Field) In a working "Non-Manual" setup, there is a field in the Carousel settings called Items or Mapped Array. You simply type workflow.photoGallery into that box. The Magic: The bot automatically counts how many photos are in that list. If there are 5 photos, it creates 5 slides. If there are 10, it creates 10.
I want to implement above solution instead if the manually adding card thing but i am not able to do in my botpress
😭 😭 😭
@loud-crowd-60573
l
Will get back @brash-florist-38766
b
Please do i am stuck and my everything os at stake
l
The only way might be to do it manual for now
will look for a non manual solution
b
Today also im facing same issue for another thing now
l
Is there a max # of photos? Or does it constantly increase
go ahead and explain the new issue!
l
// Example handler (replace
YOUR_API_ENDPOINT
with your real URL) const response = await fetch("YOUR_API_ENDPOINT") const data = await response.json() // expects [{ title, subtitle, imageUrl }, …] // Build carousel items const items = data.map((item: any) => ({ title: item.title, subtitle: item.subtitle, imageUrl: item.imageUrl, // must be a publicly reachable HTTPS URL actions: [{ action: "postback", label: "Select", value: item.id }] })) // Send the carousel message await conversation.send({ type: "carousel", payload: { items } })
b
What do I do
b
See my chatgpt said to me that the fetched api variable to be added in the Items field but i cannot find the Items field in my caraosel card
That the main issue where is Items field where I can store my fetched api array
Your Execute code before this node already populates workflow.caraouselData[0] with the correct title, subtitle, and imageUrl from the API. You just need the carousel card to reference those variables using index [0].
2 Views