Getting up to speed with responsive images and Picturefill

This week I have challenged myself to get up to speed with responsive images and Picturefill, a polyfill for the upcoming HTML5 picture element as well as two new attributes for the img element. It wasn’t easy—there’s a surprising amount of reading and processing that needs to be done to understand the many problems and proposed solutions to responsive images on the web. Along the way I realized that I am not yet hugely interested in the art direction use case—which means I have focused more of my time on two less hyped img element attributes, srcset and sizes. Together these provide for most of what I am interested in: swapping source imagery at different resolutions.

Continue reading →

Experimenting with HTML5 image markup and shortcodes in WordPress

Recently I have been experimenting with the markup and styling of images in WordPress. Unbeknownst to me, the core WordPress developers have also been working on this. Version 3.9 has just hit the airwaves and one of its leading features (for developers, anyway) is the introduction of semantic HTML5 markup for caption and gallery shortcodes. This formalizes some of the hacks and snippets WordPress developers have been using for some time now.

I took things one step further by developing a general “image” shortcode, initially to apply the same markup to images with or without captions. Later I began to mess around with dynamic image and attachment link generation, something that isn’t really feasible when images are hard-coded into post contents.

Continue reading →

Marking up scholarly references with HTML5

Despite the web’s origin in academia it isn’t immediately obvious what HTML5 markup should be used for scholarly references and bibliographies. By “scholarly references” I mean the usual sort of references one finds at the end of an academic paper. I went Googling this one night and this post by Ian Devlin is just about the only relevant post I found on the subject. What follows is an investigation of the various options open to anyone interested in including a bibliography or reference list in their online work.

Continue reading →

Marking up quotations with HTML5: an update

Last year I wrote two extensive posts about marking up quotations with HTML5 and working with WordPress post formats and quotations. Since then the W3 working group has updated the HTML5 specification for the blockquote and cite elements, making things a little easier for OCD developers interested in writing compliant markup. HTML5 Doctor updated their prescription, focusing their discussion on two sensible changes to the specification:

  1. The blockquote element now allows for the inclusion of quotation metadata inside a cite or footer element.
  2. The cite element is now much more flexible, allowing much more than the title of a work to be included.

Previously I had messed around with using the article element to associate quotation metadata with the original quotation. Now such semantic acrobatics are no longer necessary. Continue reading →

WordPress post format UI update

I recently updated my fork of CF Post Formats to version 1.3.1 of the original to make it compatible with WordPress 3.8.1. The original plugin is a proof-of-concept showing how the bare bones implementation of post formats in vanilla WordPress might be improved. I happen to like the new UI and hoped that it would be integrated into the WordPress core when the team began overhauling post formats for the 3.6 release. Alas, no one was really happy with how things went and the entire project was scrapped. This means there is still good reason to use this plugin—as long as you’d like to use post formats, anyway.

My modifications to the original plugin are simple and straight-forward:

  1. I added two fields to the quotations post format: source title and source date. This is a consequence of my investigation of marking up quotations with HTML5 and various problems working with WordPress post formats and quotations. Here are some examples of properly marked-up quotations.
  2. I changed the way slugs are generated for post formats without formal titles. Now slugs are generated from the first ten words or so rather than the first fifty characters. This generally makes for much nicer slugs but you still have to save a draft for the slug to be generated.

This is all really minor stuff mainly of interest to someone with more than a hint of OCD so I am not particularly surprised that my pull request was ignored. That being said, since I use this plugin it made sense to give my fork a little love and care, so that’s exactly what I did. Download it from GitHub.

Working with WordPress post formats and quotations

Recently I published an article about marking up quotations with HTML5, a prelude to this somewhat more practical post about working with quotations and WordPress post formats. My goal here is simple: use WordPress to post quotations conforming to the HTML5 specification without having to enter markup by hand. To accomplish this I will be using the Post Formats Admin UI plugin and a custom content-quote.php template.

Continue reading →

Marking up quotations with HTML5

I am in the habit of collecting quotations inspire or otherwise interest me. When I am moved by something I read or hear I often record a key passage as a kind of mnemonic—a way of unlocking deeper thoughts and impressions of my own. Maintaining an archive of quotations allows me to have a record of when different influences entered into my life. I would love to be able to share quotations here on my blog—but I am intent on doing it the hard way, by conforming to the HTML5 specification.

Continue reading →