hacks-guide-minimal-mistake.../test/_posts/2010-09-09-post-gallery.md
Michael Rose 833ab3933d Add support to gallery helper for defining column layout
e.g. `{% include gallery id="gallery" layout="half" caption="2 column gallery caption" %}

Fixes #1821
2018-09-10 10:24:24 -04:00

5.5 KiB

title categories tags gallery gallery2 gallery3
Post: Gallery
Post Formats
gallery
Post Formats
tiled
url image_path alt title
/assets/images/unsplash-gallery-image-1.jpg /assets/images/unsplash-gallery-image-1-th.jpg placeholder image 1 Image 1 title caption
url image_path alt title
/assets/images/unsplash-gallery-image-2.jpg /assets/images/unsplash-gallery-image-2-th.jpg placeholder image 2 Image 2 title caption
url image_path alt title
/assets/images/unsplash-gallery-image-3.jpg /assets/images/unsplash-gallery-image-3-th.jpg placeholder image 3 Image 3 title caption
url image_path alt title
/assets/images/unsplash-gallery-image-1.jpg /assets/images/unsplash-gallery-image-1-th.jpg placeholder image 4 Image 4 title caption
url image_path alt title
/assets/images/unsplash-gallery-image-2.jpg /assets/images/unsplash-gallery-image-2-th.jpg placeholder image 5 Image 5 title caption
url image_path alt title
/assets/images/unsplash-gallery-image-3.jpg /assets/images/unsplash-gallery-image-3-th.jpg placeholder image 6 Image 6 title caption
url image_path alt title
/assets/images/unsplash-gallery-image-1.jpg /assets/images/unsplash-gallery-image-1-th.jpg placeholder image 7 Image 7 title caption
url image_path alt title
/assets/images/unsplash-gallery-image-2.jpg /assets/images/unsplash-gallery-image-2-th.jpg placeholder image 8 Image 8 title caption
url image_path alt title
/assets/images/unsplash-gallery-image-3.jpg /assets/images/unsplash-gallery-image-3-th.jpg placeholder image 9 Image 9 title caption
url image_path alt title
/assets/images/unsplash-gallery-image-1.jpg /assets/images/unsplash-gallery-image-1-th.jpg placeholder image 10 Image 10 title caption
url image_path alt title
/assets/images/unsplash-gallery-image-2.jpg /assets/images/unsplash-gallery-image-2-th.jpg placeholder image 11 Image 11 title caption
url image_path alt title
/assets/images/unsplash-gallery-image-3.jpg /assets/images/unsplash-gallery-image-3-th.jpg placeholder image 12 Image 12 title caption
url image_path alt
https://flic.kr/p/8a6Ven https://farm2.staticflickr.com/1272/4697500467_8294dac099_q.jpg Black and grays with a hint of green
url image_path alt
https://flic.kr/p/8a738X https://farm5.staticflickr.com/4029/4697523701_249e93ba23_q.jpg Made for open text placement
url image_path alt
https://flic.kr/p/8a6VXP https://farm5.staticflickr.com/4046/4697502929_72c612c636_q.jpg Fog in the trees
image_path alt
/assets/images/unsplash-gallery-image-2-th.jpg placeholder image 2
image_path alt
/assets/images/unsplash-gallery-image-4-th.jpg placeholder image 4

These are gallery tests for image wrapped in <figure> elements.

To place a gallery add the necessary YAML Front Matter:

gallery:
  - url: /assets/images/unsplash-gallery-image-1.jpg
    image_path: /assets/images/unsplash-gallery-image-1-th.jpg
    alt: "placeholder image 1"
    title: "Image 1 title caption"
  - url: /assets/images/unsplash-gallery-image-2.jpg
    image_path: /assets/images/unsplash-gallery-image-2-th.jpg
    alt: "placeholder image 2"
    title: "Image 2 title caption"
  - url: /assets/images/unsplash-gallery-image-3.jpg
    image_path: /assets/images/unsplash-gallery-image-3-th.jpg
    alt: "placeholder image 3"
    title: "Image 3 title caption"
  - url: /assets/images/unsplash-gallery-image-4.jpg
    image_path: /assets/images/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.

{% raw %}{% include gallery caption="This is a sample gallery with **Markdown support**." %}{% endraw %}

{% 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.

Here comes another gallery, this time set the id to match 2nd gallery hash in YAML Front Matter.

gallery2:
  - url: https://flic.kr/p/8a6Ven
    image_path: https://farm2.staticflickr.com/1272/4697500467_8294dac099_q.jpg
    alt: "Black and grays with a hint of green"
  - url: https://flic.kr/p/8a738X
    image_path: https://farm5.staticflickr.com/4029/4697523701_249e93ba23_q.jpg
    alt: "Made for open text placement"
  - url: https://flic.kr/p/8a6VXP
    image_path: https://farm5.staticflickr.com/4046/4697502929_72c612c636_q.jpg
    alt: "Fog in the trees"

And place it like so:

{% raw %}{% include gallery id="gallery2" caption="This is a second gallery example with images hosted externally." %}{% endraw %}

{% 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. To fill page content container add class="full".

{% include gallery id="gallery3" class="full" caption="This is a third gallery example with two images and fills the entire content container." %}

Gallery column layout can be overrided by setting a layout.

{% raw %}{% include gallery id="gallery" layout="half" caption="This is a half gallery layout example." %}{% endraw %}

{% include gallery id="gallery" layout="half" caption="This is a half gallery layout example." %}