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

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