Overview of the Phoenix and LiveView Gallery Component

The Mishka Chelekom gallery component is a Phoenix LiveView component that allows developers to create dynamic and customizable galleries, perfect for showcasing images in a structured layout. It offers flexibility in design, allowing for easy adjustment of columns, gaps, and layout types, ensuring a polished and professional presentation.

RTL LTR

Filterable Gallery

All Categories

Sky

Flowers

Sea

Boat

This Phoenix LiveView component also supports various gallery styles, including default, masonry, and featured layouts, making it ideal for enhancing both the visual appeal and functionality of media-rich content. With its responsive design and ease of use, this gallery component improves the presentation and accessibility of visual content.

How to display images in the gallery component.

To display images in the gallery component, you need to use the gallery_media element, where the image source is specified using the src attribute. This attribute should contain the URL of the image you want to display. Additionally, you can provide an alt attribute to describe the image, which improves accessibility and helps users understand the content if the image fails to load.

RTL LTR

<.gallery>
  <.gallery_media src="/path" alt="Mishka chelekom" />
  <.gallery_media src="/path" alt="Mishka chelekom" />
  <.gallery_media src="/path" alt="Mishka chelekom" />
</.gallery>

Filterable Gallery component

The filterable gallery Phoenix Liveview component extends the basic gallery functionality by adding dynamic filtering capabilities. This component allows users to filter media items based on categories, making it easier to organize and display content in an interactive way. It includes a filter bar at the top where users can select different categories, and the gallery updates in real-time to show only the matching items.

RTL LTR

All

Sky

Sea

<.filterable_gallery
  filters={["all", "Sky", "Sea"]}
  media={[
    %{src: "/path", alt: "", category: "Sea"},
    %{src: "/apth", alt: "", category: "Sky"},
    %{src: "/path", alt: "", category: "Sky"}
  ]}
/>

Filterable gallery default filter prop

The default_filter prop allows you to customize the "All" filter label. While it defaults to "All", you can set any name you prefer as the default filter option that displays all media items. For example, setting or default_filter="All Images" default_filter="View Everything" will change how the default filter option appears in the gallery's filter menu.

RTL LTR

All Images

Skies

Ocean

<.filterable_gallery filters={["all", "Skies", "Ocean"]}></.filterable_gallery>

Filterable gallery filters prop

A list of filter labels to show above the gallery. These values will be matched with the category of each media item. You can include a value like "All" to show everything.

RTL LTR

All

Skies

Ocean

<.filterable_gallery filters={["all", "Skies", "Ocean"]}></.filterable_gallery>

Filterable gallery media slot

A list of maps representing each image. Each item should include a src for the image path, an alt text for accessibility, and a category for filtering.

RTL LTR

All

Skies

Ocean

<.filterable_gallery
  media={[
    %{src: "/path", alt: "", category: "Skies"},
    %{src: "/path", alt: "", category: "Skies"},
    %{src: "/path", alt: "", category: "Ocean"}
  ]}
  >
</.filterable_gallery>

Filterable gallery multiple category

The gallery media's category can be defined in multiple formats: - As a single string (e.g., "Sky" ) - As an array of strings (e.g., ["Sky", "Ocean"] ) for items that fit multiple categories - As an empty string "" for items that should only appear in the "All" view This flexibility allows you to create complex categorization schemes while maintaining simple filtering functionality. Media items with multiple categories will appear when any of their assigned categories are selected.

RTL LTR

All

Skies

Ocean

<.filterable_gallery
  filters={["Skies", "Ocean"]}
  media={[
    %{src: "/path", alt: "", category: ["Skies", "Ocean"]},
    %{src: "/path", alt: "", category: "Skies"},
    %{src: "/path", alt: "", category: ""}
  ]}
  >
</.filterable_gallery>

Filterable gallery cols and gap props

The cols option sets the number of columns in the grid. The gap controls the spacing between items. These values are mapped to Tailwind grid classes.

RTL LTR

All

Skies

Ocean

<.filterable_gallery gap="small" cols="four"></.filterable_gallery>

Filterable gallery filter slot

You can use the filter slot to customize how each filter button is rendered. This slot receives the filter value with let={filter} . It allows you to apply your own styles or use custom components.

RTL LTR

All

Skies

Ocean

<.filterable_gallery
  filters={["all", "Skies", "Ocean"]}
  media={[
    %{src: "/path", alt: "", category: "Skies"},
    %{src: "/path", alt: "", category: "Skies"},
    %{src: "/path", alt: "", category: "Ocean"}
  ]}
  >
  <:filter :let={filter}>
    <.button data-gallery-filter data-category={filter}>
      <%= filter %>
    </.button>
  </:filter>
</.filterable_gallery>

Filterable gallery media block slot

The media_block slot lets you customize how each media item is rendered. This slot receives the media map with let={media} . You can use this to apply your own layout, styles, or components for each image.

RTL LTR

