WordCamp London Slides

Slides from my lightening talk at WordCamp London 2018 demo-ing how to users can create print style hero images via the dashboard.

Using Advanced Custom Fields users can layer background and inline images and apply CSS properties such as blend-modes, rotate and opacity to any element.

Transcript

2. stevehoneyman.co.uk stevehoneyman.co.uk/blog/wordcamp : github.com/stevehoneyman stevehoneyman
3. Using Advanced Custom Fields to create multi-layered print style graphics in the browser, adding a little responsive type into the mix.
13. header {background-image}
14. header:after {backgound-image}
15. header {background-color}
16. img {}
17. figure img {}
18. figure {background-image}
19. figure:before {background-image}
20. figure:after {background-image}
21. h1 {}
22. • Image Field Type to control images • Radio Button Field Type to control blend-modes • Number Field Type to control opacity, rotate and letter-spacing if required. • Color Picker Field Type to control background and font colours.
30. Use viewport width and CSS locks to scale and control. Apply either by; • Resetting font-size on HTML root element • Using calc() on specific elements
34. stevehoneyman.co.uk/blog/wordcamp stevehoneyman.co.uk/blog/blue-notes