Support » Plugin: Picturefill.WP » How to add more than one set of images

  • Resolved Ralf Koller


    Hi found your plugin today. I am already looking for quite some while for a solution to deal with responsive images in WordPress. On none PHP sites I’ve used Picturefill and a own responsive image version so far. The advantage of non PHP versions is the option to write custom picturefill markup snippets dealing with different breakpoints and source files. The one downside I am unable to solve so far in WordPress with the following approach: is that the automatic image creation for an uploaded file creates all set versions also the unnecessary.

    I tried to read through the picturefill.wp docs but i am not completely sure if I am understanding things. There for I wanted to ask if the following would be possible in the plugin.

    Lets say you have the following setup ( with total random numbers).

    project info picture: (after two breakpoints i would switch from 1/3 column to 2/3 column width – reflecting in the change of width between the second and the third image)


    project sample picture:


    member picture:


    As you can see, even if you exclude the standard thumbnail, medium and large sizes there would be still 11 versions per uploaded image to be created. Would there be a way to create, i call it breakpoint sets. set 1 would be the “project info”, set 2 the “project sample” and set 3 the “member picture” in the example.

    So if you add a picture in a certain custom post type and custom field using the add image button or the add row button (for adding more than one image in a repeater list), the breakpoint set for this add location is applied to the uploaded file and only the assigned image versions get created. If breakpoint set 1 would be assigned the created sizes would be as follows:


    Would that already theoretically possible within picturefill.wp? Hope i was able to explain it correctly ( a bit difficult in some parts). ;))) Thanks in advance Ralf

Viewing 5 replies - 1 through 5 (of 5 total)
  • 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?

    Plugin Author kylereicks


    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.

      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?

    Plugin Author kylereicks


    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'));
        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.


Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to add more than one set of images’ is closed to new replies.