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 file, we require_once("lib/register_image_styles.php");

Note: Even if $crop is set to true, WordPress won't crop images whose width or height is smaller than that defined in your image size. The clients on this site insisted on uploading tiny images (Most of their personnel photos were only 200px wide.) No matter what I do, those images are going to look bad if displayed wider than their native resolution (for example, if they are full-width on a 500px wide mobile device...) However, they'll look much, much worse if they are also uncropped :P So, I redefined my base image size 'squarish' to 200px wide (reducing the height proportionally), and then added a 3x image size. On a site with more conscientious clients, I probably wouldn't want 3x images, as generating more image sizes does require a bit more processing power (on photo upload) as well as more storage for the rest of forever.

register_image_styles.php
content_copyfile_download
<?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;
} );