Let's talk about image manipulation. Now, Bubble provides a real straightforward and easy way for you to upload your own static images. For instance, for your landing page and for your users to upload their own images as well.

Let's take a look!

We can see that we have an image placeholder up here on the left where our logo should be, and I also want to improve the design of the landing page by adding an image in this hero section as well.

Let's deal with the logo first. So over here in the property editor, I can see that we have static image. I’m going to click on the image so that I can upload my own logo. Okay, I've uploaded my own logo and let's look at some image attributes.

First of all, what happened when I uploaded this image? Well, if we head over to the Data tab, then go across your file manager and here is the image that I just uploaded.

Okay, let’s have a look at the layout of this image. So I can see that the width is 48 and the height os 48. I only make this a bit smaller, 40 by 40. Yeah, that looks a bit better. I also want to add some roundness to it, instead of being a square, let's make it a circle.

So what I’m gonna do is head down on the Appearance tab to the border style and I can currently see a roundness of four. Now, if I want a perfect circle, my roundness needs to be at least half the height and I just set the height and the width to 40 pixels so I need a minimum of 20. And there we have it. There is a beautiful logo all set up correctly.

Now I’ve already gone ahead of time and dragged an image into this hero section and just did a but of layout and spacing work.

Let’s have a look to see what it looks like. So now I moved this section to the left-hand side and here is the image on the right-hand side.

Let's go to the Layout tab, first of all, let’s have a look at the properties here. So I've currently set a max width of 640. Now, I uploaded this image as a static image. I was in charge of the image, not my users and, therefore, made sure that before uploading the image that I had an aspect ratio of 3:2, and just personal preference.

When you do upload an image, Bubble actually detects this for you, so if you check the box that says keep element aspect ratio fixed, and Bubble will automatically add aspect ratio of the image. And this is important because of responsive design and this is really important because you want to fix the aspect ratio so the image can scale up and scale down while keeping its proportions.

Okay, but let’s have a look at these properties here. So max width 640 so what I’m instructing Bubble to do is when a user is viewing the image on the page, that the max width this image can expand is 640. I could say 480, and I can see that this has shrunk a little bit. I can shrink it even more if I’d like to 240 and it's minute.

I’m gonna go back to 640. That is a better representation of the layout that I'm after. I can see some of the attributes here. I can see a slight shadow around this image like a drop shadow. So if we head back and have a look at the Appearance tab, scroll down to the bottom, I’ve set a shadow style of outset and this allows me to then set some horizontal and vertical offsets, blur radius, spread radius, as well as the color. So the first thing I usually do is set the color to jet black and then I change it to 7% and that’s just a personal design choice, but you can go ahead and play with these attributes yourself!
​