Image List and Dropdown Selection

[William62]

Hell again,

I have a dropdown with 4 items and an image list with corresponding images.
Ive tried different done logic but it won’t work.
I think I need to create each image separately, is this correct?

Thanks,
William

[Max]

Hey @William62

Yep, if you want to show a corresponding image when choosing a specific dropdown option, images should be added separately

[William62]

Thanks,
I have my work cut out for me. LOL

Away we go, thanks.
William

[William62]

Oh, is there a way to size the image container for the models which are portrait separate from the hardware which is landscape, in the CSS?

Thank you,
William

[Max]

I am not sure if it’s feasible, but I’ll discuss it with the devs and update you tomorrow

[William62]

Thank you so much Max, if not, then I’ll work with it.

William

[Max]

Our devs will try to customize the widget this way. I’ll report back once I have any news

[William62]

I have to say Max, the support from Elfsight, you specifically, is remarkable. Thank you so very much man.

Cheers,
William

[Max]

Wow, thank you so much for such warm feedback - it’s what keeps us motivated to keep doing more

[William62]

Good morning Max,

Were the dev team able to figure out a way to have separate image container orientations of images?

Cheers,
William

[Max]

Hi there, @William62

Apologies for the delayed response!

I’ve requested an update from the dev team and will let you know once I have any news

[William62]

Thank you Max, no worries, Ive been busy with other things.

Cheers,
William

[Max]

Thank you for waiting!

To apply this customization, you should add one more CSS code:

[class*='MediaImage__Container-sc'] img {
  width: 100%!important;
  height: 100%!important;
  max-width: 150px;
  max-height: 270px;
}

We’ve also noticed that some images look like horizontal, but actually, they are vertical. On the right you can see a photo you’ve uploaded to the widget, and on the left there is a rendered image:

Please try to render these images (make them horizontal) using this tool and reupload them to your widget.

Please try it out and let me know if it worked