Enable clients to add a photo-gallery


#1

I need a way to enable customers to add a photo-gallery on their own, without having to touch the source-code.


#2

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.


#3

I’ve implemented this in 7.0 as an opt-in feature. :partying_face:

When enabled, you can insert a gallery using this option:

Features

  • Drag and drop photos
  • Drag or touch to reorder
  • Multi-selection
  • Browse for images on your own server or search Unsplash for the perfect photo

Stand-alone Galleries

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>

Note the 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 data-gallery):

<!-- 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 cms-gallery class.

Captions

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.

Thumbnails

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]/thumbnails, where [uploads] is the folder you’ve designated for uploads in your site’s settings.


#4

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.


#5

Good call!

This was a relatively easy thing to do. Moving forward you can omit data-thumbnail-width or 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. :+1:

Here’s an example with data-thumbnail-height="128":

And of course you can do the same thing with data-thumbnail-width to create a nice masonry layout.


#6

That sounds great, thanks Cory!