Forum Academy Marketplace Showcase Pricing Features

Resize Image to Fit in Image Element

Hi,

I need to show an image using the Image Element that is 150x150 px,

Using a repeating group i’m displaying a list of items with a Name and an Image.
This items were previously submitted by the user, so images can by in landscape, portrait, square, etc…
I want to show each image in a 150x150 px Image Element.

This is all working.

But i need the Image to Fill the Image Element without changing the aspect ratio, but also filling the 150x150 px so that the listing looks good.
Ideally the image to be displayed could be resized to 150x or vice versa, and then cropped to “make” a 150x150 image to be displayed.

Am I making sense? :slight_smile:

Thank you.

5 Likes

I’ve come to a visual solution that i’m happy with using the tools available.

But my proposed idea above would be great for some use cases.

1 Like

(*Edit: Post 5 states how to resize using an image element)

Hello :slight_smile: Not 100% sure if this is what you need, but I think you can use a group for this and set the background to be a dynamic image, instead of using the image element. Then you can select ‘center the image’, and it will ‘resize’ the image to meet the dimensions of the group.

10 Likes

Hi!

That does exactly what I was looking for. Excellent.

Thank you! :grinning:

No problem! :smiley: I actually just realized the same effect can be accomplished using Imgix. It’s better to use an image element (instead of a group) because then Users can right click to save the image, view in a new tab, etc. With a group, a User won’t be able to do that.

After the dynamic data expression, select ‘:processed with Imgix’:

Then check “resize to fit the dimensions by cropping”.

And the last setting is run-mode rendering to “Stretch”:

*Make sure keep elements in proportion as page is resized is unchecked, and this should work in the same way as the group method! :slight_smile:

15 Likes

That’s the solution! Thank you.

1 Like

@fayewatson I don’t see the ‘:processed with Imgix’: available in my app; perhaps they removed the functionality?

1 Like

It’s a little tricky to select sometimes but it should show up after you have an image field in the dynamic expression. Sometimes “Search” comes up, which tries to have you enter a new expression, but right after you select the image field you should have the option to click again with the options.

For example, if you already have the expression “Current User’s Profile Picture”, click out then click back in - it won’t show up. But if you click the Profile Picture (image) field itself, re-select it - the dropdown (below) should appear.

3 Likes

That did it; thanks!

1 Like

I didn’t even know about Imgix - what an incredible tool to use! Thanks for the post!

1 Like

Is there a way to make this work when sending an image through an API to 3rd party app? …we need user submitted images to be 2:1 aspect ratio (and don’t want our users to even think about trying to resize their images).

It’s not obvious to me how to set imgix’s image size or aspect ratio when using an API.

I tried all the possible combinations of this feature but I can’t solve my issue.
In my case some images are always deformed \ bended and did not keep their aspect ration.
this is the result:

Do someone know how to solve the issue ?
These are my settings:

but also tried the other tecnique described, the one about creating a group with backgroup image centered, but I have been unlucky.
What Am I doing wrong ?

Thanks in advance

Hi @rattala :slight_smile: At first glance, I would suggest having the run-mode rendering be ‘rescale’ for this, in order to make sure the animal pics don’t become distorted or cut off. Then check ‘keep element proportions as the page is resized’ and select 100% for the max width, and around 60% for minimum width. That should make sure the images are in proportion, but the image element height itself remains the same from cell to cell. Here is an example of how it looks in preview mode:


*I just put the borders on the image to double-check that the height of the image remains the same

And the image settings are:

If that doesn’t do it, can you share a link to your app editor? (Can PM me if you prefer!) :slight_smile:

Hi and thanks for your time, very appreciated !
I tried but with no success :frowning:


Results is the same as before:

I’d like to share a link to my app editor but would not like to share it with all the world… How can I do without doing a mess with roles ?

You’re earning a lot of kudos with my desperate’s case :slight_smile:

No problem at all! :slight_smile: You can private message me a link to the editor (and temporarily set to Public by going to Settings --> General --> Application Rights: “Everyone Can Edit”)

Hi @fayewatson How did you solve the issue of @rattala? I have the same problem.

Thanks for your help.

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.

Hi @ulrich_00132 :slight_smile: I checked my messages, and @rattala ended up filing a bug report for this a long time ago. Which plugin are you using? Glad to take a look at your editor if that would be helpful! (Feel free to PM me!)

Hi @fayewatson Thanks for your help. @boston85719 helped me to figure it out. It’s because I didn’t ‘‘save to S3’’.

Thanks again :wink:

1 Like

Here is the solution: Croppie plug in its free

1 Like