WordPress.org

Ready to get started?Download WordPress

Forums

Picturefill.WP
[resolved] Possible to assign more than one Picturefill html markup outside the content (7 posts)

  1. rkoller
    Member
    Posted 8 months ago #

    Lets say you have the following sizes defined inside the functions.php:

    add_image_size('square-small150', 150, 9999);
    add_image_size(' rectangle-small325 ',325, 9999);
    add_image_size('square-small410', 410, 9999);
    add_image_size(' rectangle-small420 ',420, 9999);
    add_image_size('rectangle-mid530', 530, 9999);
    add_image_size('square-mid410', 650, 9999);
    add_image_size('rectangle-large730', 730, 9999);
    add_image_size('square-large920', 920, 9999);

    and unset the standard sizes:

    function test_remove_default_image_sizes( $sizes) {
        unset( $sizes['thumbnail']);
        unset( $sizes['medium']);
        unset( $sizes['large']);
    
        return $sizes;
    }
    add_filter('intermediate_image_sizes_advanced', 'test_remove_default_image_sizes');

    Would it be basically possible to define different html output markups for inside and outside the content (outside i am additionally using advanced custom fields plugin as well as the repeater add-on)?
    e.g. one markup snippet for the image sizes with "rectangle- " as id and one snippet for the ones with "square- " as id? judging by the documentation it seems that there is only one single predefined markup and all known file sizes are included? Best regards Ralf

    http://wordpress.org/plugins/picturefillwp/

  2. kylereicks
    Member
    Plugin Author

    Posted 8 months ago #

    I'm not 100% sure I understand what you are trying to do, but I'm going to give it a try.

    First, it sounds like you are applying Picteufill.WP to the_content and to another Advanced Custom Fields content block. Like so:

    add_filter('acf/format_value_for_api', 'theme_function_picturefill_for_acf', 11, 3);
    
    function theme_function_picturefill_for_acf($content, $post_id, $field){
      if(in_array($field['type'], array('textarea', 'wysiwyg', text))){
        return Picturefill_WP::get_instance()->cache_picturefill_output($content, $field['name']);
      }else{
        return $content;
      }
    }

    Next, it sounds like you would like different image sizes to be served for the_content than for the ACF images. This has always been possible, but as of Picturefill.WP version 1.3.0 it can be done with a lot less code.

    In functions.php:

    // Let's define <code>the_content</code> first
    add_filter('the_content', 'set_theme_content_picturefill_sizes');
    
    function set_theme_content_picturefill_sizes($content){
    // If we call this function in the <code>the_content</code> filter, it should only apply to images inside <code>the_content</code>
      picturefill_wp_set_responsive_image_sizes(array(
        'rectangle-small325',
        'rectangle-small420',
        'rectangle-mid530',
        'rectangle-large730'
      ));
      return $content;
    }
    
    // Next for the ACF fields, lets just alter the code from above
    add_filter('acf/format_value_for_api', 'theme_function_picturefill_for_acf', 11, 3);
    
    function theme_function_picturefill_for_acf($content, $post_id, $field){
      if(in_array($field['type'], array('textarea', 'wysiwyg', text))){
    // Here we set the square image sizes for the ACF fields only.
        picturefill_wp_set_responsive_image_sizes(array(
          'square-small150',
          'square-small410',
          'square-mid410',
          'square-large920'
        ));
    
        return Picturefill_WP::get_instance()->cache_picturefill_output($content, $field['name']);
      }else{
        return $content;
      }
    }

    I think that should work, if that is the kind of thing you were hoping to do. Let me know how it goes, and if I'm miss interrupting the issue let me know so I can take another crack at it.

    Thanks very much.

  3. rkoller
    Member
    Posted 7 months ago #

    at first thanks for getting back. and uh i've read my initial post again and i have to admit it wasn't very easy to grasp. ;) sorry for that, it is quite a complex topic and i am still puzzled trying to wrap my head around understanding the plugin in regard of my problem statement. ok i try it to reexplain my basic processing steps i had in mind.

    - in my recent wordpress site all possible media uploads are either in custom post type within advanced custom fields or in the content for posts.
    - all emerging sizes are defined in the functions.php with add_image_size('square-small150', 150, 9999); ( i guess it wouldn't be possible to create only the sizes defined for a certain upload location)
    - then create breakpoint sets to group image sizes for a certain type of images ( you've already explained i should go with picturefill_wp_set_responsive_image_sizes for that purpose)
    - then i want the images to be served. i dont want to just distinguish between breakpoint set 1 (bps1) for the content and bps2 for the acf. i would prefer to say bps1 for the content, bps2 for e.g. images from the acf "member_pictures" bps3 for images from the acf "project_images" and so on. i saw that you've used in your snippets the $field['type'] hook, but would it also be possible to target a certain field name?
    - the only question i ask myself in the end is, is the template  minding which breakpoint set is used when building the html snippet or would it be necessary that the templates are created/ adjust for every single breakpoint set created with picturefill_wp_set_responsive_image_sizes?

    that's it more or less basically. i hope i was able to explain things a little bit better now. sorry for that again! and i will try your suggested snippet tomorrow as well as dig a bit deeper in the documentation. and any further hints and suggestion would be more than cool and welcome. :) still a bit confusing the whole thing. thanks!!!

  4. kylereicks
    Member
    Plugin Author

    Posted 7 months ago #

    To set different image sizes for specific ACF fields, you will just need to use $field['name'] instead of $field['type'] in the if statement.

    add_filter('acf/format_value_for_api', 'theme_function_picturefill_for_acf', 11, 3);
    
    function theme_function_picturefill_for_acf($content, $post_id, $field){
      if('square_image' === $field['name']){
    
        picturefill_wp_set_responsive_image_sizes(array(
          'square-small150',
          'square-small410',
          'square-mid410',
          'square-large920'
        ));
    
        return Picturefill_WP::get_instance()->cache_picturefill_output($content, $field['name']);
      }elseif('round_image' === $field['name']){
    
        picturefill_wp_set_responsive_image_sizes(array(
          'round-small150',
          'round-small410',
          'round-mid410',
          'round-large920'
        ));
    
        return Picturefill_WP::get_instance()->cache_picturefill_output($content, $field['name']);
      }else{
        return $content;
      }
    }

    The templates only provide a very basic HTML structure to match the picteufill.js syntax. The templates should not need to be adjusted for breakpoint or image size customization.

    Does that cover everything, or did I raise more questions than I've answered?

  5. rkoller
    Member
    Posted 7 months ago #

    wow thanks! that was basically the thing i was trying to accomplish. And no you haven't risen more questions than you answered. ;) But unfortunately a few issues turned up while i've applied you're code suggestions. I go on in this thread, since the area i have issues with still sticks with the initial topic. otherwise i would have started a new thread. anyway, i've used the following code snippet:

    function suk_remove_default_image_sizes( $sizes) {
        unset( $sizes['thumbnail']);
        unset( $sizes['medium']);
        unset( $sizes['large']);
    
        return $sizes;
    }
    
    add_filter('intermediate_image_sizes_advanced', 'suk_remove_default_image_sizes');
    add_image_size('bps3-small', 300, 9999);
    add_image_size('bps2-small', 410, 9999);
    add_image_size('bps1-medium',750, 9999);
    add_image_size('bps2-large', 920, 9999);
    add_image_size('bps1-large', 1020, 9999);
    
    function set_theme_content_picturefill_sizes($content){
      picturefill_wp_set_responsive_image_sizes(array(
        'bps3-small',
        'bps1-medium',
        'bps1-large'
      ));
      return $content;
    }
    
    add_filter('the_content', 'set_theme_content_picturefill_sizes');
    
    function theme_function_picturefill_for_acf($content, $post_id, $field){
      if('tm_img' === $field['name']){
    
        picturefill_wp_set_responsive_image_sizes(array(
          'bps3-small',
          'bps2-small',
          'bps2-large'
        ));
    
        return Picturefill_WP::get_instance()->cache_picturefill_output($content, $field['name']);
      } elseif('pro_preview' === $field['name']){
    
        picturefill_wp_set_responsive_image_sizes(array(
          'bps2-small',
          'bps2-large',
          'bps2-large'
        ));
    
        return Picturefill_WP::get_instance()->cache_picturefill_output($content, $field['name']);
      } else{
        return $content;
      }
    }
    
    add_filter('acf/format_value_for_api', 'theme_function_picturefill_for_acf', 11, 3);

    Now i went to the media library and uploaded an 2400x1120 image for testing purpose. the following files were created:

    solutions-300x140.jpg
    solutions-300x300.jpg
    solutions-410x191.jpg
    solutions-750x350.jpg
    solutions-920x429.jpg
    solutions-1020x476.jpg
    solutions-1350x630.jpg
    solutions.jpg

    except for solutions-300x300.jpg and solutions-1350x630.jpg all defined sizes got created. the 300x300 seems some odd thumbnail format but no idea what the 1350 x630 actually is; thought i've switched off all obscure wordpress image defaults. ;)

    But then the problems started. i've entered the picture inside the posts edit-window via the add media button inside the wysiwg editor and posted it (the acf image upload part i haven't tried yet - wanted the the_content version working first) . the problems:

    - if i load the single post page i experience a loading lag of about 6-10 seconds on every reload and not only the mentioned initial one from the docs.

    - second there aren't any retina images created - i still stick to the files listed above

    - and finally there seem to be two issues with the html markup. the created markup looks like the following:

    <span data-picture="" data-alt="about" data-class="alignnone size-full wp-image-266">
    	<span data-src="http://localhost:8888/test/wp-content/uploads/2014/01/about.jpg"></span>
    	<span data-src="http://localhost:8888/test/wp-content/uploads/2014/01/about.jpg" data-width="150" data-height="70" data-media="(min-width: 1px)" class="picturefill-wp-source thumbnail"></span>
    	<span data-src="http://localhost:8888/test/wp-content/uploads/2014/01/about-300x300.jpg" data-width="150" data-height="70" data-media="(min-width: 1px) and (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi),(min-resolution: 1.5dppx)" class="picturefill-wp-source retina thumbnail"></span>
    	<span data-src="http://localhost:8888/test/wp-content/uploads/2014/01/about.jpg" data-width="675" data-height="315" data-media="(min-width: 695px)" class="picturefill-wp-source medium"></span>
    	<span data-src="http://localhost:8888/test/wp-content/uploads/2014/01/about-1350x630.jpg" data-width="675" data-height="315" data-media="(min-width: 695px) and (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi),(min-resolution: 1.5dppx)" class="picturefill-wp-source retina medium"></span>
    	<span data-src="http://localhost:8888/test/wp-content/uploads/2014/01/about.jpg" data-width="1216" data-height="567" data-media="(min-width: 1236px)" class="picturefill-wp-source large"><img alt="about" class="alignnone size-full wp-image-266" width="1216" height="567" src="http://localhost:8888/schmidundkreative/dFGn2SxAy8Z7bnM/wp-content/uploads/2014/01/about.jpg"></span>
    	<span data-src="http://localhost:8888/test/wp-content/uploads/2014/01/about.jpg" data-width="1216" data-height="567" data-media="(min-width: 1236px) and (-webkit-min-device-pixel-ratio: 1.5),(min-resolution: 144dpi),(min-resolution: 1.5dppx)" class="picturefill-test<span data-src="http://localhost:8888/test/wp-content/uploads/2014/01/about.jpg" data-width="2400" data-height="1120" data-media="(min-width: 2420px)" class="picturefill-wp-source full"></span>
      <noscript><img class="alignnone size-full wp-image-266" alt="about" src="http://localhost:8888/test/wp-content/uploads/2014/01/about.jpg" width="2400" height="1120" /></noscript>
    </span>

    within the noscript tag the image brackets are replaced by entities: <noscript><img and /></noscript> - a bug probably. but the more severe issue are the applied breakpoints and the file naming. the defined file sizes are as follows:

    300x140
    750x350
    1020x476

    but if you take a look at the html markup from above the files are called about.jpg most of the time instead about-300x140.jpg, about-750x350.jpg and about-1020x476.jpg. and i would have expected different breakpoint values used :/ something like that:

    first image 300x140
    second image 750x350 (with min-width 301px)
    third image 1020x476 (with min-width 751px)

    and i wouldn't necessarily place data-height and data-width into the html markup as well as width and height inside the noscript img fallback tag. additionally there are placed the 300x300 and 1350x630 image version inside the markup. oh and as already mentioned the retina versions are missing completely. :/

    I am using picturefill.wp 1.3 and the picturefill plugin is properly shown in the resources in the dev tools and the image exchange works. Uh that's it for now. Hope that wasn't too much and i was able to describe everything properly. If you have any further questions let me know. Best regards Ralf

  6. kylereicks
    Member
    Plugin Author

    Posted 7 months ago #

    After duplicating the issue with the information you provided, I found an error in the execution of the picturefill_wp_set_responsive_image_sizes function. Thanks very much for pointing me in the right direction.

    Version 1.3.1 has been pushed with a fix for this oversight.

    With that fix in place, the following seems to work. I only made one small change to your original code, so that the new image sizes are included as options in the media library.

    add_image_size('bps3-small', 300, 9999);
    add_image_size('bps2-small', 410, 9999);
    add_image_size('bps1-medium',750, 9999);
    add_image_size('bps2-large', 920, 9999);
    add_image_size('bps1-large', 1020, 9999);
    
    add_filter( 'image_size_names_choose', 'theme_custom_sizes' );
    
    function theme_custom_sizes($sizes){
        return array_merge(array(
            'bps3-small' => __('small'),
            'bps1-medium' => __('medium'),
            'bps1-large' => __('large'),
        ), $sizes);
    }
    
    function suk_remove_default_image_sizes( $sizes) {
        unset( $sizes['thumbnail']);
        unset( $sizes['medium']);
        unset( $sizes['large']);
    
        return $sizes;
    }
    
    add_filter('intermediate_image_sizes_advanced', 'suk_remove_default_image_sizes');
    
    function set_theme_content_picturefill_sizes($content){
      picturefill_wp_set_responsive_image_sizes(array(
        'bps3-small',
        'bps1-medium',
        'bps1-large'
      ));
      return $content;
    }
    
    add_filter('the_content', 'set_theme_content_picturefill_sizes');
    
    function theme_function_picturefill_for_acf($content, $post_id, $field){
      if('tm_img' === $field['name']){
    
        picturefill_wp_set_responsive_image_sizes(array(
          'bps3-small',
          'bps2-small',
          'bps2-large'
        ));
        add_filter( 'image_size_names_choose', 'tm_img_custom_sizes' );
    
        return Picturefill_WP::get_instance()->cache_picturefill_output($content, $field['name']);
      } elseif('pro_preview' === $field['name']){
    
        picturefill_wp_set_responsive_image_sizes(array(
          'bps2-small',
          'bps2-large',
          'bps1-large'
        ));
        add_filter( 'image_size_names_choose', 'pro_preview_custom_sizes' );
    
        return Picturefill_WP::get_instance()->cache_picturefill_output($content, $field['name']);
      } else{
        return $content;
      }
    }
    
    add_filter('acf/format_value_for_api', 'theme_function_picturefill_for_acf', 11, 3);

    Let me know if that does the trick.

    Thanks again.

  7. kylereicks
    Member
    Plugin Author

    Posted 6 months ago #

    Ralf, I'm going to mark this thread as resolved due to inactivity. Hopefully the previous post helped to clear up your issue. If you are having any further trouble, feel free to open up another support thread.

    Thanks very much.

Reply

You must log in to post.

About this Plugin

About this Topic