Category Archives: Uncategorised

WordCamp London

I’m at WordCamp London today speaking about how I used Advanced Custom Fields to bring a little bit of Photoshop-esque control to the dashboard, something that allows the user to put together print style graphics in the browser.

Full of control users can layer background and inline images and apply CSS properties such as blend-modes, rotate and opacity via the dashboard. Given my last post was about re-creating some classic Blue Note album sleeves, I figured I’d continue to keep it funky and work with an image of Bernard Purdie and a font from the legendary Swifty.

image of photoshop style graphic created for WordCamp London with advanced custom fields

This image features two background texture layers with blend modes and custom colour attached to them. The drummer is comprised of two images, both of which have blend modes of screen applied. The bottom border is another custom element with a blend mode of multiply. All elements have been set in the dashboard using Advanced Custom Fields.

image of photoshop style graphic created for WordCamp London with advanced custom fields

This image has two background texture layers with blend modes and custom colour applied. The drummer is comprised of two images, one of which, a halftone bitmap, has a blend mode of screen applied the other is a simple black and white image. The sine wave graphic beneath the drummer has rotate, blend mode and opacity applied. All set in the dashboard.

image of photoshop style graphic created for WordCamp London with advanced custom fields

This image has two background texture layers and blends modes have been applied, colours have been changed and the drummer is comprised of three images; colour, black and white and halftone bitmap. All these have blend modes and opacity applied. Once again all this is controlled via the dashboard.

Repo:

You can install this as a micro theme and import the ACF field data or just take bits of code you want to use, whatever you choose to do I hope you have fun and find this useful!

https://github.com/stevehoneyman/wordcamp

Demo:

Here’s a short video below to demonstrate how easy it is control and change content in the dashboard;

Some links I referred to during my talk:

Jen Simmons talk for An Event Apart challenging us to get out of design and layout ruts was a great inspiration to try something different with layout and CSS properties. Florens Vershelde’s excellent post on responsive / fluid typography helped me get my head round the maths of CSS locks plus I wrote about how I incorporated responsive type into my Blues Notes project here.

Slides:

You can download my slides as .pdf or .pptx  files or view them on Speakerdeck