Image as a Link with Contentful and Gatsby JS

#gatsby #contentful #tutorial

As rich as the Rich Text functionality of Contentful might be, it doesn't include a simple way to create clickable images, i.e images embedded in a HTML link element. Here is a quick workaround with a Gatsby JS frontent.

Create a custom model in Contentful

We are creating a new custom model called ImageWithLink that contains 3 simple fields:

title
image (type Media)
url (type Short text)

You can then use your ImageWithLink model in any Rich Text contents or as part of another model definition.

Integrate with GatsbyJS

I will only emphasize how to generate the custom image with link element when the ImageWithLink model is provided inside a Rich Text field. You need to make sure your GraphQL requests are working correctly and that you imported all packages/functions needed to process Rich Text elements in Gatsby ;) I chose to use a fluid image in my example.

[BLOCKS.EMBEDDED_ENTRY]: node => {
    const {__typename} = node.data.target
    const target = node.data.target

    return <a href={target.url}><img src={target.image.fluid.src} /></a>
}

I hope this will help some of you !
Best ❤️