All

Skies

Ocean

<.filterable_gallery
  filters={["all", "Skies", "Ocean"]}
  media={[
    %{src: "/path", alt: "", category: "Skies"},
    %{src: "/path", alt: "", category: "Skies"},
    %{src: "/path", alt: "", category: "Ocean"}
  ]}
  >
  <:filter :let={filter}>
    <.button data-gallery-filter data-category={filter}>
      <%= filter %>
    </.button>
  </:filter>

  <:media_block :let={media}>
    <.gallery_media src={media.src} alt={media.alt} />
  </:media_block>
</.filterable_gallery>

Shadow prop of gallery media of Phoenix LiveView gallery component

The gallery_media component allows you to apply various shadow effects through the shadow attribute. You can choose from options like extra_small for a subtle shadow, small for a regular shadow, and medium for a moderate shadow. For a more prominent effect, you can use large , and for the strongest shadow, extra_large . If no shadow is desired, set the value to none to remove it. This allows for flexible visual styling in the gallery_media component to suit your design preferences.

RTL LTR

<.gallery>
  <.gallery_media shadow="extra_small" src="/path" />
  <.gallery_media shadow="small" src="/path" />
  <.gallery_media shadow="medium" src="/path" />
  <.gallery_media shadow="large" src="/path" />
  <.gallery_media shadow="extra_large" src="/path" />
</.gallery>

Rounded prop

The rounded attribute in the gallery_media component controls the border radius of the media element, allowing you to apply various levels of rounding to the corners. The available options include extra_small , which applies a slight rounding effect, small for standard rounded corners, and medium for moderate rounding. For more pronounced effects, you can use large or extra_large for larger, more noticeable rounded corners. The full option makes the media fully rounded, typically resulting in a circular shape. If no rounding is required, you can set the value to none to maintain sharp, square corners.

RTL LTR

<.gallery>
  <.gallery_media rounded="extra_small" src="/path" />
  <.gallery_media rounded="small" src="/path" />
  <.gallery_media rounded="medium" src="/path" />
  <.gallery_media rounded="large" src="/path" />
  <.gallery_media rounded="extra_large" src="/path" />
</.gallery>

The default value of type prop

The default layout in the gallery component presents media items in a clean, structured grid format. Each image is evenly spaced and aligned, providing a uniform and balanced look. This layout is ideal for galleries where consistency is key, as it ensures that all items are displayed in equal sizes and aligned in a straightforward grid. It's perfect for showcasing images with the same dimensions or for creating a tidy, professional presentation.

RTL LTR

<.gallery>
  <.gallery_media src="/path" />
  <.gallery_media src="/path" />
  <.gallery_media src="/path" />
  <.gallery_media src="/path" />
  <.gallery_media src="/path" />
  <.gallery_media src="/path" />
  <.gallery_media src="/path" />
  <.gallery_media src="/path" />
</.gallery>

The masonry value of type prop in Phoenix LiveView gallery component

The masonry layout offers a more dynamic presentation by stacking media items in a staggered, Pinterest-like grid. This layout allows for images of varying heights to be displayed without alignment restrictions, giving the gallery a flowing, creative appearance. It is particularly effective when displaying content with diverse dimensions, as it creates a visually interesting and non-uniform look while maximizing the use of space.

RTL LTR

<.gallery type="masonry" cols="four">
  <.gallery_media src="/path" />
  <.gallery_media src="/path" />
  <.gallery_media src="/path" />
  <.gallery_media src="/path" />
  <.gallery_media src="/path" />
  <.gallery_media src="/path" />
  <.gallery_media src="/path" />
  <.gallery_media src="/path" />
</.gallery>

The featured value of type prop in Phoenix LiveView gallery component

The featured layout is designed to emphasize a primary media item, displaying it prominently with smaller supporting images arranged beneath or beside it. This layout is ideal for product displays or situations where one image needs to stand out as the focal point, while still allowing users to view additional media. It enhances the visual hierarchy by drawing attention to the key image, making it perfect for portfolios or showcases.

RTL LTR

<.gallery>
  <.gallery_media src="/path" />
  <.gallery cols="three">
    <.gallery_media src="/path" />
    <.gallery_media src="/path" />
    <.gallery_media src="/path" />
    <.gallery_media src="/path" />
    <.gallery_media src="/path" />
    <.gallery_media src="/path" />
    <.gallery_media src="/path" />
  </.gallery>
</.gallery>

Cols prop in Phoenix LiveView gallery component

The cols prop in the Phoenix gallery component allows you to define the number of columns used to display media items. The values range from one to twelve, giving you flexibility to control how many columns appear in the grid. For example, setting it to one will display all items in a single column, while two will divide the items into two columns. As the number increases, more columns are introduced, such as three , four , or even up to twelve . These values ensure that you can tailor the gallery layout to fit different screen sizes and design preferences. When necessary, the columns can also adapt for different screen breakpoints, with values like md allowing for a responsive design that adjusts according to screen width.

