Checking portrait/landscape mode for images

phiw13 · 2026-02-15 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 · 2026-02-15 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 · 2026-02-15 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 · 2026-02-15 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 · 2026-02-15 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 · 2026-02-15 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 · 2026-02-16 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.

Bloke · 2026-02-16 09:52:18

Is there any mileage in being more verbose here? For example:

If image ratio is within, say, 5% of square, return near-square. Bonus points if the percentage is overrridable in config.php.
If image ratio is within 5% of 16×9, return landscape-wide.
If image ratio is within 5% of 9×16, return portrait-tall.
If width is greater than twice (3x??) height, return landscape-panorama.
If height is greater than twice (3x??) width, return portrait-panorama.

That way, if you only care about differentiating between landscape and portrait, or square-ish you can compare the return value to see if it contains the word landscape, portrait or square. But if you want to further split things or need to make decisions based on extreme examples, you can test the more specific return values exactly.

Is that useful? Thoughts? Any better names or ratios that would be helpful?

colak · 2026-02-16 16:18:24

Bloke wrote #342626:

Is there any mileage in being more verbose here? For example:

If image ratio is within, say, 5% of square, return near-square. Bonus points if the percentage is overrridable in config.php.

If image ratio is within 5% of 16×9, return landscape-wide.

If image ratio is within 5% of 9×16, return portrait-tall.

If width is greater than twice (3x??) height, return landscape-panorama.

If height is greater than twice (3x??) width, return portrait-panorama.

That way, if you only care about differentiating between landscape and portrait, or square-ish you can compare the return value to see if it contains the word landscape, portrait or square. But if you want to further split things or need to make decisions based on extreme examples, you can test the more specific return values exactly.

Is that useful? Thoughts? Any better names or ratios that would be helpful?

That would actually have an adverse effect on existing sites!

The latest txp rightly has the uploaded image dims visible. My suggestion is to highlight that, be it until the next major release for people to check if their images are the dimensions they expected.

I had similar problems with image dimensions but not what Stef reported (500×501). I think that variations exist because of resolutions but I am not sure.

Bloke · 2026-02-16 16:47:58

colak wrote #342632:

That would actually have an adverse effect on existing sites!

Please explain. Not sure I follow how adding the ability to output and test the value given from <txp:image_info type="aspect" /> affects existing sites.

giz · 2026-02-16 16:52:43

Bloke wrote #342616:

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?

They’re images which are a few pixels off square, in a context where the layout needs to adjust to suit each image proportion.

object-fit="cover"; and aspect-ratio: 1/1; can be used to force images to fit into their slot, but this won’t always work if a near-square image is interpreted as landscape or portrait.

Is there any mileage in being more verbose here? For example:

If image ratio is within, say, 5% of square, return near-square. Bonus points if the percentage is overrridable in config.php.

This would do the trick. The other proportion variants wouldn’t be as useful.

Bloke · 2026-02-16 19:35:29

giz wrote #342635:

[near-square] would do the trick. The other proportion variants wouldn’t be as useful.

Noted. And thanks for the clarification on my question.

phiw13 · Yesterday 23:36:58

Stef, your current implementation works very well for my needs. One thing I was wondering, could the evaluate query query='"<txp:image_info type="aspect" />" = "portrait"'> work to include square images? Like this for example?

<txp:evaluate query='"<txp:image_info type="aspect" />" = "portrait, square"'>

(although, I guess I could flip the logic on its head and evaluate on landscape, the txp:else would then cover both square and portrait images).

Your other conditions all seem a little bit of overloaded and not all that useful. The optional configuration via config.php seems a little tricky: “today” I think ”If image ratio is within 10% of 16×9”, and set as such in the config file.Then next needs change and the percentage goes down to 5%, messing up a little older pages,… and so on.

Bloke · Today 07:17:33

Not sure if XPath 1.0 has a ‘contains’ or ‘in this list’ feature offhand. It probably does, in which case you could change the equality test to something else.

Great feedback about the other proposals, thank you. That’s all good. I’ll leave it as it is now then.

etc · Today 10:19:21

If implemented, should not aspect be called size, for consistency with <txp:image />? Images is not my area, but I would limit aspect values to those of size. Maths can do the rest.

Textpattern CMS

Textpattern CMS support forum

#1 2026-02-15 06:40:02