Creating an image gallery
You can create an image gallery that contains custom images for use in dashboards and reports.
The SampleExtensionCustomMedia.zip and SampleExtensionCustomMediaAll.zip samples create new images for use in dashboards and reports. These samples are installed like any other extension.
After you create the image gallery, users can select images as follows:
- Dashboard authors can select the Image library tab in the Widgets panel. For more information, see the Dashboards and Stories guide.
- Report authors can select the Toolbox icon
, select Layout, drag the Image object 
to the report, and then double-click it. For more information, see the Reporting
guide.
The images available in the image library have the following descriptions:
- Lightning strike above a city at night
- Lightning in a dark purple sky
- Heavy traffic in a city at night
- Hiker on a hill in the forest
- Several tents on a mountain
- Graph with increasing revenue highlighted
- Graph of increasing revenue
- Group of people in a Call Center
Sample_Custom_Media
The contents of the spec.json file for Sample_Custom_Media is shown here.
{
"name": "Sample_Custom_Media",
"comment":"This sample extension will add custom images to the bottom of the MEDIA panel in Dashboarding.",
"comment":"We currently only support the addition of JPG and PNG files.",
"schemaVersion": "1.0",
"extensions": [{
"perspective": "dashboard",
"comment": "The custom images are for the DASHBOARD perspective only.",
"features": [{
"id": "com.ibm.bi.common.media",
"comment": "This is the ID for the MEDIA panel. It will be the container for the images below.",
"collectionItems": [{
"containerId": "com.ibm.bi.common.media",
"id": "customImage1",
"name": "Lightning above city",
"comment": "The NAME is the text of the tooltip for the image.",
"options": {
"altText": "Lightning strike above a city at night.",
"comment": "The ALTTEXT is shown as a Property for the selected image.",
"imageLink": "v1/ext/Sample_Custom_Media/images/SE_background.jpg"
}
}, {
"containerId": "com.ibm.bi.common.media",
"id": "customImage2",
"name": "Lightning in sky",
"options": {
"altText": "Lightning in a dark purple sky.",
"imageLink": "v1/ext/Sample_Custom_Media/images/weather_background3.jpg"
}
}, {
"containerId": "com.ibm.bi.common.media",
"id": "customImage3",
"name": "Night city traffic",
"options": {
"altText": "Heavy traffic in a city at night.",
"imageLink": "v1/ext/Sample_Custom_Media/images/story_scene1_background.jpg"
}
}, {
"containerId": "com.ibm.bi.common.media",
"id": "customImage4",
"name": "Hiker on hill",
"options": {
"altText": "Hiker on a hill in the forrest.",
"imageLink": "v1/ext/Sample_Custom_Media/images/login_background.jpg"
}
}, {
"containerId": "com.ibm.bi.common.media",
"id": "customImage5",
"name": "Tents on mountain",
"options": {
"altText": "Several tents on a mountain.",
"imageLink": "v1/ext/Sample_Custom_Media/images/welcome_background.jpg"
}
}, {
"containerId": "com.ibm.bi.common.media",
"id": "customImage6",
"name": "Increasing revenue highlighted",
"options": {
"altText": "Graph with increasing revenue highlighted.",
"imageLink": "v1/ext/Sample_Custom_Media/images/story_scene5_background2.jpg"
}
}, {
"containerId": "com.ibm.bi.common.media",
"id": "customImage7",
"name": "Increasing revenue",
"options": {
"altText": "Graph of increasing revenue.",
"imageLink": "v1/ext/Sample_Custom_Media/images/story_scene5_background.jpg"
}
}]
}]
}]
}
Sample_Custom_Media_All
The contents of the spec.json file for Sample_Custom_Media_All is shown here.
{
"name": "Sample_Custom_Media_All",
"comment":"This sample extension will add 8 custom images to the IMAGE LIBRARY tab in the WIDGETS panel in Dashboarding and Stories.",
"comment":"It will also add the same 8 custom images to the IMAGE PICKER dialog in Reporting under IMAGE GALLERY.",
"comment":"Only JPG and PNG files are supported at this time.",
"comment":"These types of extensions are not additive. You must specify all of the custom images you require in one extension.",
"comment":"Otherwise, the last uploaded extension (not UPDATED) will take precedence and become your final library of images.",
"schemaVersion": "1.0",
"extensions": [{
"perspective": "common",
"comment": "The custom images will apply to all perspectives - reporting, dashboarding, and stories.",
"features": [{
"id": "com.ibm.bi.common.media",
"comment": "This is the ID for the Widgets panel. It will be the container for the images below.",
"collectionItems": [{
"containerId": "com.ibm.bi.common.media",
"id": "customImage1",
"name": "Lightning above city",
"comment": "The NAME is the text of the tooltip for the image within the Image Library tab.",
"options": {
"altText": "Lightning strike above a city at night.",
"comment": "The ALTTEXT is shown in the Description Property for the selected image once it is placed on the dashboard.",
"imageLink": "v1/ext/Sample_Custom_Media_All/images/SE_background.jpg"
}
}, {
"containerId": "com.ibm.bi.common.media",
"id": "customImage2",
"name": "Lightning in sky",
"options": {
"altText": "Lightning in a dark purple sky.",
"imageLink": "v1/ext/Sample_Custom_Media_All/images/weather_background3.jpg"
}
}, {
"containerId": "com.ibm.bi.common.media",
"id": "customImage3",
"name": "Night city traffic",
"options": {
"altText": "Heavy traffic in a city at night.",
"imageLink": "v1/ext/Sample_Custom_Media_All/images/story_scene1_background.jpg"
}
}, {
"containerId": "com.ibm.bi.common.media",
"id": "customImage4",
"name": "Hiker on hill",
"options": {
"altText": "Backpacker on a hill in the forest.",
"imageLink": "v1/ext/Sample_Custom_Media_All/images/login_background.jpg"
}
}, {
"containerId": "com.ibm.bi.common.media",
"id": "customImage5",
"name": "Tents on mountain",
"options": {
"altText": "Several tents on a mountain.",
"imageLink": "v1/ext/Sample_Custom_Media_All/images/welcome_background.jpg"
}
}, {
"containerId": "com.ibm.bi.common.media",
"id": "customImage6",
"name": "Call center",
"options": {
"altText": "Group of people in a Call Center.",
"imageLink": "v1/ext/Sample_Custom_Media_All/images/call_center.jpg"
}
}, {
"containerId": "com.ibm.bi.common.media",
"id": "customImage7",
"name": "Increasing revenue highlighted",
"options": {
"altText": "Graph with increasing revenue highlighted.",
"imageLink": "v1/ext/Sample_Custom_Media_All/images/story_scene5_background2.jpg"
}
}, {
"containerId": "com.ibm.bi.common.media",
"id": "customImage8",
"name": "Increasing revenue",
"options": {
"altText": "Graph of increasing revenue.",
"imageLink": "v1/ext/Sample_Custom_Media_All/images/story_scene5_background.jpg"
}
}
]
}
]
}
]
}