Dark and light mode blog images with MarsEdit

As dark mode is more popular than ever now that the iPhone supports it, I've been working out how to get the browser to render a dark image in dark mode and a light image in light mode. It turns out that the way to do this simply is to use the <picture> element like this: <picture> <source srcset="/wp-content/uploads/2019/11/example-image-dark.png" media="(prefers-color-scheme: dark)" /> <source srcset="/wp-content/uploads/2019/11/example-image-light.png" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" /> <img src="/wp-content/uploads/2019/11/example-image-light.png" alt="Description of example image… continue reading.

Posted on 4 December 2019 in Computing, MarsEdit, Software, WordPress

HTML encode selected text on Mac

When writing blog posts, I write directly in HTML, mostly from habit and because I've not set up mark-up text processing on WordPress. I'm comfortable enough with simple HTML that it's never seemed important enough to sort out, especially with MarsEdit's macros for common HTML tags. One thing that I need to do relatively regularly is to HTML encode code snippets for use in <tt> and <pre> tags. I have been doing this via a… continue reading.

Posted on 23 October 2019 in Computing, Keyboard Maestro, MarsEdit

Images and WordPress

My new WordPress project has multiple photographs per post and as I wanted them to work in an efficient manner for multiple screen resolutions. The secret to this is the srcset and sizes attributes on the img tag. It turns out that WordPress will create multiple sized thumbnails when you upload an image. It will also add the srcset and sizes attributes into your img tags for you if your image tag has a class… continue reading.

Posted on 7 August 2019 in MarsEdit, PHP, WordPress

Category: MarsEdit