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.