Upgrading the SeshSource IG Promo Generator

We sat down recently with owner of SeshSource and discussed new improvements he was looking to implement. The problem? He takes screenshots on his phone of the event page to post on Instagram, and on mobile the event information disappears. Easy fix right? Swap some CSS styles and we're good to go.

After the chat though, I couldn't help but let my mind explore different solutions. We previously created a Instagram promo ad generator for the same client (you can find the tutorial here). So I asked myself, why not make a button on the event page that sends the data over to this generator, and it pumps out the promo ad without filling out forms.

Getting it done

The execution was incredibly simple. We'd create a form on the single event page, adding it to the current Wordpress theme. The generator already operates by using POST values, so all we have to do is match up input names. With a POST form pointing to the generator, a few hidden inputs pumped with pre-filled PHP generated values, and single "submit" style button - we're good to go:

And just like that, we have ourselves a quick button that generates a graphic like so:

But we said improvements

The generator prints out an image that's actually an HTML5 canvas, created by a the HTML2Canvas JS library. You can right click, or tap and hold to save with no issue. But do we ever settle for something standard? How else could we improve this UX?

Auto-downloading. When the user loads the page, the image automagically downloads if their browser and OS allow it. While it won't work on most mobile or tablet devices, it's a nice feature desktop users might appreciate.

We convert the canvas to an image, using the dataToURL function. Then we create a link that leads to the image URL. Drop the image into the link. Add it to the document body. And then the magic happens: we force Javascript to click the link, initiating the download. We also include a title attribute to generate the filename (so you don't get that funky base64 code).

More to go

It must be the curse of being an engineer, but each time I look at the code, I think of different upgrades or ways to refactor. I'd love to add share buttons in the future underneath for Facebook, Twitter, and email. This thing definitely needs a way to save images longer term, to allow users to share a link to the image.

I'm happy with what we've offered the client, and that we were able to go above and beyond. We like to create make website management as accessible and effortless as possible for clients. If I can create a tool, plugin, or integration that makes their life easier -- we've done our duty.

Stay regular!
Oscar