improve featured_image component
This commit is contained in:
parent
23dba2b0fd
commit
8a893a6237
1 changed files with 44 additions and 33 deletions
|
@ -158,10 +158,10 @@ defmodule ChiyaWeb.PublicComponents do
|
||||||
<article class="mt-4 first:mt-0">
|
<article class="mt-4 first:mt-0">
|
||||||
<.featured_images note={note} />
|
<.featured_images note={note} />
|
||||||
|
|
||||||
<div class="prose prose-gruvbox">
|
<div class="prose prose-gruvbox mt-2">
|
||||||
<%= raw(render(note.content)) %>
|
<%= raw(render(note.content)) %>
|
||||||
</div>
|
</div>
|
||||||
<footer class="mt-1">
|
<footer class="mt-4">
|
||||||
<time class="text-theme-base/75">
|
<time class="text-theme-base/75">
|
||||||
<%= pretty_datetime(note.published_at) %>
|
<%= pretty_datetime(note.published_at) %>
|
||||||
</time>
|
</time>
|
||||||
|
@ -231,12 +231,8 @@ defmodule ChiyaWeb.PublicComponents do
|
||||||
assigns = assign(assigns, :image, List.first(images))
|
assigns = assign(assigns, :image, List.first(images))
|
||||||
|
|
||||||
~H"""
|
~H"""
|
||||||
<figure class="mb-4">
|
<figure>
|
||||||
<img
|
<.featured_image image={assigns.image} size={:full} class="rounded-lg" />
|
||||||
src={ChiyaWeb.Helpers.image_url(assigns.image, :full)}
|
|
||||||
class="rounded"
|
|
||||||
title={assigns.image.content}
|
|
||||||
/>
|
|
||||||
</figure>
|
</figure>
|
||||||
"""
|
"""
|
||||||
|
|
||||||
|
@ -248,16 +244,8 @@ defmodule ChiyaWeb.PublicComponents do
|
||||||
|
|
||||||
~H"""
|
~H"""
|
||||||
<figure class="flex gap-1">
|
<figure class="flex gap-1">
|
||||||
<img
|
<.featured_image image={assigns.first} size={:thumb} class="rounded-l flex-1 w-full" />
|
||||||
src={ChiyaWeb.Helpers.image_url(assigns.first, :thumb)}
|
<.featured_image image={assigns.second} size={:thumb} class="rounded-r flex-1 w-full" />
|
||||||
class="rounded-l flex-1 w-full"
|
|
||||||
title={assigns.first.content}
|
|
||||||
/>
|
|
||||||
<img
|
|
||||||
src={ChiyaWeb.Helpers.image_url(assigns.second, :thumb)}
|
|
||||||
class="rounded-r flex-1 w-full"
|
|
||||||
title={assigns.second.content}
|
|
||||||
/>
|
|
||||||
</figure>
|
</figure>
|
||||||
"""
|
"""
|
||||||
|
|
||||||
|
@ -270,26 +258,49 @@ defmodule ChiyaWeb.PublicComponents do
|
||||||
|
|
||||||
~H"""
|
~H"""
|
||||||
<figure class="flex gap-1">
|
<figure class="flex gap-1">
|
||||||
<img
|
<.featured_image image={assigns.first} size={:thumb} class="flex-1 w-full rounded-l" />
|
||||||
src={ChiyaWeb.Helpers.image_url(assigns.first, :thumb)}
|
<.featured_image image={assigns.second} size={:thumb} class="flex-1 w-full" />
|
||||||
class="flex-1 w-full rounded-l"
|
<.featured_image image={assigns.third} size={:thumb} class="flex-1 w-full rounded-r" />
|
||||||
title={assigns.first.content}
|
</figure>
|
||||||
/>
|
"""
|
||||||
<img
|
|
||||||
src={ChiyaWeb.Helpers.image_url(assigns.second, :thumb)}
|
_ ->
|
||||||
class="flex-1 w-full"
|
assigns =
|
||||||
title={assigns.second.content}
|
assigns
|
||||||
/>
|
|> assign(:first, Enum.at(images, 0))
|
||||||
<img
|
|> assign(:second, Enum.at(images, 1))
|
||||||
src={ChiyaWeb.Helpers.image_url(assigns.third, :thumb)}
|
|> assign(:third, Enum.at(images, 2))
|
||||||
class="flex-1 w-full rounded-r"
|
|> assign(:fourth, Enum.at(images, 3))
|
||||||
title={assigns.third.content}
|
|
||||||
/>
|
~H"""
|
||||||
|
<figure class="flex gap-1 flex-col">
|
||||||
|
<section class="flex gap-1">
|
||||||
|
<.featured_image image={assigns.first} size={:thumb} class="flex-1 w-full rounded-tl-lg" />
|
||||||
|
<.featured_image image={assigns.second} size={:thumb} class="flex-1 w-full rounded-tr-lg" />
|
||||||
|
</section>
|
||||||
|
<section class="flex gap-1">
|
||||||
|
<.featured_image image={assigns.third} size={:thumb} class="flex-1 w-full rounded-bl-lg" />
|
||||||
|
<.featured_image image={assigns.fourth} size={:thumb} class="flex-1 w-full rounded-br-lg" />
|
||||||
|
</section>
|
||||||
</figure>
|
</figure>
|
||||||
"""
|
"""
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
|
attr :image, :map, required: true
|
||||||
|
attr :class, :string
|
||||||
|
attr :size, :atom, default: :thumb
|
||||||
|
|
||||||
|
defp featured_image(assigns) do
|
||||||
|
~H"""
|
||||||
|
<img
|
||||||
|
src={ChiyaWeb.Helpers.image_url(assigns.image, assigns.size)}
|
||||||
|
class={assigns.class}
|
||||||
|
title={assigns.image.content}
|
||||||
|
/>
|
||||||
|
"""
|
||||||
|
end
|
||||||
|
|
||||||
defp gallery_name(note), do: "gallery-#{note.id}"
|
defp gallery_name(note), do: "gallery-#{note.id}"
|
||||||
|
|
||||||
defp main_images(note),
|
defp main_images(note),
|
||||||
|
|
Loading…
Reference in a new issue