Merge pull request #226 from pulibrary/216-gray-rectangles

gray background image placeholders for search and item pages
pulibrary · Nov 8, 2024 · 1dc8212 · 1dc8212
2 parents 916b065 + 01c14a2
commit 1dc8212
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 14 deletions.
diff --git a/lib/dpul_collections_web/live/item_live.ex b/lib/dpul_collections_web/live/item_live.ex
@@ -37,15 +37,27 @@ defmodule DpulCollectionsWeb.ItemLive do
         <div class="pb-4"><%= @item.date %></div>
       </div>
       <div class="md:col-span-2 md:order-first">
-        <img class="w-full" src="https://picsum.photos/525/800/?random" />
+        <img
+          class="w-full"
+          src="https://picsum.photos/525/800/?random"
+          alt="main image display"
+          style="
+          background-color: lightgray;"
+          width="525"
+          height="800"
+        />
         <button class="w-full btn-primary">
           Download
         </button>
       </div>
       <section class="md:col-span-5 m:order-last py-4">
         <h2 class="text-l font-bold py-4">Pages (<%= @item.page_count %>)</h2>
         <div class="flex flex-wrap gap-5 justify-center md:justify-start">
-          <.thumbs :for={_thumb <- 1..@item.page_count} :if={@item.page_count} />
+          <.thumbs
+            :for={thumb_num <- 1..@item.page_count}
+            :if={@item.page_count}
+            thumb_num={thumb_num}
+          />
         </div>
       </section>
     </div>
@@ -58,6 +70,11 @@ defmodule DpulCollectionsWeb.ItemLive do
       <img
         class="h-[465px] w-[350px] md:h-[300px] md:w-[225px]"
         src="https://picsum.photos/350/350/?random"
+        alt={"image #{@thumb_num}"}
+        style="
+          background-color: lightgray;"
+        width="350"
+        height="465"
       />
       <button class="w-[350px] md:w-[225px] btn-primary">
         Download

diff --git a/lib/dpul_collections_web/live/search_live.ex b/lib/dpul_collections_web/live/search_live.ex
@@ -133,7 +133,7 @@ defmodule DpulCollectionsWeb.SearchLive do
     <hr />
     <div class="item">
       <div class="flex flex-wrap gap-5 md:max-h-60 max-h-[20rem] overflow-hidden justify-center md:justify-start relative">
-        <.thumbs :for={_thumb <- 1..@item.page_count} :if={@item.page_count} />
+        <.thumbs :for={thumb_num <- 1..@item.page_count} :if={@item.page_count} thumb_num={thumb_num} />
         <div :if={@item.page_count > 1} class="absolute right-0 top-0 bg-white px-4 py-2">
           <%= @item.page_count %> Pages
         </div>
@@ -152,6 +152,11 @@ defmodule DpulCollectionsWeb.SearchLive do
     <img
       class="h-[350px] w-[350px] md:h-[225px] md:w-[225px]"
       src="https://picsum.photos/350/350/?random"
+      alt={"image #{@thumb_num}"}
+      style="
+        background-color: lightgray;"
+      width="350"
+      height="350"
     />
     """
   end
@@ -186,18 +191,18 @@ defmodule DpulCollectionsWeb.SearchLive do
       <.link
         :for={{page_number, current_page?} <- pages(@page, @per_page, @total_items)}
         class={"
-          flex 
-          items-center 
-          justify-center 
-          px-3 
-          h-8 
-          leading-tight 
+          flex
+          items-center
+          justify-center
+          px-3
+          h-8
+          leading-tight
           #{if current_page?, do: "active", else: "
-              border-gray-300 
-              text-gray-500 
-              bg-white border 
-              hover:bg-gray-100 
-              hover:text-gray-700 
+              border-gray-300
+              text-gray-500
+              bg-white border
+              hover:bg-gray-100
+              hover:text-gray-700
             "}
         "}
         phx-click="paginate"