Gallery

Main gallery component that combines controls, views, and preview.

Gallery Content

The inner content area that switches between grid and list views.

render_gallery_content


def render_gallery_content(
    files:List, # Files to display
    config:GalleryConfig, # Gallery configuration
    view_mode:ViewMode, # Current view mode
    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 pagination)
)->Any: # Content component

Render the gallery content (grid or list view).

from fasthtml.common import to_xml

# Test gallery content - grid view
config = GalleryConfig()
files = [
    FileInfo(name="photo.jpg", path="/photo.jpg", is_directory=False, file_type=FileType.IMAGE),
    FileInfo(name="song.mp3", path="/song.mp3", is_directory=False, file_type=FileType.AUDIO),
]

content = render_gallery_content(
    files=files,
    config=config,
    view_mode=ViewMode.GRID,
    preview_url="/preview"
)
html = to_xml(content)
assert 'id="media-gallery-grid"' in html

# Test list view
content = render_gallery_content(
    files=files,
    config=config,
    view_mode=ViewMode.LIST,
    preview_url="/preview"
)
html = to_xml(content)
assert 'id="media-gallery-list"' in html

# Test empty state
content = render_gallery_content(
    files=[],
    config=config,
    view_mode=ViewMode.GRID
)
html = to_xml(content)
assert "No media files found" in html

print("render_gallery_content tests passed!")

render_gallery_content tests passed!

Main Gallery Component

The complete gallery with controls, content, and preview modal.

render_media_gallery


def render_media_gallery(
    files:List, # Files to display
    config:GalleryConfig, # Gallery configuration
    view_mode:Optional=None, # Current view mode (defaults to config)
    active_types:Optional=None, # Active type filters
    get_file_url:Optional=None, # Function to get file URL
    selected_paths:Optional=None, # Currently selected paths
    toggle_view_url:Optional=None, # URL for view toggle
    filter_url:Optional=None, # URL for type filter
    preview_url:Optional=None, # URL for preview action
    select_url:Optional=None, # URL for selection action
    page_url:Optional=None, # URL for pagination
    current_page:int=1, # Current page number
    total_items:Optional=None, # Total items (for pagination)
    type_counts:Optional=None, # File counts per type
)->Any: # Complete gallery component

Render the complete media gallery.

# Test main gallery
config = GalleryConfig()
files = [
    FileInfo(name="photo1.jpg", path="/photo1.jpg", is_directory=False, file_type=FileType.IMAGE, extension="jpg"),
    FileInfo(name="photo2.jpg", path="/photo2.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"),
]

gallery = render_media_gallery(
    files=files,
    config=config,
    toggle_view_url="/toggle-view",
    filter_url="/filter",
    preview_url="/preview",
    page_url="/page"
)
html = to_xml(gallery)

# Check main container
assert 'id="media-gallery"' in html

# Check controls
assert 'id="media-gallery-controls"' in html
assert "join" in html  # View toggle
assert "Audio" in html  # Type filters

# Check content
assert 'id="media-gallery-content"' in html
assert 'id="media-gallery-grid"' in html  # Default is grid

# Check preview modal
assert 'id="media-preview-modal"' in html

# Check files are rendered
assert "photo1.jpg" in html
assert "song.mp3" in html

print("render_media_gallery tests passed!")

render_media_gallery tests passed!

# Test with list view
config = GalleryConfig()
files = [
    FileInfo(name="photo1.jpg", path="/photo1.jpg", is_directory=False, file_type=FileType.IMAGE, extension="jpg"),
    FileInfo(name="photo2.jpg", path="/photo2.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"),
]

gallery = render_media_gallery(
    files=files,
    config=config,
    view_mode=ViewMode.LIST
)
html = to_xml(gallery)
assert 'id="media-gallery-list"' in html
assert "<table" in html

# Test with type filter
gallery = render_media_gallery(
    files=files,
    config=config,
    active_types=[FileType.IMAGE]  # Only images
)
html = to_xml(gallery)
assert "photo1.jpg" in html
assert "photo2.jpg" in html
assert "song.mp3" not in html  # Audio filtered out
assert "video.mp4" not in html  # Video filtered out

# Test with preview disabled
from cjm_fasthtml_media_gallery.core.config import PreviewConfig
no_preview_config = GalleryConfig(preview=PreviewConfig(enable_preview=False))
gallery = render_media_gallery(
    files=files,
    config=no_preview_config
)
html = to_xml(gallery)
assert 'id="media-preview-modal"' not in html

print("Additional gallery tests passed!")

Additional gallery tests passed!

# Test pagination controls
from cjm_fasthtml_media_gallery.core.config import PaginationConfig

# Create many files to trigger pagination
many_files = [
    FileInfo(name=f"file_{i}.jpg", path=f"/file_{i}.jpg", is_directory=False, file_type=FileType.IMAGE, extension="jpg")
    for i in range(50)
]

# Config with small page size to trigger pagination
paginated_config = GalleryConfig(
    pagination=PaginationConfig(items_per_page=10, show_pagination=True)
)

gallery = render_media_gallery(
    files=many_files,
    config=paginated_config,
    page_url="/page",
    current_page=1
)
html = to_xml(gallery)

# Check pagination is rendered
assert 'id="media-gallery-pagination"' in html
assert "Next" in html or "next" in html.lower()  # Next button

# Check only 10 items shown (page 1)
assert "file_0.jpg" in html
assert "file_9.jpg" in html
assert "file_10.jpg" not in html  # Should be on page 2

# Test page 2
gallery = render_media_gallery(
    files=many_files,
    config=paginated_config,
    page_url="/page",
    current_page=2
)
html = to_xml(gallery)
assert "file_10.jpg" in html
assert "file_19.jpg" in html
assert "file_0.jpg" not in html  # Should be on page 1

# Test without page_url (no pagination rendered)
gallery = render_media_gallery(
    files=many_files,
    config=paginated_config,
    page_url=None  # No page URL
)
html = to_xml(gallery)
assert 'id="media-gallery-pagination"' not in html

print("Pagination tests passed!")

Pagination tests passed!