Image Gallery

Displays a gallery of images. Consists of an overview that shows thumbnails of all images optionally separated into groups. Each image may be viewed in fullscreen by clicking on it.

Performance considerations

Displaying large images will result in a slow component and a bad user experience. Thumbnails should be no larger than 160x160 pixels. Make sure to use the Image Process component to rescale both the fullsize image and thumbnail if they may be uploaded by users.

Appearance

The component consists of two views. An optional overview and a fullscreen view. If the overview is omitted, the fullscreen view is displayed directly upon navigating to the component.

alt text

Images in the overview can have a caption and a shorter description. Clicking on an image opens it in the fullscreen view.

alt text

Each image may have a checkbox and/or image links and these will be shown when hovering the image. The links may be disabled with a tooltip or hidden for certain images.

Fullscreen view

alt text

The buttons above the image are the same links as in the overview. The fullscreen view can be navigated by clicking on the arrows or selecting an image from the slider below the image. To exit the fullscreen view, press the close button in the top right corner.

The fullscreen view may contain a longer description for each image and show extra information as key value pairs as seen above.

Component settings

Initial thumbnails
The initial size of the thumbnails in the overview. It may always be toggled by the user.
Show checkboxes
Whether or not to show a checkbox for each image in the overview. The menu item can pass the ids of its selected images as selecteditems via links from the gallery to other menu items.
Skip overview
Whether or not to skip the image overview and go directly to showing images in fullscreen. Use the "InitialImageId" querystring parameter to control which image is first displayed.
Thumbnail mode
How to fit the thumbnails images to the display area.
Possible value Description
Pad The entire thumbnail will be shown with extra padding to keep the aspect ratio.
Crop No padding will be used and instead parts of the thumbnail may be cropped to keep the aspect ratio.

SQL

SQL Call: Get gallery info (mandatory)

Retrieves info about all images and groups that should be shown in the gallery.

May modify database: No

Parameters

@Action string
Will be set to "GetGalleryInfo".

Resultset: Groups (optional)

Optional groups to categorize images with.

Table count: repeated zero or one time
Row count: zero or more rows
Columns
GroupId mandatory string

Id of the group.

GroupLabel mandatory string

Label of the group.

Resultset: Image info

Info regarding all images to be displayed.

Table count: repeated exactly once
Row count: zero or more rows
Columns
ImageId mandatory string

Id of the image.

GroupId optional string

The group that the image belongs to. Mandatory if groups are used.

Caption optional string

The image's caption.

Description optional string

Description to be displayed in the overview.

<xxx> optional string

All other columns will be used as passing fields for the image.

SQL Call: Get thumbnails (mandatory)

Retrieves thumbnails to be displayed. Will be called lazily as thumbnails are shown on screen. Using large images as thumbnails will result in a slower menu item, the recommended thumbnail size is 160x160 px. This call will receive a temporary table with the image ids for which the thumbnails should be displayed.

CREATE TABLE #ImageId
(
	ImageId varchar(max) NOT NULL
)
May modify database: No

Parameters

@Action string
Will be set to "GetThumbnails"

Resultset: Thumbnail data

Table count: repeated exactly once
Row count: one or more rows
Columns
ImageId mandatory string

Id of the image that the thumbnail belongs to. Must map to an id in the temp table.

ImageAltText optional string

Alt text for the thumbnail.

ImageContentType optional string

MIME type of the thumbnail. Mandatory if ImageData is used.

ImageUrl optional string

Url to the thumbnail image. One of this and ImageData must be used.

ImageData optional binary

Binary data of the thumbnail. May not be larger than 500kB. One of this and ImageUrl must be used.

SQL Call: Get full images (mandatory)

Retrieves the full images to be displayed. Will be called lazily as images are shown on screen. This call will receive a temporary table with the image ids for which the images should be displayed.

CREATE TABLE #ImageId
(
	ImageId varchar(max) NOT NULL
)
May modify database: No

Parameters

@Action string
Will be set to "GetFullImages"

Resultset: Full image data

Table count: repeated exactly once
Row count: one or more rows
Columns
ImageId mandatory string

Id of the image that the data belongs to. Must map to an id in the temp table.

ImageAltText optional string

Alt text for the image.

ImageContentType optional string

MIME type of the image. Mandatory if ImageData is used.

ImageUrl optional string

Url to the image. One of this and ImageData must be used.

FullDescription optional string

Optional longer description to be displayed when viewing the image in fullscreen. If the description is in a key-value format, consider using image extra info.

ImageData optional binary

Binary data of the image. May not be larger than 50MB. One of this and ImageUrl must be used.

Resultset: Image extra info (optional)

Key value pairs of headings and content to be displayed next to the image in fullscreen.

Table count: repeated zero or more times
Row count: zero or more rows
Columns
ImageId mandatory string

Id of the image to display the information for. Must map to an id in the temp table.

Key mandatory string

The heading of the field.

Value mandatory string

The content of the field.

SQL Call: Validate parameters

Allows you to validate the SQL parameters before any other SQL is run in the component. This call is only made if the SQL is a stored procedure and Validate parameters is checked.

May modify database: No

Parameters

@Force bit
Set to 1 if the last call to validate parameters used admin_force and the user clicked OK in the OK/Cancel dialog.
@ValidateParams bit
Set to 1 when this call is made.

Resultset: Messages (optional)

Table count: repeated zero or one time
Row count: zero or one row
Columns
ADMIN_Force optional string
Message asking the end user to confirm their parameters.
ADMIN_Message optional string
Message explaining why the parameters are rejected.

Custom access control and logging

SQL Call: Custom access control and logging

Use this call to restrict which entries a user is allowed to view and edit, and to log which entries a user views.

Access to a menu item is normally controlled through functions and roles alone but some entities need more fine grained control. For example, a user may have access to the View Member menu item for normal members but not for members with a protected identity.

The menu items a user visits are always logged (in ADMINLogMenuItem) but for sensitive data you may need to log exactly what entries are viewed. Do the logging in this call as the common ways of viewing data (grid and InfoSQL) are not allowed to modify the database.

If you bind a scalar function instead of a stored procedure to this call then its name must end with '_GrantAccess'.

May modify database: Yes

Resultset: Access permissions

Return whether the user is allowed to visit the menu item with the current parameters.
Table count: repeated exactly once
Row count: exactly one row
Columns
GrantAccess mandatory bit
1 if the user is allowed to view the menu item, 0 if the user should not be allowed to view the menu item.

If 0 then an error will be logged as the user should not have been able to reach the menu item with the given parameters in the first place.

Querystring parameters

InitialImageId optional
Id of the first image to display when loading the menu item. Only used when the overview is skipped.
menuitemheading optional
String that replaces the menu item name when the menu item is loaded. It does not replace the name before that (like for example in the navigator). It is ignored if the menu item is displayed as a part in a multipart in which case the name can be set from the multipart procedure.