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.
(*Edit: Post 5 states how to resize using an image element)
Hello 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.
No problem! 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’:
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.
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:
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 ?
Hi @rattala 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:
No problem at all! 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”)
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 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!)
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.
