Add photo gallery to theme

[jocelynpender]

I haven't investigated this at all... but I'm using your theme and would love to add a photo gallery to a page. I found some extensions mentioned here: https://talk.jekyllrb.com/t/jekyll-photo-gallery/1499 Is this possible?

[peterdesmet]

Thanks for the suggestion! I restrict the plugins in Petridish to those that can run on GitHub Pages (see this list) and jekyll-photo-gallery is unfortunately not one of them.

Luckily, you can make a photo gallery page with a layout. I'm not going to make it part of petridish itself, but you can create it for your own site specifically like this:

1. Download the archive layout
2. Rename it to photos.html
3. Place it in your repository at _layouts/photos.html This is how you control how the page design looks
4. Create a markdown page for your gallery page, e.g. photos.md. This is where the (non-photo) content of the page lives
5. In the frontmatter of the page add the following so the page knows you're using the photos layout:

layout: photos

6. Create a new file _data/photos.yml file (can also be a csv or json file) This is where the photo information lives
7. That file should have content (here shown for 3 photos, where only the first two have metadata) like so:

- img: https://images.unsplash.com/photo-1550089479-fe0e48e7d788?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjR8fGJpcmR8ZW58MHwwfDB8fA%3D%3D&auto=format&fit=crop&w=1200&h=600&q=80
  description: Blue tit
  by: Krzysztof Niewolny
  href: https://unsplash.com/photos/pTfcnk9WZHA
- img: https://images.unsplash.com/photo-1507477338202-487281e6c27e?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTkwfHxiaXJkc3xlbnwwfDB8MHx8&auto=format&fit=crop&crop=top&w=1200&h=600&q=80
  description: Tree sparrow
  by: Mathew Schwartz
  href: https://unsplash.com/photos/5iFZBM7qgWc
- img: https://images.unsplash.com/photo-1609456878306-592aa2bc0eed?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NTJ8fGJpcmRzfGVufDB8MHwwfHw%3D&auto=format&fit=crop&crop=top&w=1200&h=600&q=80

8. The most complex part is adapting _layouts/photos.html (which currently is copied from archive.html) to something that will show the photos. Here's a quick attempt (not tested much) that mimics the blog post "cards":

---
layout: base
description: Template for photo gallery page.
---

{% assign photos = site.data.photos %}

<div class="row">
  <div class="col">

    {{ content }}

  </div>
</div>

<div class="row cards">
  {% for item in photos %}
    <div class="col-md-6 col-lg-4">
      <div class="card">
        <img class="card-img-top" src="{{ item.img }}" alt="{{ item.description }}">
        <div class="card-body">
          {% if item.description %}
            <p class="card-text">
              {{ item.description }}
            </p>
          {% endif %}
          {% if item.by %}
            <p class="card-text text-muted small">
              {% if item.href %}
                Photo by <a href="{{ item.href }}">{{ item.by }}</a>
              {% else %}
                Photo by {{ item.by }}
              {% endif %}
            </p>
          {% endif %}
        </div>
      </div>
    </div>
  {% endfor %}
</div>

If all works, the page looks like this:

Note that you are in control of _data/photos.yml and _layouts/photos.html so you can adapt both as you want.

[jocelynpender]

Thank you for these detailed instructions! Worked like a charm!!

[peterdesmet]

Excellent!