I am building a website, where prints of my images could be purchased. I trying build a mock up room preview of that image. To do that, I have created a dynamic page with a an image of a room. I then display the image, the users have selected to purchase a print of, on the wall. Because, users can select an image size e.g., 12x18 inches, 16x24 inches etc.,
I’d like to be able to display the size of the image on the wall dynamically (based on what size the customer has selected. Please see the attached image). For example, I know that the couch’s length is say 1200px, and I would like to scale the image relative to that size. My questions is, if it is possible to take the selected print size metadata and pass it to a custom CSS, in order to adjust the size of the displayed image accordingly?
I’m not sure I fully understand your question, but are you trying to dynamically change the size of an image that’s hanging on the wall, right? If that’s the case, then I believe it’s possible by dynamically switching the CSS class associated with the image.
To do this, you would first need to create several CSS classes in your global.css file, each with different sizing properties. Then, you can write code to dynamically assign or switch between those classes as needed.
I’ll share a reference link that might be helpful!
Hi @onemoretime, thank you so much for letting me know that what I am trying to achieve is doable. @V-Blog has suggested using velo code only, which is not a bad idea, but I think I can use both CSS and Velo. I can create several custom CSS classes with different size options and use Velo code to dynamically apply a given CSS based on the size of the image. @onemoretime and @V-Blog thank you guys for all your help.
