Announcement

GatsbyJS announces the 2021 Gatsby Agency of the Year: Read Announcement

Chat
Fintech

Using Gatsby and Contentful to Backfill 140+ Social Media Cards for iTrustCapital at Build Time

Manual processes are bottlenecks—especially for iTrustCapital, which recently migrated from a monolithic CMS to a headless CMS. See how we leveraged Gatsby and Contentful to auto-generate over 100+ assets.

140+

social cards backfilled

4

hour implementation

itrustcapital-logo
Since:
2022
Product Team Size:
2+
Solutions:
Web Development, Marketing Ops
Technologies:
Contentful, Gatsby.js
Talk to sales
Brought to you by

Flexible product teams to start, run and grow website operations.

Who is iTrustCapital?

iTrustCapital is the leading digital asset IRA trading platform that allows clients to directly buy and sell cryptocurrencies and physical gold in real-time through their retirement accounts.

Since March 2020, iTrustCapital increased its employee count by 623%, which now stands at over 200+ employees across the globe. iTrustCapital is valued at $1.3B, led by a $125M Series A secured at the start of 2022.

Problem: Backfill Over 140+ Featured Images for iTrustCapital’s Press Release Library

After migrating from WordPress to Contentful, iTrustCapital was presented with a challenge: although the content for 140+ press releases hosted on their cms/press subdomain was successfully migrated to Contentful, each post was missing its featured social share image.

caption: Social cards, also known as social previews, are displayed when you or someone else shares the content.

Also known as social card assets, they existed on the previous content backend but the file sizes were too big and needed to be compatible with Contentful and slotted in for each press release post that was migrated to the new solution.

iTrustCapital wished to resolve this compatibility issue in under thirty days to ensure each press release had its associated featured image for both legal reasons and speed. iTrustCapital had two choices:

  1. Manually input each featured image on Contentful’s backend.

  2. Pay thousands of dollars for a third-party API.

After expressing severe discomfort with either solution, our team of developers went straight to the drawing board to find an automated solution that could be triggered using React at every build to generate a social card that matched the constraints set by LinkedIn, Twitter, and Facebook.

Solution: A React Component that Automatically Backfilled Images

Because iTrustCapital’s website is deployed on Gatsby and Contentful, we suggested building a custom React component to handle the backfilling for each press release published on the subdomain “/cms/pressrelease.”

The challenge was to build a React component that could autofill the required information and fields needed to meet the criteria of a featured image for each social card and at the same time make them compatible with all social media platforms.

iTrustCapital’s social cards contain the following information—iTrustCapital’s logo, publisher logo, the title of the post, type of post, an icon for each post type, and background color of the social card.

To automate backfilling each of the above assets, our development team built a React component specifically for these social cards to ensure iTrustCapital’s team didn’t have to manually update the featured image field or create a new social card design for every instance.

Triggered at Build Time

Instead, the React component is always triggered at build time—that is, the component is triggered each time a new record is created, updated, or deleted under the cms/press subdomain. 

After a new piece of content is edited or published and the React component is triggered, our codebase antenna intelligently detects that it knows that it needs to generate a featured image for that press release or post. 

And it will set that image that is completely compatible with every single social media network and its social card constraints. The benefit is that content editors were not required to go into Contentful and upload each of these images for all existing press releases.

Upon each site build, the React component checks for any new content under the subdomain “/cms/release” and either:

  1. Resumes build if no new blog posts under the subdomain “/cms/press” is detected.

  2. Creates a component based on the data, takes a picture of the new information, and sends it to the codebase to create the social cards required to fill in the featured image field.

Automatic Site-Wide Updates

Another key callout that the React component can perform is updating every instance that a logo is being used.

For example, the Yahoo logo displayed above could be used on multiple articles/releases across iTrustCapital’s website. Instead of having someone on iTrustCapital manually update the images in each instance, the React component automatically does it for them.

Updating the Yahoo image with another variation or logo on the company record in the Contentful backend will trigger a refresh on every article that references the record.

Increased Efficiency

Not only did this solution save iTrustCapital time, but it also gave them the ability to continuously update their social cards based on their needs without using additional resources—it’s all done by the computer.

Results: A Manual Process Now Handled by Gatsby & Contentful

From 30 Days to Four Hours

A typical backfill in development can take roughly thirty days to complete. The React component reduced the expected time to about four hours, which was the pressing factor for iTrustCapital’s team.

What’s more, outsourcing a development agency or contractors who specialize in backfilling is costly. iTrustCapital was also not in a position to involve their product engineers to handle the backfill of over 100+ posts. 

Implementing the custom React component to iTrustCapital’s Gatsby/Contentful application not only saved them on engineering resources, but now they don’t need to worry about maintaining it since it’s their code. 

Since the React component is baked into iTrustCapital’s web application, the application is only leveraging Gatsby to make the computer do all the work and not anyone on the iTrustCapital team.

Brought to you by

Did you find this article helpful?

We provide flexible product teams to high-growth technology companies to help them start, run and grow website operations.

Talk to sales