Responsive Images

[Gregory]

We've defined several different images sizes through our functions.php file via add_image_size( ... ); which provides us with the options we need when adding featured images through Widgets. However, when we view a featured image on a post and/or page, we are noticing a bunch of additional srcset attributes being set in the html source code, one for each image size defined.

I don't see this occurring in other Genesis/WP sites I've investigated. What is causing this behavior and is it normal?

Thanks.

Gregory

[Brad Dalton]

Please take a screenshot and link to it from here with an arrow pointing to what you are referring to.

---

Tutorials for StudioPress Themes.

[Gregory]

Hi Brad,

Sure thing. Here's the long version:

//* Add new featured image sizes
add_image_size( 'home-bottom', 150, 100, TRUE );
add_image_size( 'home-top', 400, 200, TRUE );

// Add featured image sizes
add_image_size( 'entry-image', 650 ); 
add_image_size( 'featured-small', 320 );

// Add other useful image sizes for use through Add Media modal
add_image_size( 'small-width', 320 );
add_image_size( 'medium-width', 480 );
add_image_size( 'podcast', 200, 200 );
add_image_size( 'twitter-in-stream', 506, 253 );
add_image_size( 'facebook-link-timeline', 484, 252 );
add_image_size( 'facebook-link-page', 470, 246 );
add_image_size( 'facebook-image-timeline', 504, 0 );
add_image_size( 'facebook-image-page', 470, 470 );
add_image_size( 'front-page-hero', 1200, 9999 );
add_image_size( 'podcast-thumbnail', 200, 9999 );
add_image_size( 'podcast-feature', 300, 300 );
add_image_size( 'portfolio', 300, 200 );
add_image_size( 'slider', 1200, 500 );

// Register the image sizes for use in Add Media modal
add_filter( 'image_size_names_choose', 'sg_custom_sizes' );
function sg_custom_sizes( $sizes ) {
    return array_merge( $sizes, array(
        'featured-large' => __( 'Featured Large' ),
        'featured-small' => __( 'Featured Small' ),
        'small-width' => __( 'Small Width' ),
        'medium-width' => __( 'Medium Width' ),
        'podcast' => __( 'Podcast' ),
        'twitter-in-stream' => __( 'Twitter In Stream' ),
        'facebook-link-timeline' => __( 'Facebook Link Timeline' ),
        'facebook-link-page' => __( 'Facebook Link Page' ),
        'facebook-image-timeline' => __( 'Facebook Image Timeline' ),
        'facebook-image-page' => __( 'Facebook Image Page' ),
        'front-page-hero' => __( 'Front Page Hero' ),
        'podcast-thumbnail' => __( 'Podcast Thumbnail' ),
        'podcast-feature' => __( 'Podcast Feature' ),
        'portfolio' => __( 'Portfolio' ),
        'slider' => __( 'Slider' ),
    ) );
}

And here's a screenshot of the produced source:

https://www.dropbox.com/s/ynpfctlevddvrt0/wpAddImage.PNG?dl=0

Thanks Brad.

Gregory

[Gregory]

... any ideas or is the source produced designed WP behavior?

[Brad Dalton]

From WordPress. Please post this question on the WordPress.org forums. It maybe related to the output from Jetpack.

---

Tutorials for StudioPress Themes.

[Gregory]

So from the code we posted above, the produced html source is NOT something you've seen before?

[Brad Dalton]

Its generated by wp.com. I have seen it before and think it comes from Jetpack.

---

Tutorials for StudioPress Themes.

[Gregory]

... thanks.

[Gregory]

... I deactivated Photon (from within Jetpack) which did not resolve the issue. Posted the question to WP.org per your suggestion as well.

[Gregory]

UPDATE

Okay, by disabling Photon, I got rid of the wp.com entries, however, many of the other entries remain which I believe are not related to Jetpack:

https://www.dropbox.com/s/p4qfwfa167lq1j6/wpAddImageII.PNG?dl=0

Thoughts?

[Author]

Posts