Loop image within JSON schema template

I’m creating a product review using Dynamic Components extension. I have created a JSON template already. Is it possible to loop or display the images (e.g. 1 to 5 images) within the template? If yes, how? If no, what would be the best way to add images in reviews?

Welcome !

2 Likes

Thank you, but how can I add an (n) number of images in every list?

Use loop with length of image list

2 Likes

I have tried but I can’t figure it out how. I always get an error “expected unique ID.” Can you please elaborate how could I make it?

Post your schema here

2 Likes

In “Horizontal_Scroll_Arrangement1” part where I want to add images.

{
    "name": "Sample",
    "metadata-version": 1,
    "extension_version": 5,
    "author": "<Joel Villena>",
    "platforms": [
        "creator.kodular.io"
    ],
    "keys": [
        "id",
        "profile",
        "name",
        "date",
        "feedback",
        "image",
        "index"
    ],
    "components": [
        {
            "id": "Card_View1{id}",
            "type": "MakeroidCardView",
            "properties": {
                "Width": -2
            },
            "components": [
                {
                    "id": "Vertical_Arrangement1{id}",
                    "type": "VerticalArrangement",
                    "properties": {
                        "AlignHorizontal": 3,
                        "AlignVertical": 2,
                        "BackgroundColor": 16777215,
                        "Width": -2,
                        "isCard": true
                    },
                    "components": [
                        {
                            "id": "Horizontal_Arrangement1{id}",
                            "type": "HorizontalArrangement",
                            "properties": {
                                "AlignVertical": 2,
                                "Width": -2
                            },
                            "components": [
                                {
                                    "id": "Profile_Image{id}",
                                    "type": "Image",
                                    "properties": {
                                        "Height": 50,
                                        "Width": 50,
                                        "Picture": "{profile}",
                                        "ScalePictureToFit": true
                                    }
                                },
                                {
                                    "id": "Space6{id}",
                                    "type": "SpaceView",
                                    "properties": {
                                        "Width": 20
                                    }
                                },
                                {
                                    "id": "Name_Label{id}",
                                    "type": "Label",
                                    "properties": {
                                        "FontSize": 16,
                                        "Text": "{name}"
                                    }
                                }
                            ]
                        },
                        {
                            "id": "Space3_copy{id}",
                            "type": "SpaceView",
                            "properties": {
                                "Height": 10
                            }
                        },
                        {
                            "id": "Horizontal_Arrangement2{id}",
                            "type": "HorizontalArrangement",
                            "properties": {
                                "AlignVertical": 2,
                                "Width": -2
                            },
                            "components": [
                                {
                                    "id": "Date_Label{id}",
                                    "type": "Label",
                                    "properties": {
                                        "FontSize": 12,
                                        "Text": "{date}"
                                    }
                                }
                            ]
                        },
                        {
                            "id": "Space3{id}",
                            "type": "SpaceView",
                            "properties": {
                                "Height": 15
                            }
                        },
                        {
                            "id": "Horizontal_Arrangement3{id}",
                            "type": "HorizontalArrangement",
                            "properties": {
                                "AlignVertical": 2,
                                "Width": -2
                            },
                            "components": [
                                {
                                    "id": "Space10{id}",
                                    "type": "SpaceView",
                                    "properties": {
                                        "Width": 10
                                    }
                                },
                                {
                                    "id": "Feedback_Label{id}",
                                    "type": "Label",
                                    "properties": {
                                        "Text": "{feedback}"
                                    }
                                }
                            ]
                        },
                        {
                            "id": "Space5{id}",
                            "type": "SpaceView",
                            "properties": {
                                "Height": 15
                            }
                        },
                        {
                            "id": "Horizontal_Scroll_Arrangement1{id}",
                            "type": "HorizontalScrollArrangement",
                            "properties": {
                                "AlignVertical": 2,
                                "Width": -2
                            },
                            "components": [
                                {
                                    "id": "Photos_Image{id}",
                                    "type": "Image",
                                    "properties": {
                                        "Height": 150,
                                        "Width": 150,
                                        "Picture": "{image}im{index}"
                                    }
                                },
                                {
                                    "id": "Space11{id}",
                                    "type": "SpaceView",
                                    "properties": {
                                        "Width": 10
                                    }
                                },
                                {
                                    "id": "Photos_Image_copy{id}",
                                    "type": "Image",
                                    "properties": {
                                        "Height": 150,
                                        "Width": 150,
                                        "Picture": "{image}im{index}"
                                    }
                                },
                                {
                                    "id": "Space11_copy{id}",
                                    "type": "SpaceView",
                                    "properties": {
                                        "Width": 10
                                    }
                                },
                                {
                                    "id": "Photos_Image_copy1{id}",
                                    "type": "Image",
                                    "properties": {
                                        "Height": 150,
                                        "Width": 150,
                                        "Picture": "{image}im{index}"
                                    }
                                },
                                {
                                    "id": "Space11_copy1{id}",
                                    "type": "SpaceView",
                                    "properties": {
                                        "Width": 10
                                    }
                                },
                                {
                                    "id": "Photos_Image_copy2{id}",
                                    "type": "Image",
                                    "properties": {
                                        "Height": 150,
                                        "Width": 150,
                                        "Picture": "{image}im{index}"
                                    }
                                },
                                {
                                    "id": "Space11_copy3{id}",
                                    "type": "SpaceView",
                                    "properties": {
                                        "Width": 10
                                    }
                                },
                                {
                                    "id": "Photos_Image_copy3{id}",
                                    "type": "Image",
                                    "properties": {
                                        "Height": 150,
                                        "Width": 150,
                                        "Picture": "{image}im{index}"
                                    }
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

Something like this ?

1 Like

Yes, how could you make it?

I modified you schema

{
    "name": "Sample",
    "metadata-version": 1,
    "extension_version": 5,
    "author": "<Joel Villena>",
    "platforms": [
        "creator.kodular.io"
    ],
    "keys": [
        "id",
        "profile",
        "name",
        "date",
        "feedback",
        "image",
        "index"
    ],
    "components": [
        {
            "id": "Card_View1{id}",
            "type": "MakeroidCardView",
            "properties": {
                "Width": -2
            },
            "components": [
                {
                    "id": "Vertical_Arrangement1{id}",
                    "type": "VerticalArrangement",
                    "properties": {
                        "AlignHorizontal": 3,
                        "AlignVertical": 2,
                        "BackgroundColor": 16777215,
                        "Width": -2,
                        "isCard": true
                    },
                    "components": [
                        {
                            "id": "Horizontal_Arrangement1{id}",
                            "type": "HorizontalArrangement",
                            "properties": {
                                "AlignVertical": 2,
                                "Width": -2
                            },
                            "components": [
                                {
                                    "id": "Profile_Image{id}",
                                    "type": "Image",
                                    "properties": {
                                        "Height": 50,
                                        "Width": 50,
                                        "Picture": "{profile}",
                                        "ScalePictureToFit": true
                                    }
                                },
                                {
                                    "id": "Space6{id}",
                                    "type": "SpaceView",
                                    "properties": {
                                        "Width": 20
                                    }
                                },
                                {
                                    "id": "Name_Label{id}",
                                    "type": "Label",
                                    "properties": {
                                        "FontSize": 16,
                                        "Text": "{name}"
                                    }
                                }
                            ]
                        },
                        {
                            "id": "Space3_copy{id}",
                            "type": "SpaceView",
                            "properties": {
                                "Height": 10
                            }
                        },
                        {
                            "id": "Horizontal_Arrangement2{id}",
                            "type": "HorizontalArrangement",
                            "properties": {
                                "AlignVertical": 2,
                                "Width": -2
                            },
                            "components": [
                                {
                                    "id": "Date_Label{id}",
                                    "type": "Label",
                                    "properties": {
                                        "FontSize": 12,
                                        "Text": "{date}"
                                    }
                                }
                            ]
                        },
                        {
                            "id": "Space3{id}",
                            "type": "SpaceView",
                            "properties": {
                                "Height": 15
                            }
                        },
                        {
                            "id": "Horizontal_Arrangement3{id}",
                            "type": "HorizontalArrangement",
                            "properties": {
                                "AlignVertical": 2,
                                "Width": -2
                            },
                            "components": [
                                {
                                    "id": "Space10{id}",
                                    "type": "SpaceView",
                                    "properties": {
                                        "Width": 10
                                    }
                                },
                                {
                                    "id": "Feedback_Label{id}",
                                    "type": "Label",
                                    "properties": {
                                        "Text": "{feedback}"
                                    }
                                }
                            ]
                        },
                        {
                            "id": "Space5{id}",
                            "type": "SpaceView",
                            "properties": {
                                "Height": 15
                            }
                        },
                        {
                            "id": "Horizontal_Scroll_Arrangement1{id}",
                            "type": "HorizontalScrollArrangement",
                            "properties": {
                                "AlignVertical": 2,
                                "Width": -2
                            },
                            "components": [
                                {
                                    "id": "Photos_Image1{id}",
                                    "type": "Image",
                                    "properties": {
                                        "Height": 150,
                                        "Width": 150,
                                        "Picture": "{image}im{index}"
                                    }
                                },
                                {
                                    "id": "Space11{id}",
                                    "type": "SpaceView",
                                    "properties": {
                                        "Width": 10
                                    }
                                },
                                {
                                    "id": "Photos_Image2{id}",
                                    "type": "Image",
                                    "properties": {
                                        "Height": 150,
                                        "Width": 150,
                                        "Picture": "{image}im{index}"
                                    }
                                },
                                {
                                    "id": "Space11_copy{id}",
                                    "type": "SpaceView",
                                    "properties": {
                                        "Width": 10
                                    }
                                },
                                {
                                    "id": "Photos_Image3{id}",
                                    "type": "Image",
                                    "properties": {
                                        "Height": 150,
                                        "Width": 150,
                                        "Picture": "{image}im{index}"
                                    }
                                },
                                {
                                    "id": "Space11_copy1{id}",
                                    "type": "SpaceView",
                                    "properties": {
                                        "Width": 10
                                    }
                                },
                                {
                                    "id": "Photos_Image4{id}",
                                    "type": "Image",
                                    "properties": {
                                        "Height": 150,
                                        "Width": 150,
                                        "Picture": "{image}im{index}"
                                    }
                                },
                                {
                                    "id": "Space11_copy3{id}",
                                    "type": "SpaceView",
                                    "properties": {
                                        "Width": 10
                                    }
                                },
                                {
                                    "id": "Photos_Image5{id}",
                                    "type": "Image",
                                    "properties": {
                                        "Height": 150,
                                        "Width": 150,
                                        "Picture": "{image}im{index}"
                                    }
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

Blocks

1 Like

Thank you so much! :hugs:

This is it! I didn’t think this way before. :laughing:

May I ask which part of my schema have you modified?

"id": "Photos_Image{id}"
"id": "Photos_Image_copy{id}
"id": "Photos_Image_copy1{id}"
"id": "Photos_Image_copy2{id}"
"id": "Photos_Image_copy3{id}"

Changed them to

"id": "Photos_Image1{id}"
"id": "Photos_Image2{id}
"id": "Photos_Image3{id}"
"id": "Photos_Image4{id}"
"id": "Photos_Image5{id}"
1 Like

Thank you!

In additional, can I leave it just blank string value to some Photo_Image(s) if the user only sent a less than of 5 images?

Thank you once again. :smiley:

I’ll just try it my self to do trial and error. I think, I have to add visibility of the images.

1 Like

will i need to add physical component in new screen if i want to use schema or i can use schema without adding components first in that screen ??? If no need to add physical components so how to add click event in component ??

You have to add which where you place your schema components.

image

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.