RTL LTR

<.gallery cols="one"><.gallery_media src="/path" /></.gallery>
<.gallery cols="two"><.gallery_media src="/path" /></.gallery>
<.gallery cols="three"><.gallery_media src="/path" /></.gallery>
<.gallery cols="four"><.gallery_media src="/path" /></.gallery>
<.gallery cols="five"><.gallery_media src="/path" /></.gallery>
<.gallery cols="six"><.gallery_media src="/path" /></.gallery>
<.gallery cols="seven"><.gallery_media src="/path" /></.gallery>
<.gallery cols="eight"><.gallery_media src="/path" /></.gallery>
<.gallery cols="nine"><.gallery_media src="/path" /></.gallery>
<.gallery cols="ten"><.gallery_media src="/path" /></.gallery>
<.gallery cols="eleven"><.gallery_media src="/path" /></.gallery>
<.gallery cols="twelve"><.gallery_media src="/path" /></.gallery>

Gap prop in Phoenix LiveView gallery component

The gap prop in the gallery component controls the spacing between media items within the grid layout. It offers various values to adjust the space, providing flexibility in design. You can use extra_small for minimal spacing, small for slightly larger gaps, and medium for moderate spacing. For even more separation, you can choose large or extra_large , creating more distinct spaces between items. If even more spacing is required, options like double_large , triple_large , and quadruple_large allow for significantly increased gaps, ensuring media items are displayed with the desired amount of space between them.

RTL LTR

<.gallery gap="extra_small"><.gallery_media src="/path" /></.gallery>
<.gallery gap="small"><.gallery_media src="/path" /></.gallery>
<.gallery gap="medium"><.gallery_media src="/path" /></.gallery>
<.gallery gap="large"><.gallery_media src="/path" /></.gallery>
<.gallery gap="extra_large"><.gallery_media src="/path" /></.gallery>
<.gallery gap="double_large"><.gallery_media src="/path" /></.gallery>
<.gallery gap="triple_large"><.gallery_media src="/path" /></.gallery>
<.gallery gap="quadruple_large"><.gallery_media src="/path" /></.gallery>

Animation and animation size props

The animation and animation_size props allow you to add smooth animations to gallery images. You can choose from animations like blur , backdrop , scale-up , and scale-down . By default, both props are set to nil, so no animation is applied. When setting an animation, it is important to define the corresponding animation_size . Available sizes include extra_small , small , medium , large , and extra_large . This ensures your animations are visually appealing and appropriately scaled.

Animation backdrop

RTL LTR

<.gallery animation="backdrop" animation_size="extra_small">
  <.gallery_media src="/path" />
</.gallery>

<.gallery animation="backdrop" animation_size="small">
  <.gallery_media src="/path" />
</.gallery>

<.gallery animation="backdrop" animation_size="medium">
  <.gallery_media src="/path" />
</.gallery>

<.gallery animation="backdrop" animation_size="large">
  <.gallery_media src="/path" />
</.gallery>

<.gallery animation="backdrop" animation_size="extra_large">
  <.gallery_media src="/path" />
</.gallery>

Animation blur

RTL LTR

<.gallery animation="blur" animation_size="extra_small">
  <.gallery_media src="/path" />
</.gallery>

<.gallery animation="blur" animation_size="small">
  <.gallery_media src="/path" />
</.gallery>

<.gallery animation="blur" animation_size="medium">
  <.gallery_media src="/path" />
</.gallery>

<.gallery animation="blur" animation_size="large">
  <.gallery_media src="/path" />
</.gallery>

<.gallery animation="blur" animation_size="extra_large">
  <.gallery_media src="/path" />
</.gallery>

Animation scale up

RTL LTR

<.gallery animation="scale-up" animation_size="extra_small">
  <.gallery_media src="/path" />
</.gallery>

<.gallery animation="scale-up" animation_size="small">
  <.gallery_media src="/path" />
</.gallery>

<.gallery animation="scale-up" animation_size="medium">
  <.gallery_media src="/path" />
</.gallery>

<.gallery animation="scale-up" animation_size="large">
  <.gallery_media src="/path" />
</.gallery>

<.gallery animation="scale-up" animation_size="extra_large">
  <.gallery_media src="/path" />
</.gallery>

Animation scale down

RTL LTR

<.gallery animation="scale-down" animation_size="extra_small">
  <.gallery_media src="/path" />
</.gallery>

<.gallery animation="scale-down" animation_size="small">
  <.gallery_media src="/path" />
</.gallery>

<.gallery animation="scale-down" animation_size="medium">
  <.gallery_media src="/path" />
</.gallery>

<.gallery animation="scale-down" animation_size="large">
  <.gallery_media src="/path" />
</.gallery>

<.gallery animation="scale-down" animation_size="extra_large">
  <.gallery_media src="/path" />
</.gallery>