Mar 13, 202011:55 AM - edited Mar 18, 202011:05 AM
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?
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 animage moduleor acustom imagethat uses animage field.
You can pull the height and width from the module using the page'sdeveloper info and then use a series ofif statements usingcomparison 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.
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 animage moduleor acustom imagethat uses animage field.
You can pull the height and width from the module using the page'sdeveloper info and then use a series ofif statements usingcomparison 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.