Inverting plugin to max-size

Thanks very much for your kind words Filip. If I understand what you are trying to do, I think we should be able to make these changes to the picturefill syntax from a theme’s functions.php file using a few filters.

In functions.php

// First let's override  picturefill.js with your custom script
add_action('wp_enqueue_scripts', 'override_picturefill_scripts', 11);

function override_picturefill_scripts(){
  wp_deregister_script('picturefill');
  wp_register_script('picturefill', 'https://path/to/custom/picturefill.js', array(), '1.0', true);
}

// Next let's reverse the order of the "source" elements
add_filter('picturefill_wp_image_sizes', 'reverse_image_queue');

function reverse_image_queue($image_queue){
  return array_reverse($image_queue);
}

// I didn't consider using a max-width media query when I was adding hooks to the plugin.
// We will have to use two filters to get the new media queries in place.

// First we'll set the numbers
add_filter('picturefill_wp_media_query_breakpoint', 'set_query_to_image_width', 10, 3);

function set_query_to_image_width($breakpoint, $image_size, $width){
  return $width;
}

// Then we'll filter the template to change min-width to max-width
add_filter('picturefill_wp_source_template', 'min_width_to_max_width');

function min_width_to_max_width($template){
  return str_replace('(min-width:', '(max-width:', $template);
}

I haven’t had the chance to test the code above, but it should get you moving in the right direction. I’ll look at this more thoroughly this weekend.

Alternatively, if you’re just looking for smooth responsiveness between the images, you should be able to get that effect from the plugin with something like the following.

In functions.php

function smooth_breakpoint($breakpoint, $image_size, $width, $image_attributes, $image_attachment_data, $image_sizes){
  // First we find the position of the current image size in the list of images
  $image_size_index = array_search($image_size, $image_sizes);
  // Next we set the index for the next image size down
  if('@2x' === substr($image_size, -3)){
    $new_index = $image_size_index - 3;
  }else{
    $new_index = $image_size_index - 2;
  }
  // Lastly, we set the breakpoint to the width of the next smaller image size. If the image is already our smallest, we set the breakpoint to 1.
  if(0 <= $new_index){
    $new_breakpoint = $image_attachment_data[$image_sizes[$new_index]][1];
  }else{
    $new_breakpoint = 1;
  }
  return $new_breakpoint;
}
add_filter('picturefill_wp_media_query_breakpoint', 'smooth_breakpoint', 10, 6);

Again, I haven’t had a chance to test the above code thoroughly but can look at it in more depth this weekend.

I hope this gets you moving in the right direction. I’ll report back this weekend with regard to the helper functions.

Thanks again

Kyle, Thank you very much for your answer. I am testing this code. Hopefully tomorrow I will be able to post extended results.

Some of my results:

/**
 * Environment:
 * 		SIZES: ( set via admin panel )
 * 			Large = 9999/9999
 * 		 	Medium = 786/786
 * 		  	Thumbnail = 500x500 +crop
 *
 *      CONFIG:
 *      	DEBUG_MODE = true
 */

/**
 * TEST 1: Default WP sizes
 *
 * Default WP sizes work fine - pictures are generated and breakpoints work. No errors / notifications
 */

/**
 * TEST 2: picturefill_wp_add_image_size()
 *
 * 		picturefill_wp_add_image_size('full-banner', 1920, 340, true);
 * 		that results in notification Undefined variable: image_size in ...\plugins\picturefillwp\inc\functions-picturefill-wp.php on line 44
 * 		output : default picture
 */

/**
 * TEST 3: add_image_size + picturefill_wp_set_responsive_image_sizes()
 *
 * 		STEP 1:
 * 		add_image_size('full-banner-2',1920 ,340, true);
 *   	Does not produce any changes to output code
 *
 * 		STEP 2:
 * 		$image_sizes_array = array('full-banner-2');
 * 		picturefill_wp_set_responsive_image_sizes($image_sizes_array);
 *   	<span data-src="PATHTO_uploads/2014/06/parnaby_inv.jpg"></span>
 *   	<span data-src="<br />
 *   	<b>Notice</b>:  Undefined index: full-banner-2@2x in <b>PATHTO_picturefillwp\inc\class-view-picturefill-wp.php</b> on line <b>71</b><br />
 *   	" data-width="1920" data-height="1080" data-media="(max-width: 1920px) and (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi),(min-resolution: 1.5dppx)" class="picturefill-wp-source retina full-banner-2"></span>
 *   	<span data-src="PATHTO_uploads/2014/06/parnaby_inv-1920x340.jpg" data-width="1920" data-height="1080" data-media="(max-width: 1920px)" class="picturefill-wp-source full-banner-2"></span>
 *   	<noscript><img src="PATHTO_uploads/2014/06/parnaby_inv.jpg" title="parnaby_inv" alt="" class="clearfix" /></noscript>
 *   	<img alt="null" src="PATHTO_uploads/2014/06/parnaby_inv-1920x340.jpg" data-source-index="2"></span>
 *
 *		PHP ERROR LOG
 *		Undefined index: full-banner-2@2x in <b>PATH:\\wp-content\plugins\picturefillwp\inc\class-view-picturefill-wp.php</b> on line <b>71</b><br />
 *
 */

So far only the default size works. Adding new sizes breaks the plugin. I will still be trying to figure out a workaround.

BTW I was wondering that I could make short tutorial/manual how to use/customise this plugin with graphic explaining hooks structure as I think it would make it much easier for guys like me to play around and not bother you Kyle.