Tricia Francis heytricia

Notes and Resources for Responsive Images in WordPress 4.4

Following the addition of responsive images support in WordPress 4.4, there has been a lot of confusion over what WordPress does "automatically" and what is left up to the developer. I've gathered the following notes from chatting with members of the core team and also my own investigation of the 4.4 source. Here's what I've discovered:

Following the 4.4 update, WordPress automatically serves the following images responsively:
- Content images added via the main content editor will now be served with srcset markup. This is accomplished by filtering the_content() prior to display, which means it applies to existing posts and new posts going forward.
- Featured images called by the_post_thumbnail() also get srcset markup without any additional steps required.
Images that are referenced from custom fields will not be served responsively unless the theme calls the image via wp_get_attachment_image() OR constructst the responsive m

	{# RENDER READ TIME #}
	{% macro render_read_time(body) %}
	{% set str = body\|lower %}
	{% set img_count = str\|split('<img')\|length %}
	{% set img_minutes = ((img_count * 12) / 60)\|round(0, 'common') %}
	{% set read_time = (str\|striptags\|wordcount / 275)\|round(0, 'common') + img_minutes %}
	{{ read_time\|string\|trim ~ ' ' ~ render_read_time_suffix()\|trim }}
	{% endmacro %}

	{# And here's the meta info for the <head> of the custom template... #}

	<?php

	add_action('admin_init', function () {
	// Redirect any user trying to access comments page
	global $pagenow;

	if ($pagenow === 'edit-comments.php') {
	wp_redirect(admin_url());
	exit;
	}

	/**
	* Get YouTube ID from various YouTube URL
	* @author: takien
	* @url: http://takien.com
	* For PHP YouTube parser, go here http://takien.com/864
	*/

	function YouTubeGetID(url){
	var ID = '';
	url = url.replace(/(>\|<)/gi,'').split(/(vi\/\|v=\|\/v\/\|youtu\.be\/\|\/embed\/)/);


	!function ($) {

	$(function(){

	// fix sub nav on scroll
	var $win = $(window)
	, $nav = $('.subnav')
	, navTop = $('.subnav').length && $('.subnav').offset().top - 40
	, isFixed = 0