feat: add image alt text generation

- Introduced `image_alt` method in the WeatherArt model
- Updated image tags in views to use the new method for alt text
- Ensured consistent and descriptive alt text for better accessibility

This change improves the overall usability for screen readers and helps maintain a standard format for alt descriptions across various components in the application.

app/models/weather_art.rb

@@ -167,6 +167,10 @@ class WeatherArt < ApplicationRecord
     )
   end
 
+  def image_alt
+    "#{self.city.full_name} Weather Art - #{self.description} at #{self.temperature}°C on #{self.formatted_time(:date)}"
+  end
+
   private
 
   def create_overlay_text

app/views/arts/index.html.erb

@@ -7,9 +7,8 @@
     <% 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,
+                      alt: featured_art.image_alt,
                       class: "w-full h-full object-cover" %>
         <% rescue StandardError => e %>
           <% Rails.logger.error("image load error: #{e.message}") if defined?(Rails) %>
@@ -114,9 +113,8 @@
             <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,
+                              alt: art.image_alt,
                               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">

app/views/cities/_city.html.erb

@@ -6,6 +6,7 @@
       <!-- 图片 -->
       <figure class="aspect-[16/9] overflow-hidden">
         <%= image_tag city.latest_weather_art.preview_image.processed,
+                      alt: city.latest_weather_art.image_alt,
                       class: "w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-500" %>
       </figure>
 

app/views/cities/index.html.erb

@@ -8,6 +8,7 @@
         <% begin %>
         <div class="absolute inset-0 h-[60vh] overflow-hidden">
           <%= image_tag featured_art.webp_image.processed,
+                        alt: featured_art.image_alt,
                         class: "w-full h-full object-cover object-center" %>
         <% rescue StandardError => e %>
           <% Rails.logger.error("image load error: #{e.message}") if defined?(Rails) %>

app/views/cities/show.html.erb

@@ -5,6 +5,7 @@
     <% if @city.latest_weather_art&.image&.attached? %>
       <div class="absolute inset-0 h-[60vh] overflow-hidden">
         <%= image_tag @city.latest_weather_art.webp_image.processed,
+                      alt: @city.latest_weather_art.image_alt,
                       class: "w-full h-full object-cover object-center" %>
         <div class="absolute inset-0 bg-gradient-to-b from-base-100/40 via-base-100/80 to-base-100"></div>
       </div>

app/views/devise/shared/_links.html.erb

@@ -25,7 +25,7 @@
         <p><%= button_to omniauth_authorize_path(resource_name, provider),
                       class: "btn btn-outline w-full gap-2",
                       data: { turbo: false } do %>
-          <%= image_tag("#{provider}.svg", class: "w-5 h-5") if File.exist?(Rails.root.join("app/assets/images/#{provider}.svg")) %>
+          <%= image_tag("#{provider}.svg", alt: "#{provider}", class: "w-5 h-5") if File.exist?(Rails.root.join("app/assets/images/#{provider}.svg")) %>
             Sign in with <%= OmniAuth::Utils.camelize(provider) %></p>
         <% end %>
       <% end %>

app/views/home/_arts.html.erb

@@ -4,7 +4,9 @@
       <figure class="relative aspect-[4/3] overflow-hidden">
         <% if art.image.attached? %>
           <% begin %>
-            <%= image_tag art.preview_image&.processed, class: "w-full h-full object-cover transform hover:scale-105 transition-transform duration-500" %>
+            <%= image_tag art.preview_image&.processed,
+                          alt: art.image_alt,
+                          class: "w-full h-full object-cover transform hover:scale-105 transition-transform duration-500" %>
           <% rescue StandardError => e %>
             <!-- 图片加载失败时的替代显示 -->
             <div class="w-full h-full bg-gray-200 flex items-center justify-center">

app/views/home/index.html.erb

@@ -4,7 +4,9 @@
     <% if @latest_arts.first&.image&.attached? %>
       <div class="absolute inset-0">
         <% begin %>
-          <%= image_tag @latest_arts&.first&.webp_image&.processed, class: "w-full h-full object-cover" %>
+          <%= image_tag @latest_arts&.first&.webp_image&.processed,
+                        alt: @latest_arts.image_alt,
+                        class: "w-full h-full object-cover" %>
         <% rescue StandardError => e %>
           <% Rails.logger.error("图片加载失败: #{e.message}") if defined?(Rails) %>
         <% end %>

app/views/weather_arts/_card.html.erb

@@ -3,6 +3,7 @@
   <figure class="relative aspect-video overflow-hidden">
     <% if weather_art.image.attached? %>
       <%= image_tag weather_art.preview_image.processed,
+                    alt: weather_art.image_alt,
                     class: "w-full h-full object-cover transform hover:scale-105 transition-transform duration-500" %>
       <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/70 to-transparent">
         <div class="flex items-center justify-between text-white">

app/views/weather_arts/show.html.erb

@@ -46,7 +46,6 @@
           <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),
@@ -55,7 +54,7 @@
                             pswp_height: 1024
                           } do %>
                 <%= image_tag @weather_art.preview_image(:big).processed,
-                              alt: alt_text,
+                              alt: @weather_art.image_alt,
                               class: "w-full h-auto object-cover transition-transform hover:scale-105 duration-300 ease-in-out" %>
               <% end %>
             </div>