Templates

Responsive Galleries with Foundation

Wanna create a responsive gallery to showcase your portfolio, recent photos or images? It's quite easy thanks to Foundation and Clearing Lightbox.

You just need to choose a template like the page- or page-fullwidth-template and then just use {% include gallery %}.

  • Great images by Unsplash.com
  • Great images by Unsplash.com
  • Great images by Unsplash.com
  • Great images by Unsplash.com
  • Great images by Unsplash.com
  • Great images by Unsplash.com
  • Great images by Unsplash.com
  • Great images by Unsplash.com

{% include gallery %} lets you easily embed a gallery into your post. To use the gallery-include…

Step 1

  1. Make two images: a thumbnail and a big image.
  2. Name the thumbnail gallery-image-thumb.jpg and…
  3. …name the big gallery-image.jpg.
  4. Place them in the images-folder.

Step 2

Define the big version in frontmatter,

gallery:
    - image_url: gallery-image.jpg

If you like captions, give each image a caption:

gallery:
    - image_url: gallery-image.jpg
       caption: Starting Page with huge One Logo

Step 3

Add the include whereever you want in your content with {% include gallery %}.

Have a look at this example-entry. And have a look into the images-folder. :)

Other Post Formats

DESIGN
post format

Archive