<layout:gallery>
AJAX
ajax:delayedload ajax:event ajax:navigation ajax:region
Data
data:calendar data:column data:eventrepeater data:postrepeater data:productbrandrepeater data:productcategoryrepeater data:productrepeater data:repeater data:table data:template data:tree
Forms
forms:address forms:captcha forms:checkbox forms:checkboxgroup forms:codeeditor forms:combobox forms:datepicker forms:dialogbox forms:editbox forms:fileupload forms:form forms:hidden forms:money forms:officeuseregion forms:option forms:password forms:paymentmethod forms:radiobutton forms:radiobuttongroup forms:row forms:searchbox forms:signature forms:slider forms:spinbox forms:submitbutton forms:submitimage forms:submitlink forms:successcontent forms:textarea forms:timepicker
Layout
layout:gallery
ATTRIBUTES
EXAMPLES
layout:productgallery layout:rotator layout:stepper layout:stepperpanel layout:tablist layout:tablistitem
Logic
logic:dependency logic:else logic:if logic:include logic:parse logic:variable
Navigation
navigation:breadcrumbs navigation:item navigation:primary navigation:secondary
Personalisation
personalisation:firstname personalisation:fullname personalisation:lastname personalisation:other
Standard
standard:embed standard:icon standard:image standard:link standard:script standard:tooltip standard:video
Templates
templates:button templates:card templates:column templates:fancybox templates:faq templates:flexlayout templates:header templates:row templates:section templates:styles templates:teammember templates:testimonial
Regions
regions:content regions:contentadditional regions:security regions:togglable
Third Party
thirdparty:googlemap thirdparty:googlemapmarker

`<layout:gallery>` </...>

A space-efficient and attractive way to present photo galleries, with image grid support and an integrated modal.

Content

images
May contain any number of <img> or <standard:image> elements.

Attributes

- `id`
string
Give this control a unique id. Can be accessed in the client DOM (eg, document.getElementById('myid') or in the server DOM using [? $myid ?] or [? $('myid') ?]).
- `modalContent`
string
Which content, if any, should trigger a modal overlay when clicked.
- `modalTheme`
string
Which theme the gallery modal should adopt when revealed.
- `sizing`
string
Responsive Items Per Row

The gallery will set the number of items on each row to a number within the provided range, attempting to choose the best number for the available space.

Example: a value of '4,6' tells the gallery to have between 4 and 6 items on each row, choosing the best number within that range according to the available space. A value of '4,4' tells the gallery that it can only have 4 items per row (if possible) at all times.
- `sizingtolerance`
int
Gallery sizing tolerance

How much the sizing can be changed to allow for the most evenly distributed rows.
- `spacing`
int
Gallery spacing

The amount of space between items in the gallery.

Examples

Basic Gallery Display

Display a gallery of images on a page

HTML:

<layout:gallery spacing="20" sizing="3,3" modalTheme="dark" sizingtolerance="1" modalcontent="*"> <standard:image lazy="true" src="https://images.unsplash.com/photo-1498804103079-a6351b050096?ixid=Mnw2ODg1fDB8MXxzZWFyY2h8N3x8Y29mZmVlfGVufDB8fHx8MTY4MDc1OTc4MA&" /> <standard:image lazy="true" src="https://images.unsplash.com/photo-1559925393-8be0ec4767c8?ixid=Mnw2ODg1fDB8MXxzZWFyY2h8Nnx8Y2FmZXxlbnwwfHx8fDE2ODA3NTk3OTQ&" /> <standard:image lazy="true" src="https://images.unsplash.com/photo-1554118811-1e0d58224f24?ixid=Mnw2ODg1fDB8MXxzZWFyY2h8Mnx8Y2FmZXxlbnwwfHx8fDE2ODA3NTk3OTQ&" /> <standard:image lazy="true" src="https://images.unsplash.com/photo-1529676468696-f3a47aba7d5d?ixid=Mnw2ODg1fDB8MXxzZWFyY2h8Mjl8fGNhZmV8ZW58MHx8fHwxNjgwNzU5Nzk0&" /> <standard:image lazy="true" src="https://images.unsplash.com/photo-1481833761820-0509d3217039?ixid=Mnw2ODg1fDB8MXxzZWFyY2h8NXx8Y2FmZXxlbnwwfHx8fDE2ODA3NTk3OTQ&" /> <standard:image lazy="true" src="https://images.unsplash.com/photo-1509042239860-f550ce710b93?ixid=Mnw2ODg1fDB8MXxzZWFyY2h8MXx8Y2FmZXxlbnwwfHx8fDE2ODA3NTk3OTQ&" /> </layout:gallery>