WordPress offers very useful built in functionality where you can specify image size for galleries within dashboard. But, what if you want to automatically change image size for all galleries? Here is a neat solution with just couple of lines of PHP code.
Understanding WordPress native gallery system
First, let’s take a look at how WordPress gallery system works. By default, WordPress provides you with 3 basic image sizes you can modify in Media Settings. See an example below:
Whilst creating a gallery inside your post/page content, you are able to choose image size you want to use for particular gallery. Four sizes are available by default: Thumbnail, Medium, Large and Full (originally uploaded image).
All right, so far so good! But, imagine that you have just switched to a brand new WordPress theme which has a totaly different styling. Obviously, you don’t want to go back to each gallery and change appropriate size settings one by one. Here’s a solution.
Introducing shortcode_atts_gallery filter
This simple snippet will do the trick. Just take a look at the example below:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | /* Register shortcode_atts_gallery filter callback */ add_filter( 'shortcode_atts_gallery', 'meks_gallery_atts', 10, 3 ); /* Change attributes of wp gallery to modify image sizes for your needs */ function meks_gallery_atts( $output, $pairs, $atts ) { /* You can use these sizes: - thumbnail - medium - large - full or, if your theme/plugin generate additional custom sizes you can use them as well */ $output['size'] = 'medium'; //i.e. This will change all your gallery images to "medium" size return $output; } |
And here is one addition to previous snippet. For example, if you want to use specific image size depending on the number of columns set for a particular gallery. This may be quite useful so the images use appropriate sizes ( i.e. instead of using big images if you have thumbnail styled gallery).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | /* Register shortcode_atts_gallery filter callback */ add_filter( 'shortcode_atts_gallery', 'meks_gallery_atts', 10, 3 ); /* Change attributes of wp gallery to modify image sizes for your needs */ function meks_gallery_atts( $output, $pairs, $atts ) { /* You can use these sizes: - thumbnail - medium - large - full or, if your theme/plugin generate additional custom sizes you can use them as well */ if ( $atts['columns'] == 1 ) { //if gallery has one column, use large size $output['size'] = 'large'; } else if ( $atts['columns'] >= 2 && $atts['columns'] <= 4 ) { //if gallery has between two and four columns, use medium size $output['size'] = 'medium'; } else { //if gallery has more than four columns, use thumbnail size $output['size'] = 'thumbnail'; } return $output; } |
Ok, that’s it! Just add this snippet to your theme functions.php file and modify snippet for your needs.
Live example?
We have used this approach inside our Throne WordPress Theme so feel free to take a look and see how galleries with different number of columns use different image sizes.
