How to add more than one set of images

I kept on thinking about the problem i described and i guess it would be a way too heavy lift for the server to actually serve all the necessary versions based on the described logic. I guess it would be an easier go to just create a all necessary image versions – hd space shouldn’t be not that much of an issues i suppose in contrast to the cpu time it would take?

If you’re worried about server strain, sites can be quite responsive with just CSS in the browser. The following CSS can go a long way.

img{
  max-width: 100%;
  height: auto;
}

It doesn’t serve up different size images, but it can take care of most design issues.

I think the sets of images you would like to create can be accomplished with the picturefill_wp_set_responsive_image_sizes helper function in version 1.3.0. You will just need to figure out where you want the different image sets, and only call the function under those conditions.

Is this the kind of thing you were looking for?

i know and use the max-width / height auto-pattern already for quite some while. and no i wasn’t worried if the server could stand displaying the pictures. i was more worried if it could stand the processing logic i described. ?? i mean to have a list of breakpoints separated into sets and you query on upload which set and settings based on a variable should be created and later on display which is the set and resolution at this particular breakpoint set. that is what i was worried about – my general idea and question. ??

and i guess picturefill_wp_set_responsive_image_sizes is heading into the direction i was looking for. so picturefill_wp_set_responsive_image_sizes creates more or less a variable name hook for a certain group of images out of the whole group of images defined and created with add_image_size in functions.php? so that you are able to call “set1” on certain occasions and “set2” on others e.g. if you have images from an advanced custom field “member picture” you use “set1” and on pictures in the content you use “set 4”

and does the template for the html code adjust automatically to the different settings in sets? or would it be necessary to create a template for set1 and another for set2 adjusting to the certain needs of each set?

I apologize for misunderstanding your original question.

With regard to picturefill_wp_set_responsive_image_sizes, it is a helper function. It replaces the default responsive image sizes (Thumbnail, Medium, Large, and Full) with the sizes passed as attributes.

If called in a global context, it will override the default sizes in all circumstances.

In functions.php:

picturefill_wp_set_responsive_image_sizes(array('new_size_small', 'new_size_medium', 'new_size_large'));

I think the alternate “sets” you are looking for could be achieved if the picturefill_wp_set_responsive_image_sizes is called when the proper conditions are met. The following example sets different responsive sizes based on post-type.

In functions.php:

function theme_picturefill_wp_set_size_by_post_type($post){
  if('custom_post_type' === $post->post_type){
    picturefill_wp_set_responsive_image_sizes(array('custom_size_small', 'custom_size_large'));
  }elseif('post' === $post->post_type){
    picturefill_wp_set_responsive_image_sizes(array('post_size_small', 'post_size_medium', 'post_size_large'));
  }else{
    picturefill_wp_set_responsive_image_sizes(array('thumbnail', 'medium', 'large'));
  }
}
add_action('the_post', 'theme_picturefill_wp_set_size_by_post_type');

The template files are just scaffolding for the picturefill.js syntax and should not need to be customized when adding or changing responsive image sizes.

Thanks!