[Automatically generating multiple proportional image sizes in WordPress]
This paired with get_the_post_thumbnail()
or wp_get_attachment_image()
will automagically make multiple image sizes available for the srcset.
In our main functions.php f
<?php
function register_image_style($name, $base_width, $base_height=0, $crop=FALSE) {
add_image_size($name, $base_width, $base_height, $crop);
add_image_size($name . '-2x', $base_width*2, $base_height*2, $crop);
add_image_size($name . '-3x', $base_width*3, $base_height*3, $crop);
//add_image_size($name . '-0x', $base_width * 0.6, $base_height * 0.6, $crop);
}
register_image_style('banner', 1440, 735, false);
register_image_style('banner_tablet', 982, 501, false);
register_image_style('banner_mobile', 768, 392, false);
register_image_style('logo', 280, 0, false);
register_image_style('logo-retina', 280 * 2, 0, false);
register_image_style('squarish', 200, 161, true);
register_image_style('related_image', 260, 160, true);
register_image_style('logo', 260, 160, false);
register_image_style('featured_image', 740, 0, false);
register_image_style('values', 800, 500, true);
register_image_style('values_tablet', 600, 375, true);
register_image_style('values_mobile', 400, 250, true);
// Add your custom sizes to this bit to display your custom sizes in the WP GUI size picker
function dl_custom_image_sizes_add_settings($sizes) {// unset( $sizes['thumbnail']);
// uncomment to remove size if needed
// unset( $sizes['medium']); // uncomment to remove size if needed
// unset( $sizes['large']); // uncomment to restore size if needed
// unset( $sizes['full'] ); // uncomment to remove size if needed
$mynewimgsizes = array(
"logo" => __( "Logo" ),
"banner" => __( "Banner" ),
"squarish" => __( "Squarish" ),
"related_image" => __( "Related Image" )
);
$newimgsizes = array_merge($sizes, $mynewimgsizes);
return $newimgsizes;
}
add_filter('image_size_names_choose', 'dl_custom_image_sizes_add_settings');
// this bit just tells Timber to use https instead of http on ssl sites
add_filter( 'timber/image/new_url', function( $url ){
if ( is_ssl() ) {
$url = str_replace( 'http://', 'https://', $url );
}
return $url;
} );