Gallery View App

[beckhamrryyaann]

How would you recommend a gallery image view widget? I basically have a need to show multiple images in a container. For each image, I would need to be able to add some actions buttons as well. Like to delete, add to cart, print, download, etc... Does that make sense? How would I best accomplish this using NAB? I would have a data source that would return one row for each image (item). The row would have a path to the image on the IFS.

[Johnny Major]

I would suggest using the Tile Widget to view the images. With the tile widget, you can add tile buttons via the behaviors of your application.

For example, I have a data source that consists of three columns: 'id', 'info' and 'image'. The 'image' column contains the path to the image on the IFS (Integrated File System).

Example data

[{
    "ID": 3,
    "INFO": "Corduroy",
    "IMAGE": "/resources/images/temp/mcmThree.png"
}, {
    "ID": 1,
    "INFO": "Marine",
    "IMAGE": "/resources/images/temp/mcmOne.png"
}, {
    "ID": 2,
    "INFO": "Room and Board",
    "IMAGE": "/resources/images/temp/mcmTwo.png"
}]

Tile widget section 1:

<span style="font-weight:500;font-size:18px;">{INFO}</span>

Tile widget section 2:

<img src={IMAGE} alt={INFO} style="max-width: 100%;max-height: 100%;">

mcmGalleryExample.jpeg


I did notice that on mobile, we need to add some padding so that items in the tiles list do not appear too close to each other. Therefore, I'm adding that to our feature/fix tracking system

[beckhamrryyaann]

Perfect.
thanks Johnny!