Add SEO and Social Card Images using Helmet and Netlify DPR functions

[dthyresson]

Add SEO and Social Card Images using Helmet and Netlify DPR functions

See: https://www.netlify.com/blog/2021/04/14/faster-builds-for-large-sites-on-netlify-with-on-demand-builders-now-in-early-access/

TODO - DT to explain.

[lunchbreakdev]

Is this like creating dynamic social cards? I've always wondered how to do that

[dthyresson]

Is this like creating dynamic social cards? I've always wondered how to do that

It is! There are some cool new options now available thanks to DPR functions.

I'll do a write up later today of how I think it could work.

If you want to start thinking about the general shape, design and content and post a PR as a Draft, I can fill in the tech details later today.

• main site
• one per provider
• special case for provider that needs an example

Not too far from:

but with some RedwoodJS logo watermark etc.

I might want to try out https://imagekit.io/ and also Supabase Storage https://supabase.io/blog/2021/03/30/supabase-storage for storing the blanks.

The easy way is create an image per provider - but that's a pain to scale and need a designer to make one per.

Instead think of it like compositing and image with a background and then overlaying a logo and adding text.

See: https://docs.imagekit.io/features/image-transformations/overlay and the other docs

[lunchbreakdev]

Very cool! I can definitely take a look into creating the design for the image. The technical side might be a bit too advanced for me at the moment. I want to learn for a few projects I'm working on, so I'm excited to see how this gets executed.

[dthyresson]

@morganmspencer I am read to start this up again using Netlify's new DPR functions.

Can you post in here some image mockups? Or at least some of the assets you might use to compose the image.

I have Imagekit setup to store the images (though may switch to Supabase) and Imagekit to do the transforms, but need to figure out a way for you to easily upload those image assets to make it easier to implement.

Or - I guess you could create your own free Imagekit account. That might be best.

I'll post a PR with a stubbed out DPR function that returns an image and perhaps you can take it from there.

Thanks!

[lunchbreakdev]

@dthyresson I can post some mockups here in a bit

[dthyresson]

I can post some mockups here in a bit

Thanks! If you do, could you also attach the individual image components -- if you are overlaying some (like a watermark logo) or other elements.

See: Chained Transformations -> https://docs.imagekit.io/features/image-transformations/chained-transformations Overlays and Text Overlays (Supported fonts here: https://docs.imagekit.io/features/image-transformations/supported-text-font-list)

[lunchbreakdev]

Is it possible to have a set background image that has the RW logo already on it and then place the variable text over it?

Also, would we be able to dynamically add the provider logo as well? Or is it just text-based changes?

[dthyresson]

Is it possible to have a set background image that has the RW logo already on it and then place the variable text over it?

Both options are possible:

• base background and then a logo "watermark" overlay
• base background with logo already there

Also, would we be able to dynamically add the provider logo as well? Or is it just text-based changes?

• same here, we could have 8 flavors of bg images with both RW + Provider baked in (and pick the image via some naming convention), or
• base with the provider as an overlay

You can overlay text or images

[dthyresson]

See: https://docs.imagekit.io/features/image-transformations/chained-transformations#example for a logo image overlay

[lunchbreakdev]

Here are some starting points to initiate a discussion:

General Provider

Provider with Help Wanted

[dthyresson]

So, a simple way to implement this w/out ImageKit is just to make all flavor variants and then convert to a base64 image and have DPR make that or even Helmet just include the image ... but that's no fun ;)

@morganmspencer

Can you add here:

• the two background cards (w/out help and w/)

I'll add these to ImageKit as well as the logos.

Then can try some compositing w/ the centered logo and even a www address text overlay.

Then I can DM you the ImageKit secret api tokens to test.

[lunchbreakdev]

Blank cards:

[dthyresson]

Thanks @morganmspencer . I've uploaded the assets to Supabase storage. I'll work in morning to stub out the DPR using the storage source and then get you the ImageKit info.