# Vertical Photos in Gallery
**URL:** https://community.glideapps.com/t/vertical-photos-in-gallery/78645
**Category:** Ask for Help
**Created:** [December 16, 2024, 9:48pm UTC](https://community.glideapps.com/t/vertical-photos-in-gallery/78645 "2024-12-16T21:48:54Z")
**Posts on this page:** 10
**Page:** 1
### Author:  [@RyanThomas](https://community.glideapps.com/u/RyanThomas)
#### Post date: [December 16, 2024, 9:48pm UTC](https://community.glideapps.com/t/vertical-photos-in-gallery/78645/1 "2024-12-16T21:48:54Z")
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.
Thanks for any help on this.
---
### Author:  [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)
#### Post date: [December 16, 2024, 10:19pm UTC](https://community.glideapps.com/t/vertical-photos-in-gallery/78645/2 "2024-12-16T22:19:16Z")
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.
> [@Multi image upload but with extras](https://community.glideapps.com/t/multi-image-upload-but-with-extras/78420/11):
>
> Try this. Add a Joined List column to convert your multiple images column into a comma delimited list of urls. Name it Input. Add a Text column and name it Output. Add a Split Text column to convert Output into an array. (optional if you need the images as an array) Once you have those columns, add a custom component with this prompt. Bind Input, which is a comma delimited list of image urls. Split the urls and render them as an image gallery. Allow the images to be rearranged using drag an…
---
### Author:  [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)
#### Post date: [December 17, 2024, 1:41am UTC](https://community.glideapps.com/t/vertical-photos-in-gallery/78645/3 "2024-12-17T01:41:46Z")
> [@Jeff\_Hager](#):
>
> 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.
I would suggest this as well. I successfully built something like that a while ago with JSON.
The biggest challenge was for the component to remember where it was in the carousel when it loads again the next time.
---
### Author:  [@RyanThomas](https://community.glideapps.com/u/RyanThomas)
#### Post date: [December 18, 2024, 7:10pm UTC](https://community.glideapps.com/t/vertical-photos-in-gallery/78645/4 "2024-12-18T19:10:47Z")
What if I just wanted to display a 9:16 image with no gallery? Is that any easier?
---
### Author:  [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)
#### Post date: [December 18, 2024, 8:03pm UTC](https://community.glideapps.com/t/vertical-photos-in-gallery/78645/5 "2024-12-18T20:03:33Z")
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.
---
### Author:  [@RyanThomas](https://community.glideapps.com/u/RyanThomas)
#### Post date: [December 18, 2024, 8:14pm UTC](https://community.glideapps.com/t/vertical-photos-in-gallery/78645/6 "2024-12-18T20:14:25Z")
Ah that makes sense! Very easy. Yeah image component with full scaling crops it unfortunately.
---
### Author:  [@Marc-Olivier](https://community.glideapps.com/u/Marc-Olivier)
#### Post date: [December 18, 2024, 10:35pm UTC](https://community.glideapps.com/t/vertical-photos-in-gallery/78645/7 "2024-12-18T22:35:03Z")
Hi @RyanThomas
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.
> **[AI caroussel component](https://marcos-app-bbwc.glide.page/)**
Marco
---
### Author:  [@RyanThomas](https://community.glideapps.com/u/RyanThomas)
#### Post date: [December 19, 2024, 7:48pm UTC](https://community.glideapps.com/t/vertical-photos-in-gallery/78645/8 "2024-12-19T19:48:11Z")
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!
---
### Author:  [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)
#### Post date: [December 19, 2024, 7:54pm UTC](https://community.glideapps.com/t/vertical-photos-in-gallery/78645/9 "2024-12-19T19:54:38Z")
> [@RyanThomas](#):
>
> couldn’t use multiple images field in the AI component
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.
---
### Author:  [@system](https://community.glideapps.com/u/system)
#### Post date: [December 26, 2024, 7:55pm UTC](https://community.glideapps.com/t/vertical-photos-in-gallery/78645/10 "2024-12-26T19:55:12Z")
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.