1

Does anyone know how to resize the served images, so the image has a width due to the content containers width. I do not mean to resize the image via 100% width css, but instead resize the actual dimensions and size if the image itself.

For e.g.: An image in an article which has the dimensions of 400px × 300px. But in the overview I only need 200px × 150px. But I do not want to edit every part of my theme to do so, because there are a lot of different sizes. Is there any possibility that this works automatically?

  • Max, keep in mind that plugin recommendations are off topic - see help center for more info. – kaiser Nov 2 '13 at 11:59
  • can also be a code snippet or functions.php-changement! But thanks for the tip. – Max Nov 2 '13 at 12:01
  • I think what you ask for is impossible. As the CSS is rendered on the client/browser-side there is no way to know what the dimensions will be before you have sent the page to the browser and it parsed the CSS. You can use the code from kaiser to minimize the effort, but you'll still have to edit your theme. – s1lv3r Nov 2 '13 at 12:28
  • 1
    @max the theme knows the size of the previous container from css No, the theme means the PHP parser. And the PHP parser doesn't parse any CSS code. That's the job of the browser. You simply don't have that information at that point of time. – s1lv3r Nov 2 '13 at 14:14
  • 2
    Sounds like a XY problem. I;m pretty sure you're trying to solve a problem that doesn't exist, and in the wrong way :) – onetrickpony Nov 2 '13 at 14:50
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.

  • thanks. will try it out. as it might not be exactly what i am looking for, but lets give it a try. :) – Max Nov 4 '13 at 8:45
  • @max Another related answer might help you as well. – kaiser Nov 4 '13 at 10:16
0

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.

0

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');

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.