Gallery Example

You can have either individual light-boxed images, or grouped light-boxed images. The grouped ones allow you to navigate forward/back using your keyboard arrows (or if you hover the mouse over the sides there will be arrows you can click to navigate).


Individual image example, no navigation: 


When looking at the source for this individual example, notice the large image path does not go after the href= it goes in the data-featherlight= part of the A tag.


Grouped images example, allows you to navigate between them: 


When looking at the source, notice you must have a DIV around the A tags. The DIV tag must include:  data-featherlight-gallery="" data-featherlight-filter="a" for it to work. You will most likely use this grouped method rather than the individual ones. Notice the path to the large image DOES go in the href= for these grouped images.


This is the easiest workflow:

1. Click the "insert image" button in the WYSIWYG editor. Upload the large version of the image.

2. With the insert image window still open, select the newly uploaded image and a dropdown will appear called "size to insert"

3. Choose the thumbnail size you want, in the examples above I used "compact"

4. Click "insert image".

Repeat steps 1-4 until you have the thumbnails you want for the specific group added (add a space after each one you add)

5. Click the button in the top right of the editor to view the source code

The paths of the thumbnail images you just added will look like this:  //

6. You can remove the ?10741010910238391101 part, and to get the path for the original sized version just copy the path and remove the _compact part so it looks like this:  //


 Example of the grouped gallery code:

<div data-featherlight-gallery="" data-featherlight-filter="a"><a href="//"><img src="//" /></a> <a href="//"><img src="//" /></a> <a href="//"><img src="//" /></a> <a href="//"><img src="//" /></a></div>