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

@@ -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">

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>