I need a way to enable customers to add a photo-gallery on their own, without having to touch the source-code.
Actually, I’m working on this feature right now in 7.0. We’re going to support photo galleries as both stand-alone content regions and as a sort of “block” you can insert into an existing content region.
In the past, photo galleries have been a bit of a pain point when integrating with things such as LightBox, FancyBox, PhotoSwipe, etc. I am making this much easier by providing thorough tutorials with cut and paste snippets — possibly even CDN-hosted source so you only need to include the appropriate and elements. Options for each will be controlled with
data- attributes so you can still customize things.
I’ve implemented this in 7.0 as an opt-in feature.
When enabled, you can insert a gallery using this option:
- Drag and drop photos
- Drag or touch to reorder
- Browse for images on your own server or search Unsplash for the perfect photo
The syntax has changed slightly. The old syntax still works, but has been deprecated:
<!-- 5.x syntax for stand-alone galleries --> <div id="my-gallery" class="editable-gallery" data-thumbnail-width="256" data-thumbnail-height="256" data-thumbnail-resize="best-fit|trim" > ... </div>
The new syntax for stand-alone galleries is:
<!-- 7.0 syntax for stand-alone galleries --> <div id="my-gallery" class="cms-editable" data-type="gallery" data-thumbnail-width="256" data-thumbnail-height="256" data-thumbnail-resize="fit|trim" > ... </div>
cms-editable class name and
data-type attribute. You can also use
fit instead of
best-fit for resizing thumbnails.
Galleries in Content Regions
If you want to let users insert new galleries into block regions, you need to opt-in with some settings (all optional except
<!-- 7.0 syntax for galleries inside block regions --> <div id="my-region" class="cms-editable" data-gallery="true" data-gallery-element="div|ol|ul" data-gallery-thumbnail-width="256" data-gallery-thumbnail-height="256" data-gallery-thumbnail-resize="fit|trim" >
Note that these attributes go on the containing content region. Galleries inside content regions may not have their own
data- settings — they always use the settings of the containing region.
You can target galleries created inside these regions for scripting and styling using the
Support for captions has been added. When set, a
data-caption attribute will be added to each image which can be used to populate caption fields in many photo gallery plugins.
Thumbnail generation still happens automatically. You can control the dimensions and resize options just like before.
The resulting thumbnails are stored on your server in
[uploads] is the folder you’ve designated for uploads in your site’s settings.
Hi Cory, sounds great! Very good work.
At the Moment it is not possible to omit the data-thumbnail-height attribute.
It would be great if this could be omitted or set to auto, so that you could use landscape and portrait photos in a masonry style. If i use trim the “heads” get cut and if I use best-fit the portrait photos are too small. What do you think?
But again thank you for the improvements. I like your product very much.
This was a relatively easy thing to do. Moving forward you can omit
data-thumbnail-height and they’ll be resized to the desired width OR height without cropping. Obviously, this only works with the
fit resize option.
Here’s an example with
And of course you can do the same thing with
data-thumbnail-width to create a nice masonry layout.
That sounds great, thanks Cory!