Checking portrait/landscape mode for images

phiw13 · Yesterday 06:40:02

For a shortcode, I am trying to check if an image is in portrait mode (width < height) or landscape (w >= h), landscape can include square image. I can easily set up a variable to calculate the ratio, untested :-):

<txp:variable value='<txp:evaluate query="<txp:image_info type="w"/>/<txp:image_info type="h"/>" />" name="aspect-ratio" />

But then I am stuck – how to use that output? Thinking that <txp:evaluate query="……"/> would the way. The docs suggests using XPath functions, but I have no idea what would do.

In pseudo code: if output of the variable is <1 then use the portrait code, otherwise the landscape code path.

That code path would include both thumbnail-generation values and some class="" for layout purposes.

Or if there is another way, I am all ears!

TY.

jakob · Yesterday 07:04:49

You’re pretty much there with a few changes to your quoting and div rather than /:

<txp:variable value='<txp:evaluate query=''<txp:image_info type="w"/> div <txp:image_info type="h"/>'' />' name="aspect-ratio" />

<txp:evaluate query='<txp:variable name="aspect-ratio" /> > 1'>
    Landscape
<txp:else />
    Portrait
</txp:evaluate>

Use >= to include square format as landscape (or <1 as you suggested and turn around the logic).

You can do it in one step without the variable, too:

<txp:evaluate query='(<txp:image_info type="w"/> div <txp:image_info type="h"/>) > 1'>
    Landscape
<txp:else />
    Portrait
</txp:evaluate>

phiw13 · Yesterday 12:37:05

Thank you Jakob. That second variant is very interesting. I need to learn more about those mathematical queries.

Will play with those soon.

Bloke · Yesterday 15:10:01

How about from 4.9.2+, this:

<txp:evaluate query='"<txp:image_info type="aspect" />" = "portrait"'>
Portrait
<txp:else />
Landscape
</txp:evaluate>

The <txp:image_info type="aspect" /> tag outputs:

square if image database w = h
landscape if image database w > h
portrait if image database h > w

Can we improve on that?

giz · Yesterday 16:05:39

I regularly have to deal with square-ish images; they look square but aren’t. Often the visual proportion of the image is needed to inform a parent css grid.

Bloke · Yesterday 16:12:26

giz wrote #342615:

I regularly have to deal with square-ish images; they look square but aren’t.

Is this related to pixel density in one dimension only? Or are they a few pixels out in one dimension because the crop tool that was used rounded up or down? I’ve seen that, where I’ve cropped a photo to 500×500 in some tool then reopened it in the default OS viewing program and it reports 500×501.

phiw13 · Today 00:52:15

Bloke wrote #342614:

The <txp:image_info type="aspect" /> tag […]

That is certainly a valuable addition. Thanks for that.

giz wrote #342615:

I regularly have to deal with square-ish images;

The few times I had to deal with this, and some design imperative depended on square image (aspect-ratio:1/1) I used the image-editor to push them into submission.

With current thumbnail generation setting the crop attribute might be an alternative, now.

Past experience has more often been caption for one image being (much) longer than the other images. That was often problematic, before the times of CSS grid and subgrid, object-fit and object-position.

Textpattern CMS

Textpattern CMS support forum

#1 Yesterday 06:40:02