These are gallery tests for image wrapped in <figure> elements.
To place a gallery add the necessary YAML Front Matter:
# YAML Front Matter
gallery:
- url: /images/post-gallery/unsplash-gallery-image-1.jpg
image_path: /images/post-gallery/unsplash-gallery-image-1-th.jpg
alt: "placeholder image 1"
title: "Image 1 title caption"
- url: /images/post-gallery/unsplash-gallery-image-2.jpg
image_path: /images/post-gallery/unsplash-gallery-image-2-th.jpg
alt: "placeholder image 2"
title: "Image 2 title caption"
- url: /images/post-gallery/unsplash-gallery-image-3.jpg
image_path: /images/post-gallery/unsplash-gallery-image-3-th.jpg
alt: "placeholder image 3"
title: "Image 3 title caption"
- url: /images/post-gallery/unsplash-gallery-image-4.jpg
image_path: /images/post-gallery/unsplash-gallery-image-4-th.jpg
alt: "placeholder image 4"
title: "Image 4 title caption"
And then drop-in the gallery include — gallery caption is optional.
You can have multiple gallery on the same page, each one has is own fancybox.
If url is not specified for one or more images, they will not appear in fancybox (example follow later).
{% include gallery caption="This is a sample gallery with **Markdown support**." %}
This is some text after the gallery just to make sure that everything aligns properly.
External images
Here comes another gallery, this time set the id to match 2nd gallery hash in YAML Front Matter.
# YAML Front Matter
gallery2:
- url: https://source.unsplash.com/1TJTpKXwjy0/1400x934
image_path: https://source.unsplash.com/1TJTpKXwjy0/180x120
alt: "Brick Lane Street Art, London"
- url: https://source.unsplash.com/GUi8uIw3JbQ/1400x1166
image_path: https://source.unsplash.com/GUi8uIw3JbQ/200x166
alt: "Model with a Vincent van gogh paint on his face inspire by Sunflowers and van gogh artwork"
- url: https://source.unsplash.com/z_X0PxmBuIQ/1400x934
image_path: https://source.unsplash.com/z_X0PxmBuIQ/180x120
alt: "Catrina´s parade in México City"
- url: https://source.unsplash.com/SYzUF6XcWBY/850x1100
image_path: https://source.unsplash.com/SYzUF6XcWBY/170x220
alt: "A pink flamingo"
- url: https://source.unsplash.com/9alDwYeAdN4/734x1100
image_path: https://source.unsplash.com/9alDwYeAdN4/146x220
alt: "Going Home"
And place it like so:
{% include gallery id="gallery2" caption="This is a second gallery example with images hosted externally." %}
And for giggles one more gallery just to make sure this works.
Note that these images do not have an url. fancybox is not used for this gallery.
# YAML Front Matter
gallery3:
- image_path: /images/post-gallery/unsplash-gallery-image-2-th.jpg
alt: "placeholder image 2"
- image_path: /images/post-gallery/unsplash-gallery-image-4-th.jpg
alt: "placeholder image 4"
{% include gallery id="gallery3" caption="This is a third gallery example with two images **having no url**." %}
Gallery column layout
Gallery column layout can be overrided by setting a layout.
{% include gallery id="gallery4" layout="half" caption="This is a half gallery layout example." %}
