<.admin_page_header back={PhoenixKit.Utils.Routes.path("/admin/settings/media")} title="Instance Dimensions" subtitle="Manage dimension presets for automatic file instance generation" /> <%!-- Info Alert --%>
<.icon name="hero-information-circle" class="w-5 h-5" />

Dimension Presets

Dimensions define the target sizes for automatic variant generation. Images are resized and videos are transcoded to these preset sizes. The migration seeds 8 default dimensions: 4 image sizes (thumbnail, small, medium, large) and 4 video variants (360p, 720p, 1080p, video_thumbnail).

<%!-- Dimensions List --%>
<%= if length(@dimensions) == 0 do %>
<.icon name="hero-photo" class="w-16 h-16 mx-auto mb-4 text-base-content/30" />

No dimensions configured

Create your first dimension preset to start generating file variants.

<.link navigate={ PhoenixKit.Utils.Routes.path("/admin/settings/media/dimensions/new/image") } class="btn btn-info" > <.icon name="hero-plus" class="w-4 h-4 mr-1" /> Add Image Dimension <.link navigate={ PhoenixKit.Utils.Routes.path("/admin/settings/media/dimensions/new/video") } class="btn btn-warning" > <.icon name="hero-plus" class="w-4 h-4 mr-1" /> Add Video Dimension
<% else %> <%!-- Image Dimensions --%>

<.icon name="hero-photo" class="w-6 h-6 mr-2" /> Image Dimensions

<.link navigate={ PhoenixKit.Utils.Routes.path("/admin/settings/media/dimensions/new/image") } class="btn btn-info" > <.icon name="hero-plus" class="w-4 h-4 mr-1" /> Add Image Dimension
<%= for dimension <- Enum.filter(@dimensions, & &1.applies_to in ["image", "both"]) do %> <% end %>
Name <%= if Enum.any?(Enum.filter(@dimensions, & &1.applies_to in ["image", "both"]), & &1.maintain_aspect_ratio) do %> Target Width / Size <% else %> Size <% end %> Mode Quality Format Status Actions
{dimension.name}
 <%= if dimension.maintain_aspect_ratio do %> {dimension.width}px <% else %> {format_dimension_size(dimension.width, dimension.height)} <% end %> <%= if dimension.maintain_aspect_ratio do %> Aspect Ratio <% else %> Fixed <% end %> {dimension.quality}% <%= if dimension.format do %> {dimension.format} <% else %> Original <% end %> <%= if dimension.enabled do %> Enabled <% else %> Disabled <% end %>
<.link navigate={ PhoenixKit.Utils.Routes.path( "/admin/settings/media/dimensions/#{dimension.uuid}/edit" ) } class="btn btn-xs btn-ghost" title="Edit dimension" > <.icon name="hero-pencil" class="w-4 h-4" />
<%!-- Video Dimensions --%>

<.icon name="hero-video-camera" class="w-6 h-6 mr-2" /> Video Dimensions

<.link navigate={ PhoenixKit.Utils.Routes.path("/admin/settings/media/dimensions/new/video") } class="btn btn-warning" > <.icon name="hero-plus" class="w-4 h-4 mr-1" /> Add Video Dimension
<%= for dimension <- Enum.filter(@dimensions, & &1.applies_to in ["video", "both"]) do %> <% end %>
Name <%= if Enum.any?(Enum.filter(@dimensions, & &1.applies_to in ["video", "both"]), & &1.maintain_aspect_ratio) do %> Target Width / Resolution <% else %> Resolution <% end %> Mode Quality (CRF) Codec Status Actions
{dimension.name}
 <%= if dimension.maintain_aspect_ratio do %> {dimension.width}px <% else %> {format_dimension_size(dimension.width, dimension.height)} <% end %> <%= if dimension.maintain_aspect_ratio do %> Aspect Ratio <% else %> Fixed <% end %> {dimension.quality} <%= if dimension.format do %> {dimension.format} <% else %> Original <% end %> <%= if dimension.enabled do %> Enabled <% else %> Disabled <% end %>
<.link navigate={ PhoenixKit.Utils.Routes.path( "/admin/settings/media/dimensions/#{dimension.uuid}/edit" ) } class="btn btn-xs btn-ghost" title="Edit dimension" > <.icon name="hero-pencil" class="w-4 h-4" />
<% end %>
<%!-- Help Section --%>
<.icon name="hero-light-bulb" class="w-5 h-5" />

Variant Generation System

Quality Settings: Images use 1-100 scale (compression quality)
Video Settings: Videos use CRF 0-51 scale (lower = higher quality)
Format Override: Leave empty to preserve original format, or specify jpg/png/webp/mp4