PhxMediaLibrary.ViewHelpers (PhxMediaLibrary v0.6.1)

Copy Markdown View Source

Helper functions for rendering media in Phoenix templates.

Usage in Phoenix

Add to your my_app_web.ex:

def html_helpers do
  quote do
    # ... existing imports
    import PhxMediaLibrary.ViewHelpers
  end
end

Then in your templates:

<.media_img media={@media} class="rounded-lg" />

<.responsive_img media={@media} sizes="(max-width: 768px) 100vw, 50vw" />

Summary

Functions

media_img(assigns)

Renders a simple img tag for a media item.

picture(assigns)

Renders a picture element with multiple sources.

responsive_img(assigns)

Renders a responsive img tag with srcset.

Functions

media_img(assigns)

Renders a simple img tag for a media item.

Attributes

  • media (required) - The media item to render
  • conversion - Conversion name to use (default: original)
  • alt - Alt text (falls back to custom_properties["alt"] or filename)
  • class - CSS classes
  • All other attributes are passed through to the img tag

Examples

<.media_img media={@post.avatar} class="w-20 h-20 rounded-full" />

<.media_img media={@image} conversion={:thumb} alt="Product thumbnail" />

Attributes

  • media (PhxMediaLibrary.Media) (required)
  • conversion (:atom) - Defaults to nil.
  • alt (:string) - Defaults to nil.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

picture(assigns)

Renders a picture element with multiple sources.

Useful for art direction or serving different formats.

Attributes

  • media (required) - The media item to render
  • conversion - Conversion name
  • alt - Alt text
  • class - CSS classes for the img element
  • sources - List of source configurations

Examples

<.picture
  media={@image}
  sources={[
    %{media: "(max-width: 768px)", conversion: :mobile},
    %{media: "(min-width: 769px)", conversion: :desktop}
  ]}
/>

Attributes

  • media (PhxMediaLibrary.Media) (required)
  • conversion (:atom) - Defaults to nil.
  • alt (:string) - Defaults to nil.
  • class (:string) - Defaults to nil.
  • sources (:list) - Defaults to [].
  • Global attributes are accepted.

responsive_img(assigns)

Renders a responsive img tag with srcset.

Includes progressive loading with a tiny placeholder that's replaced when the full image loads.

Attributes

  • media (required) - The media item to render
  • conversion - Conversion name to use
  • sizes - The sizes attribute for responsive images
  • alt - Alt text
  • class - CSS classes
  • loading - Loading strategy ("lazy" or "eager", default: "lazy")
  • placeholder - Show blur placeholder (default: true)

Examples

<.responsive_img
  media={@hero_image}
  sizes="100vw"
  class="w-full h-auto"
/>

<.responsive_img
  media={@thumbnail}
  conversion={:preview}
  sizes="(max-width: 768px) 100vw, 33vw"
  loading="eager"
/>

Attributes

  • media (PhxMediaLibrary.Media) (required)
  • conversion (:atom) - Defaults to nil.
  • sizes (:string) - Defaults to "100vw".
  • alt (:string) - Defaults to nil.
  • class (:string) - Defaults to nil.
  • loading (:string) - Defaults to "lazy".
  • placeholder (:boolean) - Defaults to true.
  • Global attributes are accepted.