Feature request: image-size function

[tobiastom]

After 1.4 gave us the great data-uri, I'd like to see another function in this area: image-size( url, [type]).

The function searches for the image file at url and reads its dimensions.

The (optional) type parameter specifies the return value. Three values should be supported:

• width – Returns the width of the image, including the px unit
• height – Returns the height of the image, including the px unit
• size – Returns the height of the image, including the px unit (default)

With this I could specify the following code easily:

.logo {
    background: url( 'logo.png' ) no-repeat top left;
    background-size: image-size( 'logo.png' );

    @media ONLY min-device-pixel-ratio: 1.5 {
        background-image: url( 'logo@2x.png' );
    }
}

[lukeapage]

nice. we need to define browser behaviour, but otherwise +1

[bracketdash]

This would be fantastic. +1

[matthew-dean]

@lukeapage I think for the browser, the default size should be auto auto (default background size). Alternatively, the browser component could load the image and measure it's intrinsic size, with something like:

var img = new Image();
img.onload = function() {
  return { width: this.width, height: this.height };
}
img.src = 'logo.png';

[lukeapage]

I forgot about auto.. or else something invalid so the property is completely ignored.

[tobiastom]

auto would only solve half of the problem. With @2x ("retina") images it would need to load the image anyway or device the width and hight by two. Not sure how to solve this problem inside the browser correctly. Kind of magic involved there…

Regarding server implementation: would it be a problem to use Imagemagick? If not, I would prepare a pull request for the server side.

[lukeapage]

@tobiastom I would love to keep dependencies small espescially since not too many people are likely to use this feature.

would https://github.com/pkrumins/node-image be suitable? not updated often but the dependent projects are

no response to this.. :(

http://stackoverflow.com/questions/15696527/node-get-image-properties-height-width

when we added data-uri we added dependencies as optional and made sure less.js ran without them (or caused an error only if you used that feature)

[tobiastom]

I thought about the dependency the same as you do, that's why I asked.

In theory I could create some lightweight module to archive that task, but if it's ok for you that I use node-image I would implement it like that.

[zhouqicf]

+1

[kolya-ay]

Very usefull for not hardcoding size's.
May be, https://github.com/netroy/image-size. It's without bin dependencies

[lukeapage]

That sounds good, would be useful for my work too.
Any suggestions on format? ImageSize(file, width|height) ? The second arg
could be a keyword so we could extend if it makes sense to return both in
one? Or we could always return both and you would use extract to pick one?
Though I think that is less clear as extract would take 1 or 2 not width or
height.

[tobiastom]

IMHO (I don't know about any conventions about how may functions you would like to include), I would recommend something like this:

• ImageWidth: Returns the width (e.g. 200px)
• ImageHeight: Returns the hight of the image (e.g 100px)
• ImageSize: Returns the width and hight, directly usable for background-size (e.g. 200px 100px)

Having some parameter to define which value to return is quite unintuitive – I guess.

[tobiastom]

So adding https://github.com/netroy/image-size as an optional dependency would be ok for everyone?

How would the optional dependency be resolved when I start to use imageSize in a project?

[thomaswelton]

We'd really like this feature. Is https://github.com/netroy/image-size something that I should be able to add myself until this feature makes it into the core

[Joris-van-der-Wel]

Here is a big hack that makes this possible for node.js. This might not be the best idea but I had some fun creating it:

.imageDimension(@image) {
        @imageUrl: @image;
        @imageDimension_w : ~`function()
        {
                var path;
                var imageSize;
                var rootpath;
                try
                {
                        path = process.mainModule.require('path');
                        imageSize = process.mainModule.require('image-size');
                }
                catch (err)
                {
                        console.warn('Main module is', process.mainModule.filename);
                        throw err;
                }

                // (does not work with css escape sequences)
                img = this.imageUrl.toJS().replace(/^url\("?([^"]*)"?\)$/, '$1');
                img = path.resolve(img);
                img = img.replace(/\\/g, '/'); // less bug on windows
                img = img.replace(/^[A-Z]+:/, function(match) { return match.toLowerCase(); }); // less bug on windows
                global._mixinImageDimension = imageSize(img);
                global._mixinImageDimension.path = img;
                return global._mixinImageDimension.width + 'px';
        }.call(this)`;

        @imageDimension_h : ~`function()
        {
                return global._mixinImageDimension.height + 'px';
        }.call(this)`;

        @imageDimension_resolved : `function()
        {
                try
                {
                        return global._mixinImageDimension.path;
                }
                finally
                {
                        delete global._mixinImageDimension;
                }
        }.call(this)`;

        @imageDimension : @imageDimension_w, @imageDimension_h, @imageDimension_resolved;
}


.imageSize(@image) {
        .imageDimension(@image);
        width: extract(@imageDimension, 1);
        height: extract(@imageDimension, 2);
}

.backgroundImageWithSize(@image) {
        .imageDimension(@image);
        width: extract(@imageDimension, 1);
        height: extract(@imageDimension, 2);
        background-image: data-uri(extract(@imageDimension, 3));
}

.myLogo {
    .backgroundImageWithSize(url(myLogo.png));
}

image-size will need to be installed somewhere that is resolvable from the cli you are running (e.g. lessc or grunt-cli). if you installed lessc/grunt-cli globally you will need to use npm install -g image-size