CMS Development

Kevin-C
Trendsetter/-in | Partner
Trendsetter/-in | Partner

Can hubl detect an images orientation?

lösung

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?

Kevin Cornett - Sr. Solutions Architect @ BridgeRev
2 Akzeptierte Lösungen
ajchapman20
Lösung
Stratege/Strategin | Diamond Partner
Stratege/Strategin | Diamond Partner

Can hubl detect an images orientation?

lösung

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.

Alex Chapman | Inbound marketing Expert

Lösung in ursprünglichem Beitrag anzeigen

ajchapman20
Lösung
Stratege/Strategin | Diamond Partner
Stratege/Strategin | Diamond Partner

Can hubl detect an images orientation?

lösung

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

 

The Developer info pdev-info.pngage shows what objects are in your page.

Alex Chapman | Inbound marketing Expert

Lösung in ursprünglichem Beitrag anzeigen

5 Antworten
sharonlicari
Community-Manager/-in
Community-Manager/-in

Can hubl detect an images orientation?

lösung

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


Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !




Kevin-C
Trendsetter/-in | Partner
Trendsetter/-in | Partner

Can hubl detect an images orientation?

lösung

Thanks @sharonlicari !

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

Kevin Cornett - Sr. Solutions Architect @ BridgeRev
ajchapman20
Lösung
Stratege/Strategin | Diamond Partner
Stratege/Strategin | Diamond Partner

Can hubl detect an images orientation?

lösung

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.

Alex Chapman | Inbound marketing Expert
Kevin-C
Trendsetter/-in | Partner
Trendsetter/-in | Partner

Can hubl detect an images orientation?

lösung

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.

Kevin Cornett - Sr. Solutions Architect @ BridgeRev
ajchapman20
Lösung
Stratege/Strategin | Diamond Partner
Stratege/Strategin | Diamond Partner

Can hubl detect an images orientation?

lösung

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

 

The Developer info pdev-info.pngage shows what objects are in your page.

Alex Chapman | Inbound marketing Expert