Display inline height and width of resized image

nemoorange · 2009-12-20 15:23:54

I’m working with Zander to get jQuery Masonry working. We’re running into the image problem, where in order for the jQuery plugin to work, all new images should have their size attributes set. i.e.:

<img src="image.jpg" width="270' height="600" />

He’s using the TXP Tip resize image on the fly so the images get scaled down properly, but I’m not sure how to get the actual tag attributes to set. Looks like lam_dynamic_image does the resize, but still not image attributes.

upm_image can display the full height and full width, but not the resized height.

I feel like this is an easy thing to fix via PHP, but between the levels of abstraction with the upm_image plugin and the SIR script, I can’t get to it.

THE BLUE DRAGON · 2009-12-20 21:57:10

You can use the smd_gallery plugin to get the full and/or thumbnail image size info and use it as you want:
{width} {height} {thumbwidth} {thumbheight}

rathersplendid · 2009-12-21 14:36:17

Just to chime in, it is my blog site that David is talking about. I would really appreciate the help.

@Gil, I don’t think that your solution will suffice because I am not using the full of thumbnail sized images, but dynamically resized images – please correct me if I am wrong though.

As David mentions on his Masonry primer page, I should probably use getimagesize() to work out the dimensions, but I don’t know how..

My upm_image form looks like this:

<img src="<txp:site_url />image.php?width=270&amp;quality=85&amp;image=<txp:upm_img_full_url />" alt="<txp:title />" class="siteImg"/>

and I reckon I need to use getimagesize() somehow and have a new form, something like this:

<img src="<txp:site_url />image.php?width=270&amp;quality=85&amp;image=<txp:upm_img_full_url />" alt="<txp:title />" width="<?php getimagewidth /> height="<?php getimageheight /> class="siteImg"/>

but my php is virtually non-existent hence the reason why I need assistance.

Last edited by rathersplendid (2009-12-28 14:32:58)

Gocom · 2009-12-21 18:21:37

and I reckon I need to use getimagesize() somehow and have a new form, something like this:
<img src=”<txp:site_url />image.php?width=270&quality=85&image=<txp:upm_img_full_url />” alt=”<txp:title />” width=”<?php getimagewidth /> height=”<?php getimageheight /> class=“siteImg”/>

Use list to get the info out of getimagesize. Something like for example:

$path = parse('<txp:site_url />image.php?width=270&quality=85&image=<txp:upm_img_full_url />');
list($width, $height, $type, $attr) = getimagesize($path);

And because we probably want to use these values in our code freely, with out needing to call getimagesize() again, it’s probably better to place the values inside <txp:variable />s:

variable(array(
	'name' => 'width',
	'value' => $width
));
variable(array(
	'name' => 'height',
	'value' => $height
));

After that we can call the info by:

[...]width="<txp:variable name="width" />"[...]
[...]height="<txp:variable name="height" />"[...]

rathersplendid · 2009-12-21 18:37:34

Jukka, this looks amazing, thank you, but won’t the variable height/weight values be set once at the top of the page, or will all the code that you have supplied be outputted in each item of my article list? For instance, if the height of the first image is 250 and width is 300; and the second image has different dimensions, won’t the variable values be 250 and 300?

I’m just not sure how I would implement this..

candyman · 2009-12-21 20:33:08

Zander’s blog in unbelievable: the first site that is looking good on computer and iPhone without specific css for the mobile device. The best use of the magic Masonry that I’ve seen until today.

Sorry for the OT.

Gocom · 2009-12-22 03:58:46

I’m just not sure how I would implement this..

of course you have to get dimensions for every image…

Last edited by Gocom (2009-12-22 04:00:59)

rathersplendid · 2009-12-28 14:31:31

Thanks Gocom, I have the site working as expected now, but could you check to make sure this is correct?

My upm_image form is now:

<txp:php>
    $path = parse('<txp:site_url />image.php?width=270&quality=85&image=<txp:upm_img_full_url />');
    list($width, $height, $type, $attr) = getimagesize($path);
        variable(array(
            'name' => 'width',
            'value' => $width
        ));
        variable(array(
            'name' => 'height',
            'value' => $height
        ));
</txp:php>
<img src="<txp:site_url />image.php?width=270&amp;quality=85&amp;image=<txp:upm_img_full_url />" alt="<txp:title />" class="siteImg" height="<txp:variable name="height" />" width="<txp:variable name="width" />"/>

Have a look at my site at: rathersplendid.net/

nemoorange · 2009-12-30 11:52:12

So happy to see this up and running. Thanks so much Gocom and Zander for making it happen

rathersplendid · 2009-12-30 12:01:27

Like I said on Twitter , thank you for Masonry and your help in getting my site up and running.

Textpattern CMS

Textpattern CMS support forum

#1 2009-12-20 15:23:54

Display inline height and width of resized image

#2 2009-12-20 21:57:10

Re: Display inline height and width of resized image

#3 2009-12-21 14:36:17

Re: Display inline height and width of resized image

#4 2009-12-21 18:21:37

Re: Display inline height and width of resized image

#5 2009-12-21 18:37:34

Re: Display inline height and width of resized image

#6 2009-12-21 20:33:08

Re: Display inline height and width of resized image

#7 2009-12-22 03:58:46

Re: Display inline height and width of resized image

#8 2009-12-28 14:31:31

Re: Display inline height and width of resized image

#9 2009-12-30 11:52:12

Re: Display inline height and width of resized image

#10 2009-12-30 12:01:27

Re: Display inline height and width of resized image

Board footer