How to resize images due to container width automatically server side/without CSS

3 comments

1. As things like this are often requested, I’ve written a plugin named “Dynamic Image Resize”. It’s basically a plugin, but, due to it’s one-file approach, it can be used as mu-plugin or theme include without a problem. It’s main purpose is to resize single images on demand to a given height/width.

   These are the arguments the “Template Tag”/function and the shortcode take:

   src      // ID or path
   height   // New/resized height
   width    // The resized width
   classes  // custom classes for CSS targeting 
   hwmarkup // Do you want the height="ABpx" width="ABpx" on the image tag?
   

   Now you could simply set the hwmarkup to true/yes/1/on and it gets rid of the img-HTML tag width/height-attributes, so the browser will resize it to the container width automatically. You could as well go further and simply extend the class:

   <?php
   defined( 'ABSPATH' ) OR exit;
   /**
    * Plugin Name: (#120987) Resize Image to Container Width
    * Author:      Franz Josef Kaiser
    * Author URI:  http://unserkaiser.com
    * Needs @link https://github.com/franz-josef-kaiser/Dynamic-Image-Resize
    */
   
   class wpse120987ResizeImgToContainerWidth extends oxoDynamicImageResize
   {
       /**
        * Set the Attributes
        * @param $atts
        */
       public function setAttributes( $atts )
       {
           $this->atts = wp_parse_args( $atts, array(
               'width' => $GLOBALS['content_width']
           ) );
       }
   }
   
   function dynamic_image_resize_extd( $atts )
   {
       return new wpse120987ResizeImgToContainerWidth( $atts );
   }
   
   add_shortcode( 'dynamic_image', 'dynamic_image_resize_extd' );
   

   Note please, that this isn’t tested, but just a quick draft.

2. In general no, the PHP code has no way to know what image sizes you use in the CSS as PHP is being executed first on the server and only after that the CSS is executed in the browser.

   Only way that might work is if you specify all the image sizes in CSS but don’t serve any images, and only a reference to their src via a data-xxxxxx attribute. After the page load you run some JS that for each image checks its CSS defined height and width and set the src of the img to a url which will dynamically generate the image in the required dimensions.

   The biggest drawbacks with this approach is that images are starting to load only after the page had finished loading instead of in parallel, and that people that block JS will not see the images at all.

   If the images are in the same proportions as in your question you might as well serve the bigger image and leave the scaling to the browser.

3. I think you just want add_image_size() and the_post_thumbnail(), e.g.,

   add_image_size('article',  400, 300, /*crop=*/ true);
   add_image_size('overview', 200, 150, /*crop=*/ true);
   
   the_post_thumbnail('article');
   

Comments are closed.