Overview of the Phoenix and LiveView Image Component
The
Mishka Chelekom Image
Component is a Phoenix LiveView
component that is essentially an HTML
img
tag that allows you to display images with various attributes for customization.
It supports properties like
src
for the image source, alt for descriptive text,
and width and height for sizing. You can also use srcset for responsive images and loading for
lazy loading.
This Phoenix LiveView component makes it easy to add styles to your images in Phoenix applications using Tailwind CSS. By allowing props for attributes like border radius and shadow, developers can quickly customize the appearance of images without writing extensive CSS. With Tailwind's utility classes, you can achieve the desired look for your images with just a few simple props, making it straightforward to create a polished and visually appealing user interface.
By using the class prop, you can apply custom classes or Tailwind CSS classes to customize the appearance and behavior of the components, allowing for flexible design changes.
Default img attribues
- src: This required attribute specifies the media link for the image, which is the source URL from which the image will be loaded.
- alt: This optional attribute provides a description of the image, important for accessibility. It serves as alternative text for screen readers and displays if the image fails to load.
- srcset: This optional attribute allows you to specify a list of different images for responsive design, optimizing loading times by displaying the appropriate image size based on the user's device.
- loading: This attribute defines the loading behavior of the image. You can choose between "eager" (the default) or "lazy" loading, where lazy loading defers the loading of off-screen images until they are close to the viewport, improving performance.
- referrerpolicy: This optional attribute controls the referrer information sent when the image is fetched, enhancing privacy and security.
-
fetchpriority: This attribute allows you to set the priority of fetching the image,
with values like
high
,low
, orauto
, which is the default. - width: This optional integer attribute determines the width of the image in pixels.
- height: This optional integer attribute determines the height of the image in pixels.
- sizes: This optional attribute specifies the intended display size of the image for different viewport conditions, helping browsers choose the right image to load.
- ismap: This optional attribute makes the image act as a server-side image map, allowing for clickable areas within the image.
- decoding: This optional attribute refers to the process of converting encoded or encrypted data back into its original format, with default behavior as specified by the browser.
<.image src="http://example.com" alt="Mishka Chelekom image" srcset="http://example.com 300w, http://example.com 600w" sizes="(max-width: 600px) 100vw, 50vw" loading="lazy" ismap decoding="async" fetchpriority="high" referrerpolicy="no-referrer" width="300" height="200" />
Shadow prop in Phoenix liveView Image component
The shadow prop in the
Mishka Chelekom Image Component
allows us to add shadow effects to images, enhancing their visual appeal and depth. By using values like
extra_small
,
small
,
medium
,
large
, and
extra_large
, developers can easily apply different shadow styles, from subtle to bold, to their images. This functionality ensures that images can be customized to fit the overall design aesthetic of the application while maintaining a consistent and polished look. Additionally, you can use this function to add your own custom or Tailwind CSS shadow classes, providing even greater flexibility in styling your images. By default, it is
nil
, so no shadow will be added to the image.
<.image src="/path" shadow="extra_small" /> <.image src="/path" shadow="small" /> <.image src="/path" shadow="medium" /> <.image src="/path" shadow="large" /> <.image src="/path" shadow="extra_large" />
Rounded prop
The rounded function in the Mishka Chelekom Image Component allows us to apply border-radius
effects to images, giving them smooth, rounded corners. By using values like
extra_small
,
small
,
medium
,
large
, and
extra_large
, developers can easily apply different levels
of corner rounding, from slightly rounded edges to fully circular shapes. This feature ensures that images can be
customized to fit the overall design aesthetic of the application while maintaining a consistent
and polished look. Additionally, you can use this function to add your own custom or Tailwind CSS
border-radius classes, offering even greater flexibility in styling your images.
By default, it is nil, so no border-radius will be applied to the image.
<.image src="/path" rounded="extra_small" /> <.image src="/path" rounded="small" /> <.image src="/path" rounded="medium" /> <.image src="/path" rounded="large" /> <.image src="/path" rounded="extra_large" />
filter and filter size props
We offer a wide range of filters such as
blur
,
brightness
,
hue
,
contrast
, and
saturation
, each of which supports varying sizes, including
extra_small
,
small
,
medium
,
large
, and
extra_large
. Additionally, we have filters like
grayscale
,
invert
, and
sepia
that apply uniform effects without size variations.
<.image src="/path" filter="blue" filter_size="extra_small" /> <.image src="/path" filter="blue" filter_size="small" /> <.image src="/path" filter="blue" filter_size="medium" /> <.image src="/path" filter="blue" filter_size="large" /> <.image src="/path" filter="blue" filter_size="extra_large" /> <.image src="/path" filter="brightness" filter_size="extra_small" /> <.image src="/path" filter="brightness" filter_size="small" /> <.image src="/path" filter="brightness" filter_size="medium" /> <.image src="/path" filter="brightness" filter_size="large" /> <.image src="/path" filter="brightness" filter_size="extra_large" /> <.image src="/path" filter="contrast" filter_size="extra_small" /> <.image src="/path" filter="contrast" filter_size="small" /> <.image src="/path" filter="contrast" filter_size="medium" /> <.image src="/path" filter="contrast" filter_size="large" /> <.image src="/path" filter="contrast" filter_size="extra_large" /> <.image src="/path" filter="hue" filter_size="extra_small" /> <.image src="/path" filter="hue" filter_size="small" /> <.image src="/path" filter="hue" filter_size="medium" /> <.image src="/path" filter="hue" filter_size="large" /> <.image src="/path" filter="hue" filter_size="extra_large" /> <.image src="/path" filter="saturation" filter_size="extra_small" /> <.image src="/path" filter="saturation" filter_size="small" /> <.image src="/path" filter="saturation" filter_size="medium" /> <.image src="/path" filter="saturation" filter_size="large" /> <.image src="/path" filter="saturation" filter_size="extra_large" /> <.image src="/path" filter="grayscale" /> <.image src="/path" filter="invert" /> <.image src="/path" filter="sepia" />