Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

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

Kjeld
Member
From: Tokyo, Japan
Registered: 2005-02-05
Posts: 304
Website

How to calculate article image aspect ratio?

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.

  1. If the article image is landscape, I would like to use div style 1 (<div class="col-12 mx-auto">)
  2. 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?


JapaneseStreets.com – Japanese street fashion (mostly txp)
Old Photos of Japan – Japan between 1860 and 1940 (100% txp)
MeijiShowa – Stock photos of Japan between 1860 and 1940 (100% txp)

Offline

#2 2021-02-06 11:13:31

etc
Developer
Registered: 2010-11-11
Posts: 4,252
Website GitHub

Re: How to calculate article image aspect ratio?

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.

Offline

#3 2021-02-06 13:37:18

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 10,221
Website GitHub

Re: How to calculate article image aspect ratio?

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)


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

#4 2021-02-06 14:22:41

Kjeld
Member
From: Tokyo, Japan
Registered: 2005-02-05
Posts: 304
Website

Re: How to calculate article image aspect ratio?

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)


JapaneseStreets.com – Japanese street fashion (mostly txp)
Old Photos of Japan – Japan between 1860 and 1940 (100% txp)
MeijiShowa – Stock photos of Japan between 1860 and 1940 (100% txp)

Offline

#5 2021-02-06 14:26:08

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,501
Website GitHub Twitter

Re: How to calculate article image aspect ratio?

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

Offline

#6 2021-02-06 14:27:42

Kjeld
Member
From: Tokyo, Japan
Registered: 2005-02-05
Posts: 304
Website

Re: How to calculate article image aspect ratio?

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.


JapaneseStreets.com – Japanese street fashion (mostly txp)
Old Photos of Japan – Japan between 1860 and 1940 (100% txp)
MeijiShowa – Stock photos of Japan between 1860 and 1940 (100% txp)

Offline

#7 2021-02-06 14:33:31

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 10,221
Website GitHub

Re: How to calculate article image aspect ratio?

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.


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

#8 2021-02-06 14:49:50

Kjeld
Member
From: Tokyo, Japan
Registered: 2005-02-05
Posts: 304
Website

Re: How to calculate article image aspect ratio?

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…


JapaneseStreets.com – Japanese street fashion (mostly txp)
Old Photos of Japan – Japan between 1860 and 1940 (100% txp)
MeijiShowa – Stock photos of Japan between 1860 and 1940 (100% txp)

Offline

#9 2021-02-06 15:44:29

etc
Developer
Registered: 2010-11-11
Posts: 4,252
Website GitHub

Re: How to calculate article image aspect ratio?

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.

Offline

#10 2021-02-06 16:02:54

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 10,221
Website GitHub

Re: How to calculate article image aspect ratio?

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.


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

#11 2021-02-06 16:23:31

etc
Developer
Registered: 2010-11-11
Posts: 4,252
Website GitHub

Re: How to calculate article image aspect ratio?

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?

Offline

#12 2021-02-06 16:29:53

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 10,221
Website GitHub

Re: How to calculate article image aspect ratio?

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.


The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.

Txp Builders – finely-crafted code, design and Txp

Offline

Board footer

Powered by FluxBB