Responsive Images

[Reuben]

I realise that the GP theme doesn’t really make provisions for responsive images.

I know that WordPress 4.4 added support for responsive images, but by default, the image sizes attribute’s max-width is set to (max-width: {{image-width}}px) 100vw, {{image-width}}px.

This essentially means that the browser will load an image asset of width equivalent to the viewport’s size.

Now, on mobile devices this isn’t a problem, since the viewport size is equivalent to the content container size. However, on a desktop, this no longer applies.

For example, if I have set the content width to 1150px in the settings, and my screen resolution is 1920×1080. If I upload an image that is 1920px wide and put it in my post at full size, it will load the 1920px wide image instead of the 1150px image (which would be sufficient since my container size is restricted to 1150px anyway). This is because the GP theme doesn’t have a function to modify the max-width variable of the sizes attribute.

Themes such as the TwentySixteen theme have worked around this, by incorporating a filter hook:

function twentysixteen_content_image_sizes_attr( $sizes, $size ) {
	$width = $size[0];

	840 <= $width && $sizes = '(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px';

	if ( 'page' === get_post_type() ) {
		840 > $width && $sizes = '(max-width: ' . $width . 'px) 85vw, ' . $width . 'px';
	} else {
		840 > $width && 600 <= $width && $sizes = '(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px';
		600 > $width && $sizes = '(max-width: ' . $width . 'px) 85vw, ' . $width . 'px';
	}

	return $sizes;
}
add_filter( 'wp_calculate_image_sizes', 'twentysixteen_content_image_sizes_attr', 10 , 2 );

For me, I am currently using this simple filter in the GP theme:

add_filter( 'wp_calculate_image_sizes', 'viewportsize' );

function viewportsize () {
return '(min-width: 1150px) 1150px, 100vw'; 

}

Ideally the GP theme should replace ‘1150px’ with the a min-width that is equivalent to the container size specified in the customer.

Suggest to use thumbnails for column layout
In addition, I was wondering if it is possible to set it such that if I use the column layout on my page, the header image will use a thumbnail instead of the full size image? Right now, I have a 2 column layout on my website at http://www.describee.com . However, each header within the 2 columns are loading the 1150px image instead of a smaller version, and is a real waste of bandwidth…

Thanks for reading!

• This topic was modified 7 years, 11 months ago by Reuben.
• This topic was modified 7 years, 11 months ago by Reuben.

[Tom]

Thanks so much for the post – super helpful!

I’ll have to look into the wp_calculate_image_sizes a little more, but it looks like I’ll most likely add this into the next version of GP (with the 1150px taking the value from the Customizer).

I wonder what the best solution for the columns thing would be. I could probably write some code that detects the columns and the container width, does some math and then use the filter above to adjust the sizes?

Alternatively, you can use the Blog add-on to set the post image width and height to something much smaller (Customize > Blog > Post Image).

Thanks again 🙂

[Tom]

Try this function:

add_filter( 'wp_calculate_image_sizes', 'generate_responsive_image_width_test' );
function generate_responsive_image_width_test() 
{
	// Get Customizer settings
	$generate_settings = wp_parse_args( 
		get_option( 'generate_settings', array() ), 
		generate_get_defaults() 
	);
	
	// Get the container width
	$container = $generate_settings[ 'container_width' ];
	
	// Set our sizes
	return "(min-width: {$container}px) {$container}px, 100vw"; 
}

[Reuben]

This code seems to work fine!

For the blog add-on, I have just tried the post image width solution, and it works, except that since I have selected the option for the first post to span the whole container, the post image ends up being twice as short for the first post. Is there a code I may apply that excludes the post image width/height restriction from applying to the first post?

Thank you for your very prompt support.

[Tom]

Hmm, didn’t think of that – it’s definitely a flaw in the way things work.

There’s no way to handle that currently, but I’ll try to come up with a solution for a future version.

One option is to add the larger image in the content and give it a class, then do something like this:

.featured-column .post-image,
.larger-image-class {
    display: none;
}

.featured-column .larger-image-class {
    display: block;
}

[Kemo]

has this been incorporated to GP now? What code should we use now for responsive images?

[Leo]

All images should be responsive by default except background images.

This topic is a bit old so if you have further questions, can you open a new topic?

Thanks!

[Author]

Posts