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

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>

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 of gallery media of Phoenix LiveView gallery component

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>