What's the best approach to building a photo gallery in Craft?

Question

I'm thinking about the best way to implement a photo gallery in Craft.

A channel section with an assets field should do the job, but would like to hear how other devs have approached this problem.

Answer 1

Craft is so flexible there are many ways to do most things, it is up to you to determine what is best for your needs.

As far as photo galleries go, there are two main ways that I normally approach this:

Method 1:

Define asset fields for the images, where you define the photo title and description, etc. These fields are accessed by double clicking the image, which will pull up a form with the fields you have defined. This method associates these fields directly to the assets themselves, and the data will be available site-wide, not just in the gallery.

While this is simplest to code, it does have the drawback that clients will often skip over the asset fields and add images to the gallery that have not been assigned all of the data needed for the gallery.

Method 2:

Use a matrix block to define the gallery and create matrix fields for the assets and associated fields. This is much easier for clients as they can see each bit of data they need to enter, and you can even make the fields required so they do not avoid entering them.

While much simpler for the client, this method does has several drawbacks. First, the data entered into the matrix block will only be available in the context of the gallery and not anywhere else in the site. Second, a gallery built from matrix blocks can become quite lengthy in the back end and take up a lot of space on the edit page. And lastly, this method is a bit more complex to code than just a simple assets loop. Once you get the hang of it it is no biggy, but you will need to work through nested matrix/asset loops the first time.

Here is the code I use for a very simple matrix based gallery w/o titles or descriptions, best of luck :)

{% set vertParams = {
  height: 800,
  mode: 'crop',
  position: 'center-center',
}
%}
{% set horzParams = {
  width: 800,
  mode: 'crop',
  position: 'center-center',
}
%}
{% set thumbParams = {
  width: 120,
  height: 120,
  mode: 'crop',
  position: 'center-center',
}
%}
{% set images = contentBlock.galleryImages %}
{% if images | length %}
  {% if contentBlock.galleryTitle | length %}
   <h3>{{ contentBlock.galleryTitle }}</h3>
  {% endif %}
  <ul class="gallery">
    {% for image in images %}
    <li>
      {% if image.getHeight() > image.getWidth() %}
        <a href="{{ image.getURL(vertParams) }}"><img src="{{ image.getURL(thumbParams) }}" alt="image"></a>
      {% else %}
        <a href="{{ image.getURL(horzParams) }}"><img src="{{ image.getURL(thumbParams) }}" alt="image"></a>
      {% endif %}
    </li>
    {% endfor %}
  </ul>
{% endif %}

Answer 2

It depends heavily on what kind of gallery you're trying to create. For a basic gallery (with maybe meta data) what you describe would be the best way. Pagination would be available for showing grids of images at a time.

If you want some kind of album-style organization you can either make the section as a Structure with Album and Photo entry types (photos would be the children of albums), or you can simply create a category group called Albums and filter that way.

Either way is pretty easy to implement. Using a Structure section would make it even easier to include a photo album in a different entry. For example, you could have a blog on the site and attach an album to it for people to preview in the post.

Answer 3

Creating a channel with a matrix field allows you to have more control over the content.

For example, I typically use the following:

• photograph: matrix field

  • image: asset field
  • title: photograph title
  • caption: plain text
  • description: rich text