When doing WordPress theme development I find it helpful to overlay an image of the approved design on top of the code I’m working on. I use a reduced opacity on the image so I can see the code I’m working on. This helps me match things like font size and spacing.
I’ve been doing this for a number of years with some code snippets I’ve written. I decided to re-architect this, moving most of the work into JavaScript, and pull it together in a plugin.
You can find the code at https://github.com/salcode/development-overlay.
The nice thing about moving the logic into JavaScript is now I can pass along URL parameters to switch between images (or nudge the image one direction or another).
e.g.
https://example.test?src=another-image.jpg
https://example.test?src=another-image.jpg&left=-20
Leave a Reply