layout:gallery
AJAX
ajax:delayedload ajax:event ajax:navigation ajax:region
Data
data:calendar data:column 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:audio 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 alow 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>