I’ve just finished reading Snooks article User Generated Content in a Classy World, which is turn was a follow up to Chris Coyiers article Class up Content.
Recently I’ve been trying to apply AMP templates to the Responsive Design Knowledge Hub and it’s been a learning curve. The thing I can not fix is the embedded content that is contained within the News and Articles I’m applying the AMP template to. The reason is that AMP requires it’s own fancy elements to be declared for Images, Video, Ads, Embeds, Iframes and more. This makes a mockery of the carefully semantic way that I’ve tried to add content and renders some of the pages non-compliant.
The best implementation I’ve seen from a CMS to separate the concerns from creating content from the way in which it is rendered to the client is WordPress and Responsive Images.
When adding an image to WordPress I go through a three step process.
- Click Add Media
- Select or Upload an image
- Add the image
The code that is added to the wysiwyg is shown below…
<img src="https://surfthedream.com.au/wp-content/uploads/2015/12/moon-shard-1024x591.jpg" alt="moon shard" width="1024" height="591" class="alignnone size-large wp-image-1866" />
…. yet the code that is rendered to the browser is:
<img src="//surfthedream.com.au/wp-content/uploads/2015/12/moon-shard-1024x591.jpg" alt="moon shard" width="1024" height="591" class="alignnone size-large wp-image-1866" srcset="//surfthedream.com.au/wp-content/uploads/2015/12/moon-shard-300x173.jpg 300w, //surfthedream.com.au/wp-content/uploads/2015/12/moon-shard-768x443.jpg 768w, //surfthedream.com.au/wp-content/uploads/2015/12/moon-shard-1024x591.jpg 1024w, //surfthedream.com.au/wp-content/uploads/2015/12/moon-shard-500x288.jpg 500w, //surfthedream.com.au/wp-content/uploads/2015/12/moon-shard-800x462.jpg 800w, //surfthedream.com.au/wp-content/uploads/2015/12/moon-shard.jpg 1600w" sizes="(max-width: 1024px) 100vw, 1024px">
… which produces the following responsively wonderful image.
I haven’t had time to look into the AMP plugin for WordPress, but I assume they’re going to be doing a similar thing where they scan the content for markup that needs to be updated, images iframe embeds and rewrite them into a suitable accepted format for AMP.
Below are my comments on Snooks article….
The other issue I have with embedding content into that single block is when you want to retrieve the content for use in other ares besides a HTML template.
I’ve had RSS feeds clog up because of the funky elements used within content areas (different apostrophe’s in headings the biggest issue), and while these can usually be sorted by using something like CDATA tags
<!--CDATA // Content here -->the same issues end up coming back when you look at implementing something like AMP with your database content. All of a sudden it’s less of a class issue and now you have issues with the semantics of the content requiring updates.
The best approach from a CMS I’ve seen has been the implementation of responsive images into wordpress. The image is inserted in the same way it always has in the WYSIWYG, but when it is rendered on the front end you get the benefit of the Responsive Images markup being added for you with no additional work.