We live in an age where any person - with or without design experience - is capable of creating high quality designs with the assistance of tools and resources. There are plenty of phone apps out there that create graphics, and now services like Crello exist to cater to the more hands-on creators. But what do you do for a client that doesn’t want to play around with a bunch of apps to achieve graphics that don’t even match the brand’s style guide properly? You make your own graphic generator with templates custom tailored to the clients brand.
We often provide clients with graphic assets for social media, it’s a normal part of a branding package. But what does a client do when they have to make a quick Instagram announcement? If they’ve got the time and tech savvy, they use the apps I mentioned above. More than likely though? A screenshot of a notepad document on their phone. It looks unprofessional and doesn’t convey as much brand confidence as a properly styled graphic.
That’s where our graphic generator comes into play.
Teach them to fish, or design a fishing machine
Before we even get coding, we need a design. Define a goal for your graphic - is it an announcement or a product feature? In my case, I wanted to created a graphic to feature events on listed on the clients website - Sesh Source. We had already created a unique style to display events on the site, so we grabbed the CSS from this and were able to essentially skip the design process. Our website’s template used a few data points: the event name, event time and date, location, and a featured image. Once we defined what the data would be, we could develop the input for it.
This is where things get pretty simple, if you know a little bit of HTML and PHP. We create a simple form with an input for each dynamic element we want to include. In our case, it’s the event name, time, date, location, and a featured image
Grabbing the Data
When the user presses submit, it’ll reload the same page (action=“#” in the form element). So let’s execute some PHP code before the form. We’ll check if the form was submitted, if it wasn’t, we’ll just print out the form. If the form was submitted, we want to grab all the data.
Please note: The code isn’t perfect for every kind of scenario. Since our client planned on using the application exclusively, we didn’t have to plan for other use cases. I’d recommend a cron job to delete the tmp folder on a regular basis, or if you’ve got time to spare, you can build a small database to keep track of the images and session IDs.
And with that, we have all of the data we need. Let’s do something with it!
Display the data
Printing the data will depend on what your style looks like. Regardless of what CSS you use, make sure it’s all inline! Another caveat of the JS screenshot library we’re using, we want to ensure all styles are locally serviced (it gets finicky with remotely culled content).
So just print those variables any way you see fit before the end of the submit check. Here’s my code, following the Sesh Source style guide:
Please note: Regardless of what CSS you use, make sure it’s all inline! Another caveat of the JS screenshot library we’re using, we want to ensure all styles are locally serviced (it gets finicky with remotely culled content).
With that, you have a form you can use to send data to a pretty, CSS-styled HTML container. We even added a watermark on the bottom with a URL to Sesh Source to reinforce branding.
You can stop here if you’re satisfied with taking a screenshot manually on your phone or computer to get a JPG/PNG version. But why spend the extra 2 seconds struggling to hit menu and lock on your iPhone, when you can just right click and save?
Originally I was looking for a function to convert HTML to an image. I found an app that converts HTML to a PDF, and even some Image Magick based libraries, but each one ended up mucking up the styling of the elements. The PDF one in particular made my modern HTML5/CSS3 look like a Word doc out of ’08.
That’s when I discovered html2canvas.js. With 3 simple lines of code I was capable of converting my DIV to a JPG:
We tell html2canvas to grab our Div with the ID “instagram”, output the image with appendChild, and then make the HTML version disappear by selecting the #instagram Div and altering the CSS display to none. You can find more documentation on html2canvas on their website.
Where to go from here
So we were able to develop an input, pump the data into a pretty HTML graphic, and convert it with JS to a JPG. There’s a lot of applications you can utilize a module like this, and numerous ways to improve this basic script (multiple templates, better form security, or even a better deletion system).
I hope this little experiment of ours inspires you to innovate and solve more issues. It’s an excellent tool to empower clients (and yourself!), and definitely made content creation, marketing, and scheduling much simpler for everyone.
You can find the complete example code on our Github here. And if you’re interested in a custom built application, please contact us here for more info.