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.
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.
By using the class prop, you can apply custom classes or Tailwind CSS classes to customize the appearance and behavior of the gallery, allowing for flexible design changes.
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.
<.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.
<.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.
<.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.
<.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.
<.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.
<.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.
<.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.
<.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>