Gallery

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.

Overview of the Phoenix and LiveView Gallery Component

LTR RTL

Preview

Filterable Gallery

All Categories

Sky

Flowers

Sea

Boat

Show the whole example Show less

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.

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.

How to display images in the gallery component.

LTR RTL

Preview

Show the whole example Show less

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

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.

Filterable Gallery component

LTR RTL

Preview

All

Sky

Sea

Show the whole example Show less

<.filterable_gallery
  filters={["all", "Sky", "Sea"]}
  media={[
    %{src: "/path", alt: "", category: "Sea"},
    %{src: "/path", 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.

Filterable gallery default filter prop

LTR RTL

Preview

All Images Skies Ocean

Show the whole example Show less

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

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.

Filterable gallery filters prop

LTR RTL

Preview

All Skies Ocean

Show the whole example Show less

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

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.

Filterable gallery media slot

LTR RTL

Preview

All Skies Ocean

Show the whole example Show less

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

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.

Filterable gallery multiple category

LTR RTL

Preview

All

Skies

Ocean

Show the whole example Show less

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

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.

Filterable gallery cols and gap props

LTR RTL

Preview

All Skies Ocean

Show the whole example Show less

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

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.

Filterable gallery filter slot

LTR RTL

Preview

All Skies Ocean

Show the whole example Show less

<.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>

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.

Filterable gallery media block slot

LTR RTL

Preview

All Skies Ocean

Show the whole example Show less

<.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>

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.

Shadow prop of gallery media of Phoenix LiveView gallery component

LTR RTL

Preview

Show the whole example Show less

<.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>

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.

Rounded prop

LTR RTL

Preview

Show the whole example Show less

<.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 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.

The default value of type prop

LTR RTL

Preview

Show the whole example Show less

<.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 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.

The masonry value of type prop in Phoenix LiveView gallery component

LTR RTL

Preview

Show the whole example Show less

<.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 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.

The featured value of type prop in Phoenix LiveView gallery component

LTR RTL

Preview

Show the whole example Show less

<.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>

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.

Cols prop in Phoenix LiveView gallery component

LTR RTL

Preview

Show the whole example Show less

<.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>

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.

Gap prop in Phoenix LiveView gallery component

LTR RTL

Preview

Show the whole example Show less

<.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>

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.