Gallery

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

default:"None"

List of images/videos or (media, caption) tuples

str

default:"'webp'"

Image format for saving (e.g., “png”, “jpg”, “webp”)

int | None

default:"2"

Number of columns in grid

int | None

default:"None"

Number of rows to display

int | float | str | None

default:"None"

Component height with scrolling if needed

bool

default:"True"

Whether images can be enlarged on click

bool | None

default:"None"

If True, starts in preview mode

Literal['contain', 'cover', 'fill', 'none', 'scale-down'] | None

default:"None"

CSS object-fit property for thumbnails

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"
)

Overview

Input Components

Output Components

Layout Components

Control Components

Special Components

Basic usage

Constructor

Events

Examples

With captions

Custom grid layout

​Basic usage

​Constructor

​Events

​Examples

​With captions

​Custom grid layout

Basic usage

Constructor

Events

Examples

With captions

Custom grid layout