16

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.

Improve this question
1
  • I've tried a few different methods but I believe your suggested method is the best all-round option. – Steve Abraham Jun 12 '14 at 15:06
10

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 %}
Improve this answer
3
  • I agree that Method 1 is the ideal, but my experience with Assets in EE is that users always forget to double click and add a caption/description. Making the field required only works if they double click and try to save without entering, if they just close the box it doesn't enforce the required. Perhaps this should be a separate question? – Paul Frost Jun 13 '14 at 10:17
  • 1
    I'm not sure that making the fields required on asset upload would work that much better. There is just something about client being able to see what they must do in a matrix block that causes it to appear to be less work to them. If on the other hand, if assets with required fields appeared like matrix blocks, having all fields exposed w/o the need for double clicking, then clients might not mind the same amount of 'work'. – Steve Adams Jun 13 '14 at 11:45
  • My thinking was that the assets upload could have a matrix like interface, or automatically opened the popup to be completed, and not allow you to progress until you had entered a caption or whatever. The matrix method is probably fine if you don't tend to re-use images in other entries. – Paul Frost Jun 13 '14 at 16:04
9

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.

Improve this answer
6

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
Improve this answer
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.