Place gifs correctly regardless of center tag (#16404)

* place gifs correctly regardless of center tag

* typo

* make sure the same gif src can be used twice in a post

* approach in css

app/assets/stylesheets/article-show.scss

@@ -622,3 +622,9 @@ article {
     }
   }
 }
+
+// When a user has wrapped their gif in a <center> we don't want to manipulate the position
+center .ff-container {
+  left: unset;
+  transform: none;
+}

app/javascript/utilities/animatedImageUtils.jsx

@@ -16,13 +16,17 @@ export const initializePausableAnimatedImages = (animatedImages = []) => {
   if (animatedImages.length > 0) {
     const freezeframes = [];
 
-    // Remove the surrounding links for the image, so it can be clicked to play/pause
-    for (const image of animatedImages) {
+    for (let i = 0; i < animatedImages.length; i++) {
+      const image = animatedImages[i];
+      // Give the image an ID so that we can uniquely target it in freezeframe
+      image.setAttribute('id', `animated-${i}`);
+
+      // Remove the surrounding links for the image, so it can be clicked to play/pause
       image.closest('a').outerHTML = image.outerHTML;
 
       freezeframes.push(
         new Freezeframe({
-          selector: `img[src="${image.getAttribute('src')}"]`,
+          selector: `img[id='animated-${i}']`,
           responsive: false,
           trigger: 'click',
         }),