megclaypool
10/11/2018 - 12:39 AM

Automatically generating multiple proportional image sizes in WordPress

[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;
} );