Auto Screenshots & New Project Site

screenshot of the project page

Before Mark left us for the green dusty start-up fields of Austin TX we had a conversation about creating a better, faster way to do our examples page. The idea of having a resource like this is always popular but people don’t add content.1 My current belief is that it’s because it’s a hassle and despite good intentions people just don’t do it.

After seeing what Mark did to associate users with their blogs in the mother blog plugin, I figured he could also automatically pull the theme, plugins, and admin email of any blog on our system based on the URL . . . and indeed he could. This theme requires Advanced Custom Fields and the Benson plugin to tie in the Angular stuff.

The one thing he wasn’t able to do was to auto-generate the screenshot from the URL. I’ve looked into that in the past and done it in a variety of ways but none of them were quite satisfactory. I didn’t really want to end up reliant on a 3rd party system and then Mark sent me http2pic yesterday. So now I just needed to install it and get it working. That led to a bit of an adventure for me.

There are directions on the github page but they’re written for someone who is a bit more familiar with doing stuff like this than I am. Step one was to install wkhtmltopdf. It turned out the server I was on was running Centos 6.2 I did find some good directions for that. I learned a chunk of things along the way.

One point was that Centos uses the user apache instead of www-data.

I also had to add my normal user to the sudoers list for my server. Easy stuff if you know how . . . and the Internet both abides and provides.

Somehow I managed to get the wkhtmltopdf portion in the right place in the directory structure but put wkhtmltoimage somewhere else. That resulted in a good bit of troubleshooting. This error made it apparent that I didn’t have the right directory permissions and I proved it by running the same commands as sudo successfully. Some more shifting and a few chmod commands and I was in business.

I can now generate screenshots via URL. You can see it working on the example projects page. All of that content is created simply by entering the URL of the destination site. Next step will be downloading the image so that there’s no regeneration involved.

The code to make the URL for the image is done in the template using Angular and the mustache templating from the JSON API data. You can see the whole page here but the URL is below.

<img src="http://augmenting.me/http2pic/api.php?viewport=350x350&type=jpg&cache={{post.ID}}-{{post.author.ID}}&url={{post.meta.url }}" />

The items in brackets cull chunks of the JSON. I set the cache ID to equal the post ID-author ID to make sure the number would be unique. Probably overkill but . . .


1 I’ve done this more than a few times.

2 Although I didn’t track that down until a bit later in the process.