Displaying an Instagram feed with Gatsby [Part 2]

Published July 29, 2019

Introduction

Let's style the basic Instagram display that we created in Part 1!

• Part 1: Load posts from Instagram into a gallery in Gatsby
• Part 2 (this post): Style the gallery widget
• Part 3: Trigger a build of your site after posting to Instagram

Pre-requisites

For Part 2 of the tutorial, you'll need:

• A grid system that works with your Gatsby starter, or
• Some knowledge of CSS Grid

Putting posts into a grid

Here's a refresher of the Instagram component's JSX that we wrote in Part 1 to load up our posts into a basic container.

// Instagram.js
import React from 'react';
import { graphql, StaticQuery } from 'gatsby';
import Image from 'gatsby-image';

const Instagram = () => (
  <StaticQuery
    query={graphql`
      query InstagramPosts {
        allInstagramContent(limit: 12) {
          edges {
            node {
              link
              localImage {
                childImageSharp {
                  fluid(maxHeight: 500, maxWidth: 500 quality: 50) {
                    ...GatsbyImageSharpFluid_withWebp_tracedSVG
                  }
                }
              }
              images {
                standard_resolution {
                  width
                  height
                  url
                }
                low_resolution {
                  url
                }
              }
            }
          }
        }
      }
    `}
    render={(data) => (
      <div>
        {
          data.allInstagramContent.edges.map((item, i) => (
            item.node.localImage ? (
              <div key={i}>
                <Image
                  fluid={item.node.localImage.childImageSharp.fluid}
                />
              </div>
            ) : (<div></div>)
          ))
        }
      </div>
    )}
  />
);

export default Instagram;

Before we dive into the grid layout, let's add an anchor tag around each post thumbnail that will take the user to the full post on Instagram.

// Instagram.js
[...]

const Instagram = () => (
  [...]
    render={(data) => (
      <div>
        {
          data.allInstagramContent.edges.map((item, i) => (
            item.node.localImage ? (
              <div key={i}>
                <a
                  href={item.node.link}
                  target='_blank'
                  rel='noopener'
                >
                  <Image
                    fluid={item.node.localImage.childImageSharp.fluid}
                  />
                </a>
              </div>
            ) : (<div></div>)
          ))
        }
      </div>
    )}
  />
);

Great! Next, you can utilize whatever styling approach is being used in your Gatsby starter.

If my Gatsby starter didn't have an out-of-the-box layout solution, then CSS Grid would be my technique of choice, and I'd place the code within my component's inline styles.

// Instagram.js
[...]

const Instagram = () => (
  [...]
    render={(data) => (
      <div style={{
        marginBottom: '1rem',
        display: 'grid',
        gridTemplateColumns: 'repeat(4, 1fr)',
      }}>
        [...]
      </div>
    )}
  />
);

The resulting display layout would show the post thumbnails in a grid with 4 thumbnails per row.

Next steps

Alright! We now have images loading into our site. But what happens when we post new content on Instagram? 🤔

Until your site gets built again, new posts aren't going to be fetched from Instagram, so new post thumbnails aren't going to appear in your gallery.

In the next part of this tutorial, I'll share some methods for triggering a build after you've posted something new.

Related posts

• Displaying an Instagram feed with Gatsby [Part 1]
• Displaying an Instagram feed with Gatsby [Part 3]