Is there a way to customize the background color of the Product Gallery widget?

Options
josheewa
josheewa Member Posts: 5 ✭
in Developer APIs

After reading the api reference for the widget, it doesn't seem like there is an option, but I wanted to check since some other widgets do in fact have that option.

Tagged:

Answers

  • Tamara
    Tamara Member, Cloudinary Staff Posts: 97
    Options

    Hi @josheewa

    The gallery itself doesn't have a background, images may have a background (but that's not related to the gallery itself... that depends on the image). You can add the background you want in the CSS file of your project, for example: https://jsfiddle.net/nrdw9ezu/

    Best regards,

    Tamara

  • josheewa
    josheewa Member Posts: 5 ✭
    Options
    https://community.cloudinary.com/discussion/comment/943#Comment_943

    Thanks for the reply. I do have an applied background that is black, but no matter what element I apply the background color to, the gallery itself doesn't change. I originally assumed that it would work like that but I haven't had any luck yet. I've tried re-declaring a black background for the container divs, the main and body, and the only thing I've seen is I can make the whole gallery black, since the div on top just covers everything if I make all divs have a black background.

    If it changes anything, my project is being built with React/Next.js.

  • Tamara
    Tamara Member, Cloudinary Staff Posts: 97
    Options

    Hi @josheewa

    Can you please create a small project in JSfiddle or any code editor that can run this independently to re-create this? or share your code here?

    By the way, we have a beautiful demo website, maybe what you are looking for can be found there:

    https://demo.cloudinary.com/product-gallery/?editor

    Best,

    Tamara

  • josheewa
    josheewa Member Posts: 5 ✭
    Options

    Hi @Tamara

    I tried for a while but wasn't able to figure out how to put it on JSFiddle. I made a new Github repo with the product gallery part isolated (https://github.com/josheewa/product-gallery-test).

    I've also deployed it to Vercel in case that helps: https://product-gallery-test.vercel.app/

    Thanks.

  • Tamara
    Tamara Member, Cloudinary Staff Posts: 97
    Options

    Hi @josheewa

    Both links return 404 or don't exist 🤔

    -Tamara

  • josheewa
    josheewa Member Posts: 5 ✭
    Options
    https://community.cloudinary.com/discussion/comment/958#Comment_958

    That's really weird, I just tried again, and both work for me (regular browsing and incognito). I thought the Github might be private for some reason, but I checked and it isn't. What does each one say specifically?

  • Tamara
    Tamara Member, Cloudinary Staff Posts: 97
    Options

    Hi @josheewa,

    Your code looks great, the images that are part of this gallery widget are using c_pad that pads them with a white background (the b_rgb:FFFFFF ), if you want to change the background to black, try changing the background to this: b_black instead of the b_rgb:FFFFFF .

    Please let me know if you have any further questions,

    Best,

    Tamara

  • josheewa
    josheewa Member Posts: 5 ✭
    Options
    https://community.cloudinary.com/discussion/comment/963#Comment_963

    Ohh that makes a lot of sense. I was able to add a transformation to each image with both b_black and b_transparent, and that fully solves the issue.

    Thank you so much for the assistance,

    Joshua

Categories