Grid View

Grid layout component for displaying media files as cards.

Card Size Configuration

Tailwind classes for different card sizes.

Media Card

Individual card component for a media file.

---

render_media_card

def render_media_card(
    file_info:FileInfo, # File to render
    config:GalleryConfig, # Gallery configuration
    index:int, # Index in the grid
    file_url:Optional=None, # URL for thumbnail/preview
    is_selected:bool=False, # Whether file is selected
    preview_url:Optional=None, # URL for preview action
    select_url:Optional=None, # URL for selection action
    hx_target:Optional=None, # HTMX target for swaps
)->Any: # Card component

Render a media file as a grid card.

from fasthtml.common import to_xml

# Test media card
config = GalleryConfig()
file_info = FileInfo(
    name="photo.jpg", path="/photos/photo.jpg", is_directory=False,
    file_type=FileType.IMAGE, extension="jpg", size=1024000
)

card = render_media_card(
    file_info=file_info,
    config=config,
    index=0,
    preview_url="/preview"
)
html = to_xml(card)
assert "photo.jpg" in html
assert "media-gallery-item-0" in html
assert "hx-post" in html
assert "JPG" in html  # Type badge

# Test with selection enabled
select_config = GalleryConfig(
    selection_mode="single"
)
from cjm_fasthtml_media_gallery.core.config import SelectionMode
select_config = GalleryConfig(selection_mode=SelectionMode.SINGLE)
card = render_media_card(
    file_info=file_info,
    config=select_config,
    index=1,
    is_selected=True,
    select_url="/select"
)
html = to_xml(card)
assert "border-primary" in html  # Selected border

print("render_media_card tests passed!")

render_media_card tests passed!

Grid View

Complete grid view with multiple cards.

---

render_grid_view

def render_grid_view(
    files:List, # Files to display
    config:GalleryConfig, # Gallery configuration
    get_file_url:Optional=None, # Function to get file URL
    selected_paths:Optional=None, # Currently selected paths
    preview_url:Optional=None, # URL for preview action
    select_url:Optional=None, # URL for selection action
    hx_target:Optional=None, # HTMX target for swaps
    start_index:int=0, # Starting index for IDs (for pagination)
)->Any: # Grid view component

Render a grid view of media files.

# Test grid view
config = GalleryConfig()
files = [
    FileInfo(name="photo1.jpg", path="/photo1.jpg", is_directory=False, file_type=FileType.IMAGE, extension="jpg"),
    FileInfo(name="song.mp3", path="/song.mp3", is_directory=False, file_type=FileType.AUDIO, extension="mp3"),
    FileInfo(name="video.mp4", path="/video.mp4", is_directory=False, file_type=FileType.VIDEO, extension="mp4"),
]

grid = render_grid_view(
    files=files,
    config=config,
    preview_url="/preview"
)
html = to_xml(grid)
assert 'id="media-gallery-grid"' in html
assert "grid-cols-4" in html
assert "photo1.jpg" in html
assert "song.mp3" in html
assert "video.mp4" in html
assert "media-gallery-item-0" in html
assert "media-gallery-item-1" in html
assert "media-gallery-item-2" in html

# Test with different column count
from cjm_fasthtml_media_gallery.core.config import GridConfig
config_6col = GalleryConfig(grid=GridConfig(columns=6))
grid = render_grid_view(files=files, config=config_6col)
html = to_xml(grid)
assert "grid-cols-6" in html

# Test with selection
select_config = GalleryConfig(selection_mode=SelectionMode.MULTIPLE)
grid = render_grid_view(
    files=files,
    config=select_config,
    selected_paths=["/photo1.jpg"],
    select_url="/select"
)
html = to_xml(grid)
assert "border-primary" in html  # Selected item

print("render_grid_view tests passed!")

render_grid_view tests passed!

Empty State

Component shown when there are no files to display.

---

render_grid_empty_state

def render_grid_empty_state(
    message:str='No media files found', # Message to display
)->Any: # Empty state component

Render empty state for grid view.

# Test empty state
empty = render_grid_empty_state()
html = to_xml(empty)
assert "No media files found" in html
assert 'id="media-gallery-grid"' in html

# Test with custom message
empty = render_grid_empty_state("No images in this folder")
html = to_xml(empty)
assert "No images in this folder" in html

print("render_grid_empty_state tests passed!")

render_grid_empty_state tests passed!