How to Change the Background Color of an Image

[jon.richings]

When an jpeg doesn’t fill a fixed image shape (say a portrait in a landscape) there are normally white borders on either side. I found the Image Color Palette plugin that can detect the dominant color in the image and thought that would make the borders look a little more intentional. But I can’t figure out how to set the image’s background color. Background Color doesn’t seem to be exposed for images. Is there a trick here to get access to those kinds of things that would be easy with CSS?

[fayewatson]

Hi @jon.richings It may be possible to create that effect by placing the image in a group and changing that group’s background color? If this sounds like it would work for your use case could you temporarily set your app to public and share a link to the editor?

[jon.richings]

Sure Fay, thanks for the help:

Bubble Editor - wikireader

While you are there any tips on improving my first bubble would be much appreciated

[fayewatson]

My pleasure! Is this sort of the effect that you had in mind? (I didn’t want to change your page so I made this on a duplicate page called “test”!)

Preview:
https://wikireader.bubbleapps.io/version-test/test

Editor:

Bubble Editor - wikireader

[jon.richings]

OK, I think I see what you did:

Added a group just to be a parent to the image and gave the group’s background a colour.
Made the image rescale instead of stretch.

I’ll try hooking the Color Palette Plugin into the groups background color. I guess I can do that in the workflow when page loads? Or will that be too soon for the images to be loaded and the color palette to have worked them out? What other event could I use? I keep thinking there ought to be an API response event.

Thanks again Faye!

[fayewatson]

No problem at all! Yes, that’s exactly what I did! I just tried to use the Color Palette plugin to set the background color. I tried a few different ways to make sure the Color Palette chooses the dominant color of the image, but it looks like it’s only happening for some of the images at first, and then slowly, slowly finds the dominant colors for the other pictures.

I don’t think we can detect when the repeating group has completely loaded because the expression, “Repeating group is loading” evaluates to “not loading” at all times (even when the images are still loading). My other thought would be to set a custom event after 5 or 10 seconds which changes a custom state (i.e., RG loaded = yes), and then change the background color of the images using a conditional statement (i.e., “When RG loaded = yes, background color = Color Palette B’s dominant color”)? Not sure if that is the way to go either though

[jon.richings]

Just took a look at that. It slows loading down too doesn’t it? Well there might be another option. Did you notice that clicking on one of the pictures loaded it full screen? It’s really the full screen version that needs the background color, not so much the thumbnails. But, as you know, the rescaled thumbnails look much better than the stretched ones. So, even if we can’t have background colors for the thumbnails I’d still like to keep a non-distorted image.

So the question changes a now: do you know of a way to crop the thumbnails so they fill the image size without borders? This is the CSS I used very successfully in my previous experiment with conventional scripting:

.card img {
  height: 400px;
  object-fit: cover;
  object-position: 50% 10%;
}

Is there any way to implement object-fit and object-position inside a bubble?

What I really want to do is give the user the option of viewing the art full screen with either dominant color borders or cropped and vertically positioned (notice how the full-screen image scrolls with the mouse). Really I’m just looking for the most optimal way to present these paintings for both the thumbnails and fullscreen but with some options for the full screen version.

[fayewatson]

Yes, having that plugin in the RG cell definitely slowed things down for me too!

@jon.richings

So the question changes a now: do you know of a way to crop the thumbnails so they fill the image size without borders? This is the CSS I used very successfully in my previous experiment with conventional scripting:

Absolutely! I created a new page in the app called “test 2” for this:

Preview:

Bubble - Visual Programming

Editor:

Bubble Editor - wikireader

You can achieve that effect by removing the image element in the RG, and setting the image as the background of the group element:

(For some reason, when I used the :processed with Imgix on the image element, things looked distorted. When using the group element things resized in the correct way - not sure why there is a difference!)

The group elements display the images in this way:

When an image is clicked, that image is displayed in an image element within the Group Enlarged Image element when the ColorPalette’s Dominant Color is not empty (similar to what it was before but these workflows use ‘display data’ instead of custom states):

(This isn’t required but the Group Enlarged Image element is now inside a Floating Group element set to Float: nothing. This way when a User is viewing an enlarged image, the Repeating Group collapses in height to get rid of any extra scrolling. I’m not sure how to make sure the image and its container groups take up 100% of the screen, but I think this may be possible with a plugin or custom code)

This makes sure the background color changes depending on the image:

[jon.richings]

That works really well Faye, thankyou. I’m sure I’ll have other questions before I’m done with this, but you saved me a lot of time and furthered my education quite a bit at the same time

[fayewatson]

Awesome!! No problem at all, Jon! Feel free to let me know if I can help in any way! Also, if I find a working solution for setting the image to be full screen, I will definitely post back with more details!