Stack

Both Connections and the Stack theme both utilize a script called picturefill in order to add support for responsive images to browsers which do not yet support the new HTML img tag markup standard for responsive images. The conflict occurs because both Connections and Stack both register the library with the same “handle” with WordPress. Only a single script can be registered per “handle”. This causes the script to only be loaded once which is by design and usually a good thing. In this case, only the version loaded with Connections is loaded.

Generally this is not an issue either, but in this case the theme uses a much older version of the picturefill script which required the HTML markup for images to be done in a non-standard way. This has been corrected in newer versions of picturefill, which is what Connections uses. Since the version that is being loaded by Connections is newer and no longer compatible with the older non standard image markup, many of the images loaded by the theme will no longer load.

That said, Connections and Stack can be used together, here’s how to fix it:

1. Install the Code Snippets plugin.
2. Add a new snippet with the following code.
3. Save and activate the new snippet.

add_action( 'wp_enqueue_scripts', 'stack_enqueue_picturefill', 99 );
 
function stack_enqueue_picturefill() {
 
  if ( defined( 'THEME_URI' ) && class_exists('connectionsLoad') ) wp_enqueue_script('stack-picturefill', THEME_URI . '/js/picturefill.js', false, THEME_VERSION, false );
}

What this snippet will do is load the picturefill script that comes with the theme with a different “handle” so both the version with Connections and Stack are loaded. This will not cause a compatibility issue because of the difference in HTML img markup that is required for each version of picturefill.

NOTE: This FAQ was written based on Stack 1.0.