SVG and unlimited images (#47)

* svg, image style config, automatic autogeneration

* remove version

* works with unlimited images

Author: keiserjb

modules/openai_alt/js/openai_alt_autogenerate.js

@@ -1,10 +1,10 @@
 (function ($) {
   $(document).ready(function () {
     /**
-     * Ensure the correct alt field is wrapped properly.
+     * Wrap ALT fields in a container if not already done.
      */
     function wrapAltTextFields() {
-      $("input[name^='field_image'][name$='[alt]']").each(function () {
+      $("input[name$='[alt]']").each(function () {
         var $altField = $(this).closest(".form-item");
         if (!$altField.parent().hasClass("ai-alt-field-wrapper")) {
           $altField.wrap('<div class="ai-alt-field-wrapper"></div>');
@@ -13,77 +13,70 @@
     }
 
     /**
-     * Automatically trigger alt text generation on page load if needed.
+     * Generate alt text for each item that was flagged in Backdrop.settings.openaiAlt.
+     * (We only add items with empty alt in the PHP code, so we won't overwrite existing alt.)
      */
-    function triggerAutoGenerationIfNeeded() {
+    function triggerAutoGenerationForAll() {
       if (Backdrop.settings.openaiAlt) {
-        var fid = Backdrop.settings.openaiAlt.fid;
-        var fieldName = Backdrop.settings.openaiAlt.field_name;
-        var delta = Backdrop.settings.openaiAlt.delta;
-
-        // Trigger AJAX call to generate Alt text
-        $.ajax({
-          url: Backdrop.settings.basePath + "openai-alt/generate-alt-text",
-          type: "POST",
-          data: { fid: fid, field_name: fieldName, delta: delta },
-          success: function (response) {
-            if (response.status === "success" && response.alt_text) {
-              var $altField = $("input[name='" + fieldName + "[und][" + delta + "][alt]']");
-              $altField.val(response.alt_text).trigger("change");
-
-              // Ensure Backdrop recognizes the update
-              setTimeout(function () {
-                Backdrop.attachBehaviors();
-              }, 500);
-            }
-          },
-          error: function (xhr, status, error) {
-            console.error("❌ AJAX request failed:", status, error);
-          },
+        $.each(Backdrop.settings.openaiAlt, function (key, item) {
+          // item = { fid, field_name, delta, target_id, ... }
+          if (item.fid && item.field_name !== undefined && item.delta !== undefined) {
+            generateAltText(item.fid, item.field_name, item.delta);
+          }
         });
       }
     }
 
     /**
-     * Handle AJAX responses for file uploads & alt text generation.
+     * Helper: Actually call the endpoint, then place alt text in the correct input.
      */
-    $(document).ajaxComplete(function (event, xhr, settings) {
-      if (settings.url.includes("file/ajax")) {
-        setTimeout(function () {
-          if (Backdrop.settings.openaiAlt) {
-            triggerAutoGenerationIfNeeded();
-          }
-        }, 500);
-      }
-
-      // Handling response from alt text generation
-      if (settings.url.includes("openai-alt/generate-alt-text")) {
-        try {
-          var response = JSON.parse(xhr.responseText);
+    function generateAltText(fid, fieldName, delta) {
+      $.ajax({
+        url: Backdrop.settings.basePath + "openai-alt/generate-alt-text",
+        type: "POST",
+        data: { fid: fid, field_name: fieldName, delta: delta },
+        success: function (response) {
           if (response.status === "success" && response.alt_text) {
-            var $altField = $("input[name^='field_image'][name$='[alt]']");
-            $altField.val(response.alt_text).trigger("change");
+            // 1) Insert the result into the <input> for this field/delta.
+            var selector = "input[name='" + fieldName + "[und][" + delta + "][alt]']";
+            $(selector).val(response.alt_text).trigger("change");
 
-            // Ensure Backdrop recognizes the update
-            setTimeout(function () {
-              Backdrop.attachBehaviors();
-            }, 500);
+            // 2) Remove this item from openaiAlt so it won't auto-regenerate again.
+            var key = fieldName + ":" + delta;
+            if (Backdrop.settings.openaiAlt && Backdrop.settings.openaiAlt[key]) {
+              delete Backdrop.settings.openaiAlt[key];
+            }
           }
-        } catch (e) {
-          console.error("Error processing OpenAI alt text response:", e);
         }
+      });
+    }
+
+    /**
+     * After any AJAX that includes "file/ajax" (i.e. new image added),
+     * wait a moment, then try generating alt text for newly added items.
+     */
+    $(document).ajaxComplete(function (event, xhr, settings) {
+      if (settings.url.includes("file/ajax")) {
+        setTimeout(triggerAutoGenerationForAll, 500);
       }
     });
 
     /**
-     * Handle image removal events.
+     * Optional: If you remove an image, you might want to remove
+     * that item from openaiAlt. Only do so if you have data attributes
+     * for the remove button. Otherwise, leaving them won't matter
+     * because we only run alt generation for items with an empty alt
+     * (and that item is gone entirely anyway).
      */
     $(document).on("click", ".file-remove-button", function () {
-      Backdrop.settings.openaiAlt = null; // Reset settings to allow new uploads
+      // For a multi-value field, you might parse the delta from $(this).data('delta').
+      // For now, we can just do:
+      //   Backdrop.settings.openaiAlt = null;
+      // But that nixes *all* items. So be careful.
     });
 
-    // **Run initial setup**
+    // On page load, wrap all existing ALT fields, then generate for any that need it.
     wrapAltTextFields();
-    triggerAutoGenerationIfNeeded(); // Ensure auto-generation is triggered if needed
+    triggerAutoGenerationForAll();
   });
 })(jQuery);

modules/openai_alt/js/openai_alt_autogenerate_ckeditor.js

@@ -62,7 +62,7 @@ $(document).ready(function () {
 });
 
 function triggerAutoGenerate(fid, src, wrapperId) {
-  /*$.ajax({
+  $.ajax({
     url: Backdrop.settings.basePath + 'openai-alt/ckeditor-autogenerate',
     type: 'POST',
     data: {
@@ -81,5 +81,5 @@ function triggerAutoGenerate(fid, src, wrapperId) {
     error: function (xhr, status, error) {
       console.error("❌ AJAX request failed:", status, error);
     }
-  });*/
+  });
 }

modules/openai_alt/openai_alt.info

@@ -7,8 +7,3 @@ configure = admin/config/openai/openai-alt
 dependencies[] = openai
 dpendencies[] = image_effects
 dependencies[] = image_effects_coloractions
-
-; Added by Backdrop CMS packaging script on 2025-01-12
-project = openai
-version = 1.x-1.0.2
-timestamp = 1736733485