I have an image that I don’t want to crop at the top. I use the feature in webflow and unbounce regularly that allow me to pin an image to the top, top right etc so as the image stretches it only crops the bottom of the image. Bubble only centres vertically but I want it to 'align" to the top in this case so it doesn’t crop her face on a widescreen.
I’ve looked at various plugins but nothing I can find does this. Is there any way I can add these as custom code or CSS in bubble to achieve this?
There are plugins that will crop images for you on upload…namely croppie
Have you tired using the processed with imgix?
Hi There, thanks fr your suggestion, I will try but I don’t think that will achieve what I need.
I mentioned two ideas, both should work.
The croppie would require you or users to upload images and crop them according to the ratio of the image element on page they will be displayed in.
The second suggestion was to use the processed with imgix…there are multiple settings on there that should allow you to achieve your goal without cropping on upload.
Otherwise, I’m not sure there is anything else that is able to “detect” where the face in an image is.
Also, if you are using that particular image for one static image element ( static, meaning doesn’t change and users will not upload images to use ) then the processed with imgix or croppie would definitely work.
Give them a try and see if it does what you are asking about.
Hi There, thanks again for your suggestion, I looked at both and croppie may work however I think I may not have articulated well enough what I’m trying to do. It is very easily achieved in weblow or just plain css. I’m not trying to use face detection or anything fancy like that, I simply want the top of the image pinned to the top of the frame and the bottom of the image to crop so that (in this case) the woman’s head is not cropped out as I expand the page to a very wide position.
I may be able to use croppie as a workaround but this is a pretty fundamental responsive control that shouldn’t require a plugin. I’m definitely finding bubble frustrating in that way.
I don’t there is a way to do this ‘natively’, unfortunately. You can add an ID and some custom CSS ( background-position: top; background-size: cover;) to the Group in Bubble – that will do exactly what you want. 
Hey Robert, I agree. I have hired a developer to write a plugin to do all of the CSS commands to an image so that it is achievable, I’m sure others will be interested when it’s completed. No other plugin does this currently. It really should be native in bubble. I’m becoming a bit wary of this platform.
Are you able to tell me exactly how to do this? add an ID and some custom CSS ( background-position: top; background-size: cover; ) to the Group in Bubble
Don’t be…in the two years I have been using bubble I have had moments where I was banging my head on the table, pulling my hair out trying to explain why it wasn’t easier to do what I wanted. In most every case, it was me, not bubble, and figured out how to achieve the functionality I wanted. In other cases, there is always the ability to use CSS, Java Script or HTML to do things bubble isn’t capable of natively.
Regardless, don’t give up on bubble because an image you want to use isn’t getting cropped natively. Also, if you haven’t used other web platforms for adding images, like for adding images to google businesses or facebook business pages or other large platforms like OTAs etc. they all require the user to crop an image on upload for the banner image…it’s just kind of necessary.
Fo anyone that is interested I have worked out how to make images behave exactly as I want using any CSS command. I used this method on a group: https://www.youtube.com/watch?v=q-stL9rM5P0
And here is the CSS:
#homeheaderimage { background-repeat: no-repeat; background-image: url( Search for Imagess's Image's URL); background-size: cover, contain; background-position: right 35% top 20%;; }…and this was the excellent reference I used for CSS to get the image doing exactly as I wanted.
the website is https://powersofattorney.com/ and still under development but you can see the home image behaviour.
That is awesome stuff. Could you provide a screen shot of the set up in your editor? For me personally I usually fail at implementing code unless I see it in a bubble element, and this is great stuff.
