Image Gallery Powered By Contentful
Tags: contentful
Published: 2020-10-23 20:01:36

---
title: Image Gallery Powered By Contentful
published: true
date: 2020-20-08 05:00:00 UTC
description: In this post, we will cover one of our favorite features in Contentful, the Images API. We will go over some of it's coolest features, and how we leveraged it to build a custom image gallery.
tags: #contentful
canonical_url: https://davidboland.site/blog/image-gallery-powered-by-contentful
cover_image: https://images.ctfassets.net/advboymm7uww/5wy2NeBSqycyrDzlZhhYVm/0b066bc31b461f471d2c940372faa0b0/d3949d57-82a1-4328-a2ca-157ea4f3840e-nansenpluscontentful-min-min.png
---

If you've worked with Contentful before, you are probably familiar with the power of their Images API. If you haven't, it's worth checking out.

While Contentful itself has a lot of great features, how it manages images is one of the coolest. First of all, all images (up to a certain size) are compressed once they are uploaded to Contentful. Secondly, like all the other content on Contentful, it leverages its content delivery network (CDN) for quick access. Third, accessing those images via their API provides lots of features. Some of those include:

- Specifying Image Format
- Resizing and Cropping
- Changing Quality
- Specifying Focus Areas

All these can be done on a per request. Not only that, once you make that request, the updated image is stored in their CDN for future requests. 

Leveraging all these features can help you create a really awesome image gallery. We did just that for the <a href="https://uspoloassnglobal.com/collections/spring-2020" title="U.S. Polo Gallery Link" rel="noreferrer" target="_blank">U.S. Polo Association</a>, and we wanted to share some of the features we leveraged from Contentful to do it. You can checkout the full implementation in <a href="https://gist.github.com/debpu06/8398e588d34409fd241a7e9ad4742e44" title="github gist" rel="noreferrer" target="_blank">gallery.js</a>

## Implementation
The first section of our code is the setup. We grab the container element for rendering our gallery, we grab all image URLs that we added to the page in .Collection-item, and we get the resolution of the device the gallery will be rendering on.

``` javascript
const galleryContainer = el
const galleryItems = [].slice.call(galleryContainer.querySelectorAll('.Collection-item'))
const resolution = window.devicePixelRatio
```

Next, we build the call to Contentful's Images API. Here we need to do some basic calculations. Based on the resolution we got above, we calculate the needed height and width of the image. First, detect the size of each grid cell as rendered on the client side browser. Then, we multiply the height and width of each cell by the users resolution. By specifying the exact size required for each image, we maximize our performance by avoiding loading any unnecessarily large images.

``` javascript
let entry = lazyImage
let imageWidth = Math.round(entry.offsetWidth * resolution)
let imageHeight = Math.round(entry.offsetHeight * resolution)
let imagePath = `${entry.dataset.img}?fit=fill&w=${imageWidth}&h=${imageHeight}&f=faces&q=75`
let imageAlt = entry.dataset.alt
let galleryImage = document.createElement('img')
```

We add this to the URL using the w & h query string parameters. We also add one for q, which specifies the quality. We put this at 75, meaning we want the image at 75% of its original quality. This could vary depending on implementation, but the images we worked with for U.S. Polo were all very high quality. So we were able to request a lower quality image without it affecting the end result.

One thing you will notice for our query is that we also added f=faces. This is leveraging the "Specifying Focus Area" feature I mentioned above. When you add this, the Images API will use machine learning to focus on any faces it detects in the image. This is perfect for our situation where we are leveraging images that all feature people in them.

The last feature to call out is how we update our gallery as the screen size changes. 

``` javascript

// Reinit the photos when the media query changes from/to mobile, tablet, desktop.
// BREAKPOINT.MEDIUM.MIN === 769
window.matchMedia(`(min-width: ${BREAKPOINT.MEDIUM.MIN}px)`).onchange = () => {
    init(document.querySelector('[data-ondemand="gallery"]'), true)
}

    // BREAKPOINT.LARGE.MIN === 1440
window.matchMedia(`(min-width: ${BREAKPOINT.LARGE.MIN}px)`).onchange = () => {
    init(document.querySelector('[data-ondemand="gallery"]'), true)
}
```

Because our images are lazy-loaded, the screen size may change before the user gets to a point on the page where all images are loaded. If that's the case, we will want to update the image requests to work with the new screen size. This will re-call our gallery code, and make the API calls with the updated height and width.

## Final Thoughts
And that's it! It's pretty basic, but that's just a testament to the functionality of Contentful's Images API. Whether you're new to Contentful or a seasoned veteran, I hope you found this tutorial interesting. 

And I hope you check out our implementation on <a href="https://uspoloassnglobal.com/collections/spring-2020" title="U.S. Polo Gallery" rel="noreferrer" target="_blank">U.S. Polo Association</a>. If you have any questions regarding the <a href="https://gist.github.com/debpu06/8398e588d34409fd241a7e9ad4742e44" title="github gist link" rel="noreferrer" target="_blank">gallery.js code</a>, or questions about Contentful in general, feel free to reach out to us on <a href="https://twitter.com/thisisnansen" title="github gist link" rel="noreferrer" target="_blank">Twitter</a>.