Avoid overlay on thumbnails in image carrousel

Improntia
Improntia Member Posts: 3 ✭
edited August 23 in Developer APIs

Hello,

We are using API to buil the image carrousel in our site. We want to add an image as an overlay, but this overlay should be visible in the big image, and not in the thumbnails.

How can we accomplish that?

Thank you.

Tagged:

Answers

  • Tom
    Tom Member, Cloudinary Staff Posts: 108

    Hi @Improntia ,

    Thanks for reaching out.

    Can you please clarify which API you are using and how?

    Also, please send us examples of what you have right now and I can try come up with a solution.

    I look forward to your response. 

    Kind Regards,

    Thomas

  • Improntia
    Improntia Member Posts: 3 ✭

    Hello Tom, thank you for your reply.

    Basically, I need to show images to my client, based on the status of its project. For that purpose we use the product gallery api (the image player with carrousel).

    So if the project is still unpaid by client, we have to show images in a "preview" mode, so images have to be resized, low res, and with a watermark (image overlay).

    And if the project has been paid, we show images in full high res (no size transformation) and without any watermark (and depending on other situations client may choose to download these images with his logo as overlay as well).

    The problem is that when using the carrousel, if image has an overlay (watermark, when project is unpaid), the player shows the big image OK, but the thumbnails of the carrousel are generated with the watermarks as well, and that is the problem: whatermark is applied not proportionally to the size of the thumbnail but a lot bigger.

    What I think is that we should be able to apply watermark for the big image that is shown, and NOT applied on the thumbnails.

    This is what I see regarding the thumbnails:

    image.png
    image.png

    And this is the pice of code where we setup everything up:

    image.png
    image.png

    Could you please help me out regarding image overlay relative size? What options so we have and how/where to setup that?

    Thank you.

  • Tom
    Tom Member, Cloudinary Staff Posts: 108

    Hi @Improntia ,

    Thanks for replying.

    It's not possible to specify different images for thumbnails as they they use the same public_id as the main miage.

    You do have the option to use carouselStyle: "indicators" for unpaid previews so that the thumbnails appear as dots.

    Could you please confirm how you are applying the watermarks? Is it via the transformations in the gallery widget config itself?

    If you can also send us an example link showing your current implementation then we can recommend possible solutions.

    I look forward to your response. 

    Kind Regards,

    Thomas

Categories