Social Media Image Generator

Want to create a simple image for sharing a blog post. I created a little web app for this this evening.

Create an image to use on social media

I often write short blog posts that don't need an image. But when sharing on social media, I'd like to have an image go with it, for better engagement.

My simple solution is to just create an image each time, but that's a bit boring so sometimes I don't bother. Today I got thinking, why not create a small web app that I can type a simple sentence into and use some JavaScript to turn that text into an image. 

Then I thought, perhaps others would like to use it, so I'll make it available publicly. 

Then I thought, not everyone will want to use the same colours that I have chosen, so I made a color picker to go with it.

Then I thought, what if someone wants to use the same colour as last time, but can't remember exactly what color that was, so I added a "remember my colour" checkbox to save the colour to localStorage.

The I remembered that if you create a color picker, it can only store colors in HEX values, but I needed HSL. So I copied some code from 30 Seconds of Code, thanks folks!

It's called the Social Media Image Generator, it does exactly what it says on the tin.

So that's it, it took about 1.5 hours, but will automate a boring task that I don't enjoy (and I DID enjoy creating this, so that's a win!!!).

Filed Under:

  1. HTML
  2. CSS
  3. JavaScript