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.
This image features two background texture layers with blend modes and custom colour attached to them. The drummer is a single image with a blend mode of screen applied to it. 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.
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.
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-london
Demo:
Here’s a short video below to demonstrate how easy it is control and change content in the dashboard;
Resources:
This was another piece of work inspired by Jen Simmons brilliant talk for An Event Apart challenging us to get out of design and layout ruts and was a great inspiration to try something different with layout and CSS properties.
Slides:
You can download my slides as .pdf or .pptx files or view them on Speakerdeck