CMS Development

Kevin-C
Recognized Expert | Partner
Recognized Expert | Partner

Can hubl detect an images orientation?

SOLVE

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 Accepted solutions
ajchapman20
Solution
Top Contributor | Diamond Partner
Top Contributor | Diamond Partner

Can hubl detect an images orientation?

SOLVE

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

View solution in original post

ajchapman20
Solution
Top Contributor | Diamond Partner
Top Contributor | Diamond Partner

Can hubl detect an images orientation?

SOLVE

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

View solution in original post

5 Replies 5
sharonlicari
Community Manager
Community Manager

Can hubl detect an images orientation?

SOLVE

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
Recognized Expert | Partner
Recognized Expert | Partner

Can hubl detect an images orientation?

SOLVE

Thanks @sharonlicari !

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

Kevin Cornett - Sr. Solutions Architect @ BridgeRev
ajchapman20
Solution
Top Contributor | Diamond Partner
Top Contributor | Diamond Partner

Can hubl detect an images orientation?

SOLVE

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
Recognized Expert | Partner
Recognized Expert | Partner

Can hubl detect an images orientation?

SOLVE

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
Solution
Top Contributor | Diamond Partner
Top Contributor | Diamond Partner

Can hubl detect an images orientation?

SOLVE

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