How to calculate article image aspect ratio?

Kjeld · 2021-02-06 10:28:04

I am working on a new design that changes slightly depending on whether an article image is landscape or portrait/square.

I have been going through the forum and the tag documentation, but can’t figure it out.

If the article image is landscape, I would like to use div style 1 (<div class="col-12 mx-auto">)
If the article image is portrait/square, I would like to use div style 2 (<div class="col-lg-10 col-xxl-8 mx-auto">)

I think I need an IF statement that calculates the article image aspect ratio and then delivers div style 1 when the aspect ratio is smaller than 1 and div style 2 when the aspect ratio is greater than or equal to 1

Is my assumption correct, or are there easier ways to do this?

If my assumption is correct, how do I make the IF statement with the calculation of the aspect ratio of the article image?

etc · 2021-02-06 11:13:31

Like this?

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

We could actually add ratio to valid type values.

Bloke · 2021-02-06 13:37:18

etc wrote #328573:

We could actually add ratio to valid type values.

I’d prefer size to match the image tag attribute that can filter by aspect ratio or dimensions. But ratio would work if the syntax for size is too cumbersome to replicate.

Sorry, we haven’t yet documented the size attribute but it might help in this situation. You could put something like this in your form that processes the article image:

<txp:if_article_image>
   <txp:images size="landscape" wraptag="div" class="col-12 mx-auto">
      <txp:image />
   </txp:images>
   <txp:images size="portrait" wraptag="div" class="col-lg-10 col-xxl-8 mx-auto">
      <txp:image />
   </txp:images>
</txp:if_article_image>

That will call <txp:images> twice using the article image field by default as the list of IDs (and if you want to specify this explicitly, you can supply id='<txp:custom_field name="article_image" />'). The first one filters the list by landscape images, the second by portrait.

If you only have one pic in the article image field, then only one of these tags will return a hit and will thus be rendered with the appropriate wraptag and class applied. If you have a mix as a gallery, each set will have the appropriate classes applied and you can further use break to subdivide the output.

Hope that helps.

EDIT: although that won’t help you with square images. You’d have to add a third <txp:images> tag for that scenario, which is a shame. Perhaps we could allow comma-separated lists of size values in future?

Last edited by Bloke (2021-02-06 13:40:48)

Kjeld · 2021-02-06 14:22:41

etc wrote #328573:

Like this?

<txp:evaluate query='<txp:image_info type="w" /> > <txp:image_info type="h" />'>...

We could actually add ratio to valid type values.

Thank you! I am going to try this.

Last edited by Kjeld (2021-02-06 14:29:36)

philwareham · 2021-02-06 14:26:08

We should also tie this in with the new CSS aspect-ratio declaration.

Kjeld · 2021-02-06 14:27:42

Bloke wrote #328575:

I’d prefer size to match the image tag attribute that can filter by aspect ratio or dimensions. But ratio would work if the syntax for size is too cumbersome to replicate.

Sorry, we haven’t yet documented the size attribute but it might help in this situation. You could put something like this in your form that processes the article image:

<txp:if_article_image>...

That will call <txp:images> twice using the article image field by default as the list of IDs (and if you want to specify this explicitly, you can supply id='<txp:custom_field name="article_image" />'). The first one filters the list by landscape images, the second by portrait.

If you only have one pic in the article image field, then only one of these tags will return a hit and will thus be rendered with the appropriate wraptag and class applied. If you have a mix as a gallery, each set will have the appropriate classes applied and you can further use break to subdivide the output.

Hope that helps.

EDIT: although that won’t help you with square images. You’d have to add a third <txp:images> tag for that scenario, which is a shame. Perhaps we could allow comma-separated lists of size values in future?

Oh, that looks like it would work, Bloke. Thanks !

I saw a forum post by you about the new attributes, but was indeed unable to find documentation on their usage. This helps enormously!

I could crop square images in such a way, that they would effectively become portrait size. That would take care of the limitation.

Bloke · 2021-02-06 14:33:31

philwareham wrote #328579:

We should also tie this in with the new CSS aspect-ratio declaration.

Ooooh, nice!

Kjeld wrote #328581:

I could crop square images in such a way, that they would effectively become portrait size.

Sure, thank you. I’d rather not have to place the burden on site maintainers though. So if we can find a way to help out in core, we’ll expose the ability to make more informed decisions regarding aspect ratio/dimensions.

Kjeld · 2021-02-06 14:49:50

philwareham wrote #328579:

We should also tie this in with the new CSS aspect-ratio declaration.

I have read several articles about the aspect-ratio tag, but haven’t yet been able to wrap my head around this…

etc · 2021-02-06 15:44:29

Bloke wrote #328575:

I’d prefer size to match the image tag attribute that can filter by aspect ratio or dimensions. But ratio would work if the syntax for size is too cumbersome to replicate.

What would we output as size value?

That will call <txp:images> twice using the article image field by default as the list of IDs (and if you want to specify this explicitly, you can supply id='<txp:custom_field name="article_image" />'). The first one filters the list by landscape images, the second by portrait.

This will unfortunately not respect the order of images ids, which can be important.

Bloke · 2021-02-06 16:02:54

etc wrote #328584:

What would we output as size value?

True, thinking about it, that naming doesn’t quite work. What would we output as ratio value? We have many options. The actual ratio as a percentage? As one divided by the other? A proper width:height ratio distilled to the lowest common denominator? The actual width:height ratio? The word landscape, portrait or square?

This will unfortunately not respect the order of images ids, which can be important.

Won’t it? Oh, I thought id always returned the images in the same order they were given? So if you had a mix of portrait and landscape images, the first tag would go through and pull out the IDs – in the order given in the article image field – of just those that are landscape, and iterate over them. Then the second call would only extract – again, in the order given – the ones that are portrait and present those as a group. Maybe it doesn’t. Maybe it mixes them up.

Judging from the OP, the way I expect Kjeld is using this is just to alter the class dependent on the aspect of the image attached to an article so it’ll never return output from both tags. One article, one image. The gallery scenario isn’t likely.

The trick above is basically the same as using two <txp:article /> tags, one with sticky and one with live status. The article can’t be both, in the same way the article image can’t be both landscape and portrait, so it’s a way of switching between the two using a single form to format the content dependent on its aspect ratio. For galleries, it probably won’t work well, and it’s not efficient, so if you want to specify a mix of landscape and portrait then you’ll need to take your approach in the form to switch on just the ratio to choose the class.

etc · 2021-02-06 16:23:31

Bloke wrote #328585:

What would we output as ratio value?

I thought of ROUND(w/h, 2), as in <txp:images /> numeric case. This is more precise than landscape/portrait.

I thought id always returned the images in the same order they were given?

I guess yes, but you’ll get first all landscape images, then portrait ones. What if they need to be mixed up, as you say?

Bloke · 2021-02-06 16:29:53

etc wrote #328586:

I thought of ROUND(w/h, 2), as in <txp:images /> numeric case.

Sure, makes sense. So to employ that value to make decisions people just check in a <txp:evaluate> tag if the value is <1 to indicate portrait. Seems reasonable.

but you’ll get first all landscape images, then portrait ones. What if they need to be mixed up, as you say?

Yeah, the hack won’t work in that case.

Textpattern CMS

Textpattern CMS support forum

#1 2021-02-06 10:28:04