PineUiPhoenix.Gallery (Pine UI v0.1.3)

View Source

Provides image gallery components for displaying collections of images.

The Gallery module offers components for creating responsive image galleries with different layouts and interactive features like lightbox previews.

Summary

Functions

Renders a carousel gallery component.

Renders a basic grid gallery component.

Renders a masonry gallery component.

Functions

carousel(assigns)

Renders a carousel gallery component.

This component creates a slideshow carousel for displaying images.

Examples

<.carousel
  images={[
    %{src: "/images/photo1.jpg", alt: "Photo 1"},
    %{src: "/images/photo2.jpg", alt: "Photo 2"},
    %{src: "/images/photo3.jpg", alt: "Photo 3"}
  ]}
/>

<.carousel
  images={@photos}
  autoplay={true}
  autoplay_speed={3000}
  show_thumbnails={true}
/>

Options

  • :images - List of image maps with src and alt keys (required)
  • :aspect_ratio - Image aspect ratio: "square", "video", "portrait" (optional, defaults to "video")
  • :rounded - Whether to round image corners (optional, defaults to true)
  • :show_indicators - Whether to show slide indicators (optional, defaults to true)
  • :show_arrows - Whether to show navigation arrows (optional, defaults to true)
  • :show_thumbnails - Whether to show thumbnail navigation (optional, defaults to false)
  • :autoplay - Whether to autoplay the carousel (optional, defaults to false)
  • :autoplay_speed - Autoplay speed in milliseconds (optional, defaults to 5000)
  • :class - Additional CSS classes for the carousel container (optional)
  • :image_class - CSS classes for the images (optional)

grid(assigns)

Renders a basic grid gallery component.

This component creates a responsive grid layout for displaying multiple images.

Examples

<.grid
  images={[
    %{src: "/images/photo1.jpg", alt: "Photo 1"},
    %{src: "/images/photo2.jpg", alt: "Photo 2"},
    %{src: "/images/photo3.jpg", alt: "Photo 3"}
  ]}
/>

<.grid
  images={@photos}
  columns={3}
  gap="4"
  enable_lightbox={true}
/>

Options

  • :images - List of image maps with src and alt keys (required)
  • :columns - Number of columns in the grid: 1, 2, 3, 4, 5, 6 (optional, defaults to 3)
  • :gap - Gap size between grid items: "1", "2", "4", "6", "8" (optional, defaults to "4")
  • :aspect_ratio - Image aspect ratio: "square", "video", "portrait" (optional, defaults to "square")
  • :rounded - Whether to round image corners (optional, defaults to true)
  • :enable_lightbox - Whether to enable lightbox preview (optional, defaults to false)
  • :class - Additional CSS classes for the gallery container (optional)
  • :image_class - CSS classes for the images (optional)

masonry(assigns)

Renders a masonry gallery component.

This component creates a masonry layout for displaying images of varying heights.

Examples

<.masonry
  images={[
    %{src: "/images/photo1.jpg", alt: "Photo 1", height: "md"},
    %{src: "/images/photo2.jpg", alt: "Photo 2", height: "lg"},
    %{src: "/images/photo3.jpg", alt: "Photo 3", height: "sm"}
  ]}
/>

Options

  • :images - List of image maps with src, alt, and optional height keys (required)
  • :columns - Number of columns in the layout: 1, 2, 3, 4 (optional, defaults to 3)
  • :gap - Gap size between items: "1", "2", "4", "6", "8" (optional, defaults to "4")
  • :rounded - Whether to round image corners (optional, defaults to true)
  • :enable_lightbox - Whether to enable lightbox preview (optional, defaults to false)
  • :class - Additional CSS classes for the gallery container (optional)
  • :image_class - CSS classes for the images (optional)