CMS Development

Kevin-C
名誉エキスパート | Solutions Partner
名誉エキスパート | Solutions Partner

Can hubl detect an images orientation?

解決

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件の承認済みベストアンサー
ajchapman20
解決策
トップ投稿者 | Diamond Partner
トップ投稿者 | Diamond Partner

Can hubl detect an images orientation?

解決

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

元の投稿で解決策を見る

ajchapman20
解決策
トップ投稿者 | Diamond Partner
トップ投稿者 | Diamond Partner

Can hubl detect an images orientation?

解決

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

元の投稿で解決策を見る

5件の返信
sharonlicari
コミュニティーマネージャー
コミュニティーマネージャー

Can hubl detect an images orientation?

解決

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
名誉エキスパート | Solutions Partner
名誉エキスパート | Solutions Partner

Can hubl detect an images orientation?

解決

Thanks @sharonlicari !

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

Kevin Cornett - Sr. Solutions Architect @ BridgeRev
ajchapman20
解決策
トップ投稿者 | Diamond Partner
トップ投稿者 | Diamond Partner

Can hubl detect an images orientation?

解決

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
名誉エキスパート | Solutions Partner
名誉エキスパート | Solutions Partner

Can hubl detect an images orientation?

解決

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
解決策
トップ投稿者 | Diamond Partner
トップ投稿者 | Diamond Partner

Can hubl detect an images orientation?

解決

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