Testing image dimensions

gomedia · 2009-03-19 22:42:55

Hi everyone,

Are there any tags or plugins that’ll test the dimensions of an image?

I’m setting up a page with images that are variously “tall”, “long”, “square” etc & want to output specific markup depending on the shape of the image. The method I’m using at the moment is to hard-code the image shape in a custom_field & then use <txp:if_custom_field>.

maniqui · 2009-03-19 22:49:11

smd_if + smd_gallery or upm_image are the way to go.

els · 2009-03-19 22:51:29

gomedia wrote:

The method I’m using at the moment is to hard-code the image shape in a custom_field & then use <txp:if_custom_field>.

That’s exactly the method I used recently, but I too would like to hear if there are other solutions.

the_ghost · 2009-03-19 22:57:05

Notice that currently (correct me if i’m wrong) you can check dimensions only for “big” image, not thumbnail. And of course you can check sizes with smd_if + smd_gallery.

Another way – is using javascript :)

maniqui · 2009-03-19 23:03:33

This is just the basic you could with smd_if. Then, the infinite is the limit.

<txp:smd_gallery>
  <smd_if field="{width} operator="gt" value="{height}">
    <!-- portrait-shaped image -->
  <txp:else />
    <smd_if field="{width} operator="eq" value="{height}">
      <!-- square image -->
    <txp:else />
        <!-- tall image -->
    </txp:smd_if>
  </txp:smd_if>
</txp:smd_gallery>

But you could go further, if you add adi_calc (plugin calculator for txp:variable). You assign width and height each one to a txp:variable.
Then you can divide width by height, and depending on the result, do many different things, like outputting different classes (“tall”, “long”, “squared”, etc).

And that’s just the beginning.

Last edited by maniqui (2009-03-19 23:04:10)

gomedia · 2009-03-19 23:22:38

Thanks. Looks like there’re some great possibilities.

I’ll have a play & report back.

Cheers,

Adi

maniqui · 2009-03-19 23:23:59

Hahahaha, now I notice that I suggested adi_calc (and described its functionality) to its plugin author… Doh!

jm · 2009-03-19 23:35:56

<txp:php>
$imgPath = upm_article_image(array(), upm_img_full_url());
list($w, $h, $type, $attr) = getimagesize($imgPath);
if ($w > $h)
    echo 'landscape';
elseif ($w < $h)
    echo 'portrait';
else
    echo 'square';
</txp:php>

gomedia · 2009-03-20 00:02:20

maniqui wrote:

Hahahaha, now I notice that I suggested adi_calc (and described its functionality) to its plugin author… Doh!

You made it sound so good – I almost wanted to go and check it out anyway! ;-)

gomedia · 2009-03-20 00:05:37

jm wrote:

<txp:php>
$imgPath = upm_article_image(array(), upm_img_full_url());
list($w, $h, $type, $attr) = getimagesize($imgPath);
if ($w > $h)
    echo 'landscape';
elseif ($w < $h)
    echo 'portrait';
else
    echo 'square';
</txp:php>

Very tasty, thanks.

gomedia · 2009-03-22 10:46:46

Just for the record, this is what I went with in the article form:

<!-- set variable to image height -->
<txp:variable name="height" value='<txp:upm_article_image><txp:upm_img_full_height /></txp:upm_article_image>' />

<!-- set variable to image width -->
<txp:variable name="width" value='<txp:upm_article_image><txp:upm_img_full_width /></txp:upm_article_image>' />

<!-- default layout is "standard" -->
<txp:variable name="format" value="standard" />

<!-- if image width < height set layout to "tall" -->
<txp:smd_if field="txpvar:width" operator="lt" value="txpvar:height">
		<txp:variable name="format" value="tall" />
</txp:smd_if>

Last edited by gomedia (2009-03-22 11:07:12)

mrdale · 2009-03-22 16:47:10

Hilarious!

I just came up with a solution to the same problem with a hacked version of hak_article_image, txp:variable and smd_if.

Basically it wraps an image in a div that has a class of class="wide|square|tall left|right" The left or right part is used to take a left-margin of a floated image, and changes the float to the left, if the image is wider than a certain value.

I added two functions to hack_article_image to output width and height inside an image form
I assigned these values to variables
I used a first smd_if to test whether the image was wide, then trigger a second smd_if inside an else
I used a second smd_if to test whether the image was square or tall
Then I added one more conditional to test whether the width is greater than a given value

I’d wager that mr.joon may update the plugin to do something like this anyway, so it’s probably only useful as a learning example.

Here’s the article_image tag

<txp:hak_article_image form="image-dimensions" />

Here’s the hacks for hak_article_image (Just add these to the bottom of the plugin)

function hak_image_h($atts) {
	global $hak_thisimage;

	extract(lAtts(array(
		'name' => '',
		'id' => '',
		'break' => '',
		'wraptag' => '',
		'breakclass' => '',
		'class' => '',
		'attributes' => '',
		), $atts));

	if (!empty($hak_thisimage["h"])) {
		$out[] = $hak_thisimage["h"];
		return doWrap($out, $wraptag, $break, $class, $breakclass, $attributes);
	}
}

function hak_image_w($atts) {
	global $hak_thisimage;

	extract(lAtts(array(
		'name' => '',
		'id' => '',
		'break' => '',
		'wraptag' => '',
		'breakclass' => '',
		'class' => '',
		'attributes' => '',
		), $atts));

	if (!empty($hak_thisimage["w"])) {
		$out[] = $hak_thisimage["w"];
		return doWrap($out, $wraptag, $break, $class, $breakclass, $attributes);
	}
}

Here’s the custom image form (image-dimensions)

<txp:variable name="width" value='<txp:hak_image_w />' />
<txp:variable name="height" value='<txp:hak_image_h />' />
<div class="storyImage 
<txp:smd_if field="txpvar:width" operator="gt" value='<txp:variable name="height"/>'>
wide
  <txp:else/>
    <txp:smd_if field="txpvar:width" operator="eq" value='<txp:variable name="height"/>'>
square
    <txp:else/>
tall    
</txp:smd_if>
</txp:smd_if>
<txp:smd_if field="txpvar:width" operator="gt" value='375'> left"/><txp:else/> right"/></txp:smd_if>
<txp:hak_image />
</div>

Last edited by mrdale (2009-03-22 16:48:44)

Textpattern CMS

Textpattern CMS support forum

#1 2009-03-19 22:42:55