Can hubl detect an images orientation?

[Kevin-C]

Hey everyone,

Working through a solution where I need to add classes or label images, populated via a hubdb table, based on their oriention i.e. landscape(w>h), portrait(w<h), and square(w=h). Due to the load speeds vs our user's expectations, a JS solution with a loading screen doesn't feel like the best solution. Also we don't use a loading screen pattern anywhere else on the site and I'd like to avoid that addition.

Currently I have a small poc using jQ that listens for the images to load and then measures and assign classes. Just not very elegant at the moment.

I haven't seen anything in the documentation, though i'm sure I could look  a little harder.

And thats where my question stems from. Can hubl do something similar? Or has anyone solved a similar problem?

[ajchapman20 · Accepted solution]

Hi @Kevin-C ,

Let me know if this is what you are looking for.  You can find the orientation of images, the height to width ratio of each image, for any image inserted into an image module or a custom image that uses an image field.

You can pull the height and width from the module using the page's developer info and then use a series of if statements using comparison operators to add classes based on the ratios of the height and width of each image.

This could be most efficiently done in a custom image module that uses an image field. It will not provide the height and width of images inserted into rich text modules.

It's also possible that css from the template's stylesheet overrides the width and height in the module fields.

The X and Y position cannot be retrieved using HubL and a JavaScript solution would be better to accomplish that.

[sharonlicari]

Hey @Kevin-C 

I am wondering if you still need assistance on this matter. If so,

Hey @Dennis-DWFB @Anton @ajchapman20 what would you advise? 

Thanks 

Sharon

[Kevin-C]

Thanks @sharonlicari !

Yes, any input from the community is more than welcome!

[ajchapman20 · Accepted solution]

Hi @Kevin-C ,

Let me know if this is what you are looking for.  You can find the orientation of images, the height to width ratio of each image, for any image inserted into an image module or a custom image that uses an image field.

You can pull the height and width from the module using the page's developer info and then use a series of if statements using comparison operators to add classes based on the ratios of the height and width of each image.

This could be most efficiently done in a custom image module that uses an image field. It will not provide the height and width of images inserted into rich text modules.

It's also possible that css from the template's stylesheet overrides the width and height in the module fields.

The X and Y position cannot be retrieved using HubL and a JavaScript solution would be better to accomplish that.

[Kevin-C]

Great insight @ajchapman20 !!

I'm aware of how to make the comparision, what I'm struggling with is where to retrieve the dimensions.

From your responce I'm imaging that I can reference a property on the image module. Hypothetically something like this {{ image_module_img.height }}.

I haven't had the time to dive into this solution TBH. It might be rather obvious once i get in there.

[ajchapman20 · Accepted solution]

Yes, you can access the image's properties using the Dot Notation like JavaScript objects. Please see attached.

The Developer info page shows what objects are in your page.