Add dynamic meta images based on page content

ListenNotes.com – founded by a friend of the freeCodeCamp community, Wenbin Fang (@wenbinf) – has dynamic Twitter preview images that show up based on the page contents. We should do something similar with non-/news routes within freeCodeCamp, such as our /learn landing pages, or forum threads.

Here’s an example of what this looks like when linking on Twitter:

The full URL with params: https://www.listennotes.com/search/?q=%22quincy%20larson%22&sort_by_date=1&scope=episode&offset=0&language=Any%20language&len_min=0

I asked Wenbin how he does this, and this was his reply:

It’s a dynamically generated image. There’s an image template, and Python’s pillow library adds text on top of the image template: https://fedingo.com/how-to-add-text-to-image-in-python/

You can change the last word of the url to any texts - https://cdn-images-2.listennotes.com/images/topics/startup/ https://cdn-images-2.listennotes.com/images/topics/something/

You can also use serverless function (eg, aws lambda ) to generate such image and cache the image in s3. This could become a general purpose service to use internally , eg, generating different styled images for different pages on your site. It’s a self contained project, which is ideal for summer intern or new contributor to work on 😃

[DylanDevelops]

I’m not sure if you are still working on this issue @ahmadabdolsaheb, but I found this. This could be something beneficial! Heres a video explaining some of the stuff with it.

[DylanDevelops]

I’m totally willing to help with this when you guys are ready. I could help make the templates and also would love to learn exactly how you guys implement this!