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

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.

Related Posts: