Add picture description

app/assets/stylesheets/alchemy/image_library.scss

@@ -107,6 +107,7 @@ $image-overlay-transition-easing: ease-in;
 
   form .input .select2-container,
   form .input input[type="text"],
+  form .input textarea,
   .resource_info .value p {
     width: 100%;
   }

app/components/alchemy/ingredients/picture_view.rb

@@ -101,7 +101,7 @@ def srcset_options
       end
 
       def alt_text
-        ingredient.alt_tag.presence || html_options.delete(:alt) || ingredient.picture.name&.humanize
+        html_options.delete(:alt) || ingredient.alt_text
       end
     end
   end

app/controllers/alchemy/admin/pictures_controller.rb

@@ -193,7 +193,7 @@ def search_filter_params
       end
 
       def picture_params
-        params.require(:picture).permit(:image_file, :upload_hash, :name, :tag_list)
+        params.require(:picture).permit(:image_file, :upload_hash, :name, :description, :tag_list)
       end
 
       def picture_url_params

app/models/alchemy/ingredients/picture.rb

@@ -38,6 +38,10 @@ class Picture < Alchemy::Ingredient
         upsample
       ]
 
+      def alt_text
+        alt_tag.presence || picture&.description || picture&.name&.humanize
+      end
+
       # The first 30 characters of the pictures name
       #
       # Used by the Element#preview_text method.

app/views/alchemy/admin/ingredients/_picture_fields.html.erb

@@ -1,6 +1,6 @@
 <%= f.input :caption, as: ingredient.settings[:caption_as_textarea] ? 'text' : 'string' %>
 <%= f.input :title %>
-<%= f.input :alt_tag %>
+<%= f.input :alt_tag, as: :text, placeholder: ingredient.alt_text %>
 <%- if ingredient.settings[:sizes].present? && ingredient.settings[:srcset].blank? -%>
   <%= f.input :render_size,
     collection: [

app/views/alchemy/admin/pictures/_form.html.erb

@@ -1,5 +1,6 @@
 <%= alchemy_form_for [:admin, @picture] do |f| %>
   <%= f.input :name %>
+  <%= f.input :description %>
   <div class="input tag_list">
     <%= f.label :tag_list %>
     <%= render 'alchemy/admin/partials/autocomplete_tag_list', f: f %>

db/migrate/20240208101342_add_description_to_picture.rb

@@ -0,0 +1,5 @@
+class AddDescriptionToPicture < ActiveRecord::Migration[7.0]
+  def change
+    add_column :alchemy_pictures, :description, :text
+  end
+end

spec/components/alchemy/ingredients/picture_view_spec.rb

@@ -287,6 +287,18 @@
         it "uses this as image alt text" do
           expect(page).to have_selector('img[alt="Cute kittens"]')
         end
+
+        context "with additional alt_tag" do
+          let(:ingredient) do
+            stub_model Alchemy::Ingredients::Picture,
+              picture: picture,
+              alt_tag: "not used alt text"
+          end
+
+          it "uses html option as image alt text" do
+            expect(page).to have_selector('img[alt="Cute kittens"]')
+          end
+        end
       end
 
       context "and not passed as html option" do

spec/controllers/alchemy/admin/pictures_controller_spec.rb

@@ -245,6 +245,19 @@ module Alchemy
           expect(assigns(:message)[:type]).to eq("error")
         end
       end
+
+      context "update description" do
+        let(:picture) { create(:alchemy_picture) }
+
+        subject do
+          put :update, params: {id: 1, picture: {name: "", description: "foo bar"}}, xhr: true
+        end
+
+        it "sets the description" do
+          subject
+          expect(picture.description).to eq("foo bar")
+        end
+      end
     end
 
     describe "#update_multiple" do

spec/dummy/db/migrate/20240208101342_add_description_to_picture.rb

@@ -0,0 +1,5 @@
+class AddDescriptionToPicture < ActiveRecord::Migration[7.0]
+  def change
+    add_column :alchemy_pictures, :description, :text
+  end
+end

spec/dummy/db/schema.rb

@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema[7.1].define(version: 2023_11_13_104432) do
+ActiveRecord::Schema[7.1].define(version: 2024_02_08_101342) do
   create_table "alchemy_attachments", force: :cascade do |t|
     t.string "name"
     t.string "file_name"
@@ -207,6 +207,7 @@
     t.string "image_file_uid"
     t.integer "image_file_size"
     t.string "image_file_format"
+    t.text "description"
     t.index ["creator_id"], name: "index_alchemy_pictures_on_creator_id"
     t.index ["image_file_name"], name: "index_alchemy_pictures_on_image_file_name"
     t.index ["name"], name: "index_alchemy_pictures_on_name"

spec/models/alchemy/ingredients/picture_spec.rb

@@ -24,6 +24,40 @@
     it { is_expected.to eq("A cute kitten") }
   end
 
+  describe "alt_text" do
+    subject { picture_ingredient.alt_text }
+
+    context "with a alt_tag" do
+      before { picture_ingredient.alt_tag = "A cute kitten" }
+
+      it { is_expected.to eq("A cute kitten") }
+    end
+
+    context "with a picture description" do
+      before { picture.description = "Another cute kitten" }
+
+      it { is_expected.to eq("Another cute kitten") }
+
+      context "with a alt_tag" do
+        before { picture_ingredient.alt_tag = "A cute kitten" }
+
+        it { is_expected.to eq("A cute kitten") }
+      end
+    end
+
+    context "with a picture name" do
+      before { picture.name = "cute_kitten" }
+
+      it { is_expected.to eq("Cute kitten") }
+
+      context "with a picture description" do
+        before { picture.description = "Another cute kitten" }
+
+        it { is_expected.to eq("Another cute kitten") }
+      end
+    end
+  end
+
   describe "css_class" do
     before { picture_ingredient.css_class = "download" }
     subject { picture_ingredient.css_class }