Get image dimensions

[Don Chambers]

The media library obviously knows the dimensions of an original image, as well as the thumbnail image. How can I retrieve those dimensions on an image-by-image basis?

Reason I need to know: When an image is inserted into an entry, lets say floated right, s9y inserts it something like this:

Code: Select all

<!-- s9ymdb:61 --><img class="serendipity_image_right" width="300" height="400" style="float: right; border: 0px; padding-left: 5px; padding-right: 5px;" src="/whatever/uploads/imagename.jpg" alt="" />

Note the inline width and height. If the image contains a comment, the image is contained within 2 additional divs:

Code: Select all

<div class="serendipity_imageComment_right" style="width: 300px"><div class="serendipity_imageComment_img"><!-- s9ymdb:61 --><img class="serendipity_image_right" width="300" height="400"  src="/whatever/uploads/imagename.jpg" alt="" /></div><div class="serendipity_imageComment_txt">Blah Blah Comment Text</div></div>

Note again the inline width and height for the image, but also note that the serendipity_imageComment_right div needs to have width set to that of the image.

So I am NOT inserting an image directly into the entry body using the media manager, instead the path to the image is stored in an extended property field and I need to add the width and code to my entries.tpl file. It is not really critical for the <img>, but it is for the serendipity_imageComment_right div.

[garvinhicking]

Hi!

You can't actually do that without creating a custom smarty function that passes the path of an image to PHP code, which then queries the media database.

I actually wouldn't recommend this; is the width+height really required for that extended-property field? Couldn't it be done with a different wrapping <div> that has no width restrictions?

If there's no other way, I'm afraid it won't be manageable at the current point. The extended-properties plugin would need a major extension in that case to return more metadata instead of just a single field. However, the API is not currently built for that.

Tell me more what you want to achieve with it, maybe I do see a general use to that

Regards,
Garvin

[Don Chambers]

As mentioned, when just floating an image, you really do not need its height and width. If I did, I could use the smarty function html_image (with security off). The problem comes trying to add comment text below the image. Inserting an image with a comment directly into the entry body using the media library constructs html like this:

Code: Select all

<div id="wrapper">
    <div id="image_container">
        <img />
    </div>
    <div id="text_container>
        text
    </div>
</div>

If the wrapping div has no width, it will be 100% of whatever is available so text will not flow around it. I need to set that wrapper width equal to the image width, and the image width will vary depending on the image.

[garvinhicking]

Hi!

How about adding a second entyrproperty field "image_width" into which the user can enter the width he wants? You could default that to a fixed width in your template, or to the default thumbnail width of serendipity?

Also, javascript would be an option... using document.getElementById('blabla').width on the image name, you could use that to set your other element to the resulting width...

Regards,
Garvin

[Don Chambers]

Thanks Garvin - I think requiring the user to enter the image width is very cumbersome since each image COULD be different dimensions. I would rather avoid js since not everyone/every browser/every device would necessarily have that enabled.

At the moment we are inserting the image path into that epField, we have access to it. Perhaps epFields can be an array containing the path, width height??????? I'm no programmer here, I am just trying to get approximately the same functionality using an image from an extended field that we have when inserting directly into the entry body.

[garvinhicking]

Hi!

At the moment we are inserting the image path into that epField, we have access to it. Perhaps epFields can be an array containing the path, width height???????

That would destroy current application logic, and all ep-code would no longer work if we changed the way how images are inserted.

This is a tough one. I don't think it can be solved without a lot of coding.

Regards,
Garvin

[Don Chambers]

Yeah - this one is a stinker!!! But this is a real problem... the usefulness of inserting media into an epField is greatly minimized if we cannot get at some of that meta info..... which is right there in the database!!!

[judebert]

Right now, the imageComment block is inserted by the serendipity_editor.js code.

I can see the reasoning behind having functions like "generateImageBlock" or something, especially accessible from Smarty. But those don't exist at all right now.

[Don Chambers]

OK, so based on some of what Jude was saying, I find a function named serendipity_getImageData which also seems to use the function serendipity_getimagesize. Is it simply a matter of making one of these functions available to smarty?

[garvinhicking]

Hi!

No, there's currently no proper function that just needs to be passed to Smarty; you would need to create your very own wrapping function which will need to call multiple s9y PHP functions to first fetch the image data by the image name (instead of ID), then mangle the output data and fetch the metadate for each image, then a wrapper function that mangles with that return result and final a wrapper that returns the new HTML based on the serendipity JS function.

Regards,
Garvin

[Don Chambers]

Just to make sure something didn't get lost in translation here... all I need is an image's dimensions.... and it does not necessarily have to come from the media database (unless that is best). My tpl will take care of the html. I don't really need dimensions for a thumbnail, but I cannot help but wonder if what ever solution is found should allow that as well.

Now, is it really as complicated as you make it sound?

[garvinhicking]

Hi!

I'll look into making some smarty functions available for that. It might take some time, unless Judebert or Adam are quicker (which I'd love *g*).

Now, is it really as complicated as you make it sound?

I suppose this would keep me busy for at least 6-8 hours.

Regards,
Garvin

[judebert]

I'll see what I can do. All that's really needed at the moment appears to be an interface to serendipity_getimagesize().

I'll add some media database interface after that.

[ormus7577]

(I hope I'm not totally misunderstanding the topic)

Isn't that about that same as would be need to query the s9y image id of a given image via smarty (as talked about in here: http://board.s9y.org/viewtopic.php?t=12478)? How would that smarty function return the width and height value? Couldn't it return the s9y image id as well (to be used to resize the image)?

[Don Chambers]

For right now, Judebert was able to take advantage of an existing serendipity function and register that as a smarty function. I believe his intent is to possibly look into getting at the ID, and other fields, of the media database soon, but I don't want to put words into his mouth!!!