Generating a book cover with docker
For some people who’ve been reading this blog for a while now, you’ll remember a post of me generating the headings for invididual posts to use on Twitter. I have since then leveled-up and am now also generating the cover for my book, 12 Factors Applications with Docker and Go.
Well, the principle is just about the same, what you need to do, in order to generate an image of anything, is create a web page. The web page should render exactly what you want, and you should take a screenshot when you’re done.
When generating title images for Leanpub published works, you should generate an image with the dimensions 2550px wide and 3300px high. It’s just the matter of coming up with the html/css that works for you, and as long as it looks good in a browser, you can take an automated screenshot using docker and PhantomJS.
docker run --rm -v $(pwd):/app -w /app titpetric/webshot-cli --window-size=2550/3300 --render-delay=200 title_page.html title_page.png
This little code snippet starts the
wehshot-cli image we created in the previous post, and uses it to load a local
and saves the screenshot into title_page.png. How about that for a one-line hack?
I saved my title_page.html along with the above script into my research-projects repository on GitHub; where you can check it out and modify it if you need a book cover of your own.
Obviously, the docker image doesn’t come with the same assortment of fonts as some more modern operating systems. For that reason,
I had to include google fonts to provide a font for the title and other texts that are displayed on the page. From what I can tell,
if you want
Calibri light or
Roboto, you can’t count on them being there. So import your own font:
<link href="https://fonts.googleapis.com/css?family=Cabin:400,600" rel="stylesheet" type="text/css">
Obviously, if you’re developing your book header on your laptop, you will not have that much screen real-estate to display more than a quarter of it. If you do have an UHD 8K monitor/TV, then congratulations, most likely you’re the owner of Samsung or something.
There’s a simple css fix for this problem:
The zoom CSS scales whatever content you have. If you’re using 0.2 like the example here, it will scale a div or some element to 20% of it’s size (zoom-out). That comes to 660 px height, which is a nice preview height for your book cover.
Note: the zoom property might not have the best browser support, it is notably absent from Firefox, but it does seem that all other major browsers support it. And thankfully, PhantomJS uses Chrome for this.
When creating a good quality book cover, you have to think of including a good quality image. Royalty free photos have seen a bit of popularity recently, with excellent services like Unsplash that provide completely free images without any restrictions. There are other services available, but I would also recommend to check out Stock Up, which seems to index a large number of them. I’m sticking with Unsplash mainly because of their API.
While I have you here...
It would be great if you buy one of my books:
Want to stay up to date with new posts?