helpers\ImageLazifier: use data attribute

Use `data-selfoss-src` attribute instead of the invalid `ref` attribute.
fossar · Jun 21, 2020 · ceaf592 · ceaf592
1 parent c4299fb
commit ceaf592
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 7 deletions.
diff --git a/assets/js/lazy-image-loader.js b/assets/js/lazy-image-loader.js
@@ -6,7 +6,7 @@ import jQuery from 'jquery';
 (function($) {
     $.fn.lazyLoadImages = function() {
         $(this).find('img').each(function(i, self) {
-            $(self).attr('src', $(self).attr('ref'));
+            $(self).attr('src', $(self).attr('data-selfoss-src'));
         });
     };
 })(jQuery);
diff --git a/src/helpers/ViewHelper.php b/src/helpers/ViewHelper.php
@@ -36,7 +36,7 @@ public static function highlight($content, $searchWords) {
     }
 
     /**
-     * removes img src attribute and saves the value in ref for
+     * removes img src attribute and saves the value in data attribute for
      * loading it later
      *
      * @param string $content which contains img tags
@@ -68,7 +68,7 @@ public static function lazyimg($content) {
 
             $placeholder = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='$width' height='$height'><rect fill='%2395c9c5' width='100%' height='100%'/></svg>";
 
-            return "<img src=\"$placeholder\"{$matches['pre']}ref=\"{$matches['src']}\"{$matches['post']}>";
+            return "<img src=\"$placeholder\"{$matches['pre']}data-selfoss-src=\"{$matches['src']}\"{$matches['post']}>";
         }, $content);
     }
 

diff --git a/tests/Helpers/ImageLazifierTest.php b/tests/Helpers/ImageLazifierTest.php
@@ -14,7 +14,7 @@ public function testBasic() {
 <img foo bar src="https://example.org/example.jpg" alt="" width="900" height="400">
 EOD;
         $expected = <<<EOD
-<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='400'><rect fill='%2395c9c5' width='100%' height='100%'/></svg>" foo bar ref="https://example.org/example.jpg" alt="" width="900" height="400">
+<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='900' height='400'><rect fill='%2395c9c5' width='100%' height='100%'/></svg>" foo bar data-selfoss-src="https://example.org/example.jpg" alt="" width="900" height="400">
 EOD;
 
         $this->assertEquals(
@@ -31,7 +31,7 @@ public function testWidthMissing() {
 <img src="https://example.org/example.jpg" height="300">
 EOD;
         $expected = <<<EOD
-<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='300'><rect fill='%2395c9c5' width='100%' height='100%'/></svg>" ref="https://example.org/example.jpg" height="300">
+<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='300'><rect fill='%2395c9c5' width='100%' height='100%'/></svg>" data-selfoss-src="https://example.org/example.jpg" height="300">
 EOD;
 
         $this->assertEquals(
@@ -48,7 +48,7 @@ public function testHeightMissing() {
 <img src="https://example.org/example.jpg" width="400">
 EOD;
         $expected = <<<EOD
-<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='300'><rect fill='%2395c9c5' width='100%' height='100%'/></svg>" ref="https://example.org/example.jpg" width="400">
+<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='300'><rect fill='%2395c9c5' width='100%' height='100%'/></svg>" data-selfoss-src="https://example.org/example.jpg" width="400">
 EOD;
 
         $this->assertEquals(
@@ -65,7 +65,7 @@ public function testDimensionsMissing() {
 <img src="https://example.org/example.jpg">
 EOD;
         $expected = <<<EOD
-<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='600'><rect fill='%2395c9c5' width='100%' height='100%'/></svg>" ref="https://example.org/example.jpg">
+<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='600'><rect fill='%2395c9c5' width='100%' height='100%'/></svg>" data-selfoss-src="https://example.org/example.jpg">
 EOD;
 
         $this->assertEquals(