Dynamic image source not rescaled properly

Hello,

Not sure if I’m doing something incorrectly or what. But here is my issue:
Whenever I have an image container (we’ll call it Image A) that is using a static image, the image is stretched widthwise with the responsive page and maintains the aspect resolution without making the container taller.

However

When I try to do the same thing with a dynamic image, it just doesn’t work. It shrinks the image to the height of the container.

Thanks!

But I don’t want the height to stretch to fit. I just want the width to stretch to fit and otherwise the image be centered within the container.

I am having a problem with this as well.

When I have an image that is placed on the page it rescales fine. I have the image as a circle and it shows really well.

Here it is in display:

Here it is in editor:

However, when I have it in a repeating group and the dynamic image is being retrieved from the database it gets messed up.

Here is the display:

Here is the set up in editor:

I understand that it seems like the main reason is that I uploaded a static image which became a link to :

//s3.amazonaws.com/appforest_uf/f1557765165654x714303612590605400/Asian_Female.jpg

This link I believe is a cause of the image in the editor to have the width resized, however when I have this image not as part of a repeating group, I am able to resize the image width to be the correct dimension resulting in the appropriate display.

The problem is when it is part of a repeating group, the image is getting resized and I would obviously be unable to manually resize.

How can we get an image that is in a repeating group, that has a dynamic image reference to the database and is using a rounded design have the image displayed with the preset dimensions?

1 Like

I searched a bit more after replying to this thread and found a thread with the solution.

Read that post and the two below to find the answer.

Just to help a bit more; Here is the answer:

Can see in the display it is right on:

Imgix is built into bubble. No need for any plugin.

Just after inserting dynamic data reference select “More” to open another dynamic data choice box

Then when it opens the choices check the box to “Resize to fit dimensions by cropping”

Then you can have your circular photos look right

2 Likes

Hi @boston85719 How do you make this work for images which are not hosted on the application storage?
It only works when I upload images manually. But it doesn’t work when the user has to upload images from his profile page. Strange :thinking:

The problem is I don’t use Pictureuploader but another plugin. It only works when you use Picture Uploarder. So I’m stuck because I need that another plugin. I hope, I will find a solution.

sounds like the plugin you are using is not saving the image file as an image file…you may need to convert it to S3 to be able to use it as an image later.

1 Like

it seems to be working