The Gallery component displays a grid of images or videos with optional captions.
Basic usage
import gradio as gr
def get_images():
return ["image1.jpg", "image2.jpg", "image3.jpg"]
gr.Interface(
fn=get_images,
inputs=gr.Button("Load"),
outputs=gr.Gallery()
).launch()
Constructor
value
Sequence[np.ndarray | PIL.Image | str | Path | tuple] | Callable | None
default:"None"
List of images/videos or (media, caption) tuples
Image format for saving (e.g., “png”, “jpg”, “webp”)
Number of columns in grid
Number of rows to display
height
int | float | str | None
default:"None"
Component height with scrolling if needed
Whether images can be enlarged on click
preview
bool | None
default:"None"
If True, starts in preview mode
object_fit
Literal['contain', 'cover', 'fill', 'none', 'scale-down'] | None
default:"None"
CSS object-fit property for thumbnails
type
Literal['numpy', 'pil', 'filepath']
default:"'filepath'"
Format for images passed to function
Events
- select - Triggered when image/video is selected
- upload - Triggered when media is uploaded
- change - Triggered when gallery changes
- delete - Triggered when item is deleted
Examples
With captions
import gradio as gr
images_with_captions = [
("cat.jpg", "A cute cat"),
("dog.jpg", "A friendly dog"),
("bird.jpg", "A colorful bird")
]
gr.Gallery(value=images_with_captions, columns=3)
Custom grid layout
import gradio as gr
gr.Gallery(
columns=4,
rows=2,
height="500px",
object_fit="cover"
)