From 0cfb3e8e5c632e18ae94b9ed3c72823b127a4e6a Mon Sep 17 00:00:00 2001
From: songtianlun <tianlun.song@foxmail.com>
Date: Thu, 10 Apr 2025 17:41:24 +0800
Subject: [PATCH] feat: add alt text to weather art images

- Introduced alt text for featured weather art images
- Added descriptive alt attribute to improve accessibility
- Enhanced SEO and user experience for image content

This change improves the accessibility of weather art images
by providing descriptive alt text. This helps visually impaired
users and enhances the website's SEO performance.
---
 app/views/arts/index.html.erb        | 4 ++++
 app/views/weather_arts/show.html.erb | 2 ++
 2 files changed, 6 insertions(+)

diff --git a/app/views/arts/index.html.erb b/app/views/arts/index.html.erb
index d1fc094..466c7aa 100644
--- a/app/views/arts/index.html.erb
+++ b/app/views/arts/index.html.erb
@@ -7,7 +7,9 @@
     <% if featured_art&.image&.attached? %>
       <div class="absolute inset-0 h-[40vh] overflow-hidden">
         <% begin %>
+          <% alt_text = "#{art.city.full_name} Weather Art - at #{art.temperature}°C on #{art.formatted_time(:date)}" %>
           <%= image_tag featured_art.webp_image.processed,
+                      alt: alt_text,
                       class: "w-full h-full object-cover" %>
         <% rescue StandardError => e %>
           <% Rails.logger.error("image load error: #{e.message}") if defined?(Rails) %>
@@ -112,7 +114,9 @@
             <figure class="relative aspect-square overflow-hidden">
               <% if art.image.attached? %>
                 <% begin %>
+                  <% alt_text = "#{art.city.full_name} Weather Art - at #{art.temperature}°C on #{art.formatted_time(:date)}" %>
                   <%= image_tag art.preview_image.processed,
+                              alt: alt_text,
                               class: "w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-500" %>
                 <% rescue StandardError => e %>
                   <div class="w-full h-full bg-gray-200 flex items-center justify-center">
diff --git a/app/views/weather_arts/show.html.erb b/app/views/weather_arts/show.html.erb
index b1644c3..7491dda 100644
--- a/app/views/weather_arts/show.html.erb
+++ b/app/views/weather_arts/show.html.erb
@@ -46,6 +46,7 @@
           <div class="gallery" data-controller="photo-swipe-lightbox">
             <div data-photo-swipe-lightbox-target="gallery">
               <% watermarked = @weather_art.webp_image.processed %>
+              <% alt_text = "#{@weather_art.city.full_name} Weather Art - #{@weather_art.description} at #{@weather_art.temperature}°C on #{@weather_art.formatted_time(:date)}" %>
               <%= link_to rails_blob_path(watermarked),
                           data: {
                             pswp_src: rails_blob_url(watermarked),
@@ -54,6 +55,7 @@
                             pswp_height: 1024
                           } do %>
                 <%= image_tag @weather_art.preview_image(:big).processed,
+                              alt: alt_text,
                               class: "w-full h-auto object-cover transition-transform hover:scale-105 duration-300 ease-in-out" %>
               <% end %>
             </div>