I have images that are uploaded to my app that are screenshots from a phone, so they are 9:16 aspect ratio. I’m trying to figure out a simple way to have the entire image be viewable, I’m open to a few different solutions for this.
Ideally I’d love for my gallery to be in the 9:16 aspect ratio. I saw something about being able to use custom CSS to make this happen, not sure if that is a simple piece of code to make it happen. I tried getting chatGPT to write a little CSS for that, but didn’t have much luck making it work.
The other option I’m open to is just making it so that my gallery is clickable, so if you want to view the full image, you click the image and it pops out. You used to be able to do this in the classic app, so wondering if its still possible. I see that you can attach an action to a gallery, but it doesn’t look like you can open an image if its in an array.
I’m sure it could be done with CSS as long as you give your gallery a CSS class name and apply your CSS to that class name through the custom css in the app settings. I don’t do a whole lot with CSS, so I don’t have suggestions off the top of my head, but I would bet it’s possible.
But, have you explored a custom AI component? You could build a comma delimited list of image urls in your table. Then instruct the custom component to display a gallery bound to the column of delimited urls. You could instruct it to use any ratio you choose and possibly have it display a modal or larger version of the image when you click on it.
Somewhat unrelated, but this is a recent post about creating a gallery with the ability to re-sort the images in an array. Similar concept, but you would just need to change the inputs and the AI prompts to fit your needs, such as what to do when clicked and the ratio you want.
The easiest way would probably be to create a small bit of HTML with an img tag and display it with a rich text component. Or at least try an image component with full scaling selected. Not sure if it will crop it or not.
You can use also the ai component, here is an example with a template you can copy to try it out and tweak it. Navigation can be improve like adding a swiping instruction. I chose 2 pictures with different heights.
Interesting, I’ve never used the AI component before, very useful. These were the prompts I had to give it. I think my biggest issue is that I couldn’t use multiple images field in the AI component, had to force users to upload each picture individually, which is fine. I added my two images to the AI component and then gave it these prompts.
-Gallery that displays images. Arrows on left and right side that you can click to go to the next of previous image.
-Please make this gallery have the height and width on auto. I want it to display the full image without cropping.
-Clicking on the arrows should take you to sunpath image 2 if you click the right arrow and the left arrow should take you to sunpath image 1
-When you are on sunpath image 2 the right arrow should disappear and when you are on sunpath image 1 the left arrow should disappear
-Can you make the maximum width of the image be 300 pixels
Here’s what I got ultimately. Slightly confusing because I took a screenshot of the glide page as my test image to upload! But you get the idea. Worked very well, thank you!
You can’t directly, but if you use a Joined List to convert the array into a comma delimited list of urls (or create JSON from the array). You can bind that joined list or JSON to the AI component and instruct it to parse through the list to populate your gallery. That way you aren’t restricted to the number of images you have configured for the component.
