Gallery Tile: Design and JSON Schema

Version 5

    This document assumes you understand the basics about tiles. For an overview on tiles — what they are and how they work — refer to Tiles and Tile Styles.


    Overview

     

    For Jive 7, the gallery tile enables you to build a visually rich gallery of images for your place.  You can add up to 20 images (JPG, GIF, BMP, PNG).  You can cycle through them within the tile view.  You can blow them up so they lightbox over the entire screen and cycle through them there.  You can add captions.  You can suppress the full screen view.  Not only can you use this to display images, but we've heard cases where folks want to snapshot pictures of graphs or PPT slides and include those in the tile as images. Go for it!

     

    Gallery Tile Examples

     

    editing-ux.png image-gallery-slideshow.png

     

    Tile Style Name

     

    The tile style must be defined in the tile's definition.json file:

     

    "style" : "GALLERY"
    

     

    JSON Schema

     

    The JSON for the gallery tile view is below:

     

    1.     "$schema":"http://json-schema.org/draft-03/schema#"
    2.     "title":"Image Gallery View Style"
    3.     "description":"JSON schema for external updates of tiles using the image gallery view style."
    4.     "type":"object"
    5.     "properties":{ 
    6.         "title":{ 
    7.             "required":true
    8.             "type":"string"
    9.             "maxLength":50 
    10.         }, 
    11.         "contents":{ 
    12.             "required":true
    13.             "type":"array"
    14.             "items":{ 
    15.                 "required":true
    16.                 "type":"object"
    17.                 "properties":{ 
    18.                     "image":{ 
    19.                         "required":true
    20.                         "description": "URL of large image"
    21.                         "type":"string"
    22.                         "format":"uri" 
    23.                     }, 
    24.                     "title":{ 
    25.                         "required":false
    26.                         "type":"string"
    27.                         "maxLength":50
    28.                         "description":"Shown in the alt attribute and in full-screen mode" 
    29.                     }, 
    30.                     "thumb":{ 
    31.                         "required":false
    32.                         "description": "URL of thumbnail image"
    33.                         "type":"string"
    34.                         "format":"uri" 
    35.                     } 
    36.                 }, 
    37.                 "dropAdditionalProperties": true 
    38.             } 
    39.         }, 
    40.         "config": { 
    41.             "required":false
    42.             "type":"object"
    43.             "properties": { 
    44.                 "disableFullScreenView": { 
    45.                     "required":false
    46.                     "description":"If true the full screen mode is disabled."
    47.                     "type":"boolean" 
    48.                 }, 
    49.                 "hideCaptions":{ 
    50.                     "required":false
    51.                     "description":"If true the image captions (titles) are not displayed."
    52.                     "type":"boolean" 
    53.                 }, 
    54.                 "showAdditionalLink": { 
    55.                     "required":false
    56.                     "description":"If true the additional link will be shown in the UI."
    57.                     "type":"boolean" 
    58.                 } 
    59.             } 
    60.         }, 
    61.         "action":{ 
    62.             "required":false
    63.             "description":"Object specifying embedded experience context data and/or a fallback URL"
    64.             "type":"object"
    65.             "properties":{ 
    66.                 "text":{ 
    67.                     "required":false
    68.                     "description":"Text of the action link"
    69.                     "type":"string"
    70.                     "maxLength":50 
    71.                 }, 
    72.                 "url":{ 
    73.                     "required":false
    74.                     "description": "URL of an alternate (non-embedded) experience"
    75.                     "type":"string"
    76.                     "format":"uri" 
    77.                 }, 
    78.                 "context":{ 
    79.                     "required":false
    80.                     "description":"Context to pass to embedded experience"
    81.                     "type":"object" 
    82.                 } 
    83.             }, 
    84.             "dropAdditionalProperties": true 
    85.         } 
    86.     }, 
    87.     "dropAdditionalProperties": true