How to use gallery component

vFlow
1

how to use gallery component in Vflow. what is the format of data we have to pass?

1 Like
2

@Abhinav_mehta

For displaying images as a gallery view in the vFlow system there is a component named Gallery. This component displays the Images as per the shared data in the predefined format. This component designed to display images like JPEG, JPG, PNG etc. in the vFlow Execution Engine’s page design layout. For every image some default functionalities are available such as Zoom IN/Zoom Out, Rotate Left/Right, Full Screen, etc. Currently one default template available as per the below reference image:

Now required a new Gallery component template to enable new UI design for display Images in some grid or tiles format. And on selecting particular images it will expand the view and provide available options on it like Zoom In/Out, Rotate Left/Right, configured actions etc.

Pre-requisites

  • User should have to configure a page in vFlow after the login journey.
  • Configured page should have a minimum one row and one column layout.
  • User have to create and configure Gallery component with all the required parameters and mapped under the page layout’s column.

Component Definition

Gallery Component are designed to receive images data in a defined structure from any data source defined in vFlow Mini Designer and visualize on the execution engine with different UI designs and functionalities like Zoom In/Out, Image rotation Left/Right, configured actions etc.
Pre-defined Data Format:
[{ “thumbnailUrl”: “assets/images/document.jpg”, “name”: “document”, “imageUrl”: “assets/images/document.jpg”}, { “thumbnailUrl”: “assets/images/doc-file.png”, “name”: “document”, “imageUrl”: “assets/images/doc-file.png”}]

Configuring the Component

For configuring the component users have to follow the below steps:

  • First Users have to navigate on components section from the side navigation in vFlow Mini Designer.

  • Then click on the Add Component button on the top right-hand side.

  • After clicking, POPUP opens with all the component options and users have to select Gallery and click on the next Add Component button.

  • Users have to fill the following configuration sections with all the mandatory fields

    • Basic Details
      • Add Images
    • UI Properties
      • General SettingsLayout, Dots, Description, Next/Prev Button
      • Image Settings
    • Dependents
    • Data Source

  • When component configured, user have to map it with the pre created or configured page layout column.
  • And finally, user have to publish and sync the page and verify the same on vFlow Execution application.

Configuration

  1. Basic Details
  • Enter Component Name & Description
  • Add Images or Videos or Both

Image or Video Selection

  1. Add URL or list of URLs

  2. Drag & Drop or Import from system folder

  3. UI Properties

  • General Settings

Layouts, Tag (Description), Buttons/Dots, Next/Prev Button, Auto Play, Pause

Layout

  1. Choose background – Colour, Image, Transparency, Opacity, etc
  2. Flexible Layout – Choose from carousel or layout templates (square or hexagonal grid)
  3. Scroll through layout – Horizontal or Vertical or both
  4. Zoom In/ Zoom Out (Thumbnail Size) to see more or less images – Y/N
  5. Set Thumbnail Size
  6. Zoom Out animation when mouse pointer is placed upon an image
  7. Choose border, padding, size, colour, styles
  8. Tag - Display Tagline, Display Image Number



Tag

  1. Choose Text Colour, Font, Size, Style, Alignment
  2. Choose Background Colour
  3. Choose Position
  4. Choose Animation

Dots

  1. Size
  2. Position
  3. Shape
  4. Colour


Navigation

  1. Next or Previous Image
  2. Choose Icon, Colour, Size
  3. Choose Icon Background Shape, Colour, Size
  4. Navigate to a particular image from thumbnails or dots
  5. Place cursor on next or previous icon to view image thumbnails small.
  6. Auto Play – Speed of Image
  7. Pause
  8. Loop – yes/no
  9. Choose Animation – Left to Right, Top to Bottom, Other effects
  • Image Settings

Skins, Effects, Size, Thumbnail Layout

Thumbnail Layout

  1. Vertical/ Horizontal
  2. Right/Left/Top/Bottom
  3. Scroll through Thumbnails
  4. Favourite Image Icon display
  5. Number of columns or rows (x*y)

Effects

  1. Transition Effect
  2. Animation Effect
  3. Transition Time
  4. Animation Time

Skins

  1. Choose Skin from available layouts or Create
  2. Choose Default view size
  3. Zoom in/ Zoom Out – Using Mouse, Using +/- options.
  4. Rotate (Left/Right, 90/180,), Flip (Vertical, Horizontal)
  5. Hover over the image area – Drag to see, Show Controls on hover (Y/N)
  6. Full Screen Option
  7. Save Image, Mark Image for favourite, Copy Image URL
  8. Display Image Number, Tag (4/12)
  9. Image Border/ Padding
  10. Close Image View (Go back to thumbnail view layout)
  11. Navigate
3 Likes
3

@radhika thanks for answering

1 Like