Only encode urls when it is needed.

Author: patrickfournier

pelican/plugins/image_process/image_process.py

@@ -417,6 +417,14 @@ def process_img_tag(img, settings, derivative):
     process_image((path.source, destination, process), settings)
 
 
+def format_srcset_element(path, condition):
+    # space and comma have special meaning in srcset
+    if " " in path or "," in path:
+        path = urllib.parse.quote(path)
+
+    return f"{path} {condition}"
+
+
 def build_srcset(img, settings, derivative):
     path = compute_paths(img, settings, derivative)
     process = settings["IMAGE_PROCESS"][derivative]
@@ -446,8 +454,7 @@ def build_srcset(img, settings, derivative):
     srcset = []
     for src in process["srcset"]:
         file_path = posixpath.join(path.base_url, src[0], path.filename)
-        file_path = urllib.parse.quote(file_path)
-        srcset.append(f"{file_path} {src[0]}")
+        srcset.append(format_srcset_element(file_path, src[0]))
         destination = os.path.join(str(path.base_path), src[0], path.filename)
         process_image((path.source, destination, src[1]), settings)
 
@@ -535,8 +542,7 @@ def convert_div_to_picture_tag(soup, img, group, settings, derivative):
         srcset = []
         for src in s["srcset"]:
             url = os.path.join(s["base_url"], s["name"], src[0], s["filename"])
-            url = urllib.parse.quote(str(url))
-            srcset.append(f"{url} {src[0]}")
+            srcset.append(format_srcset_element(str(url), src[0]))
 
             source = os.path.join(settings["PATH"], s["url"][1:])
             destination = os.path.join(s["base_path"], s["name"], src[0], s["filename"])
@@ -644,8 +650,7 @@ def process_picture(soup, img, group, settings, derivative):
         srcset = []
         for src in s["srcset"]:
             url = posixpath.join(s["base_url"], s["name"], src[0], s["filename"])
-            url = urllib.parse.quote(str(url))
-            srcset.append(f"{url} {src[0]}")
+            srcset.append(format_srcset_element(str(url), src[0]))
 
             source = os.path.join(settings["PATH"], s["url"][1:])
             destination = os.path.join(s["base_path"], s["name"], src[0], s["filename"])

pelican/plugins/image_process/test_image_process.py

@@ -525,6 +525,12 @@ def test_html_and_pictures_generation(mocker, orig_tag, new_tag, call_args):
 @pytest.mark.parametrize(
     "orig_tag, new_tag",
     [
+        # <img/> src attribute with no quotes, spaces or commas.
+        (
+            '<img class="image-process-thumb" src="/tmp/my&amp;_dir/my!_test.jpg" />',
+            '<img class="image-process-thumb" '
+            'src="/tmp/my&amp;_dir/derivs/thumb/my!_test.jpg"/>',
+        ),
         # <img/> src attribute with double quotes, spaces and commas.
         (
             '<img class="image-process-thumb" '
@@ -539,8 +545,16 @@ def test_html_and_pictures_generation(mocker, orig_tag, new_tag, call_args):
             '<img class="image-process-thumb" '
             'src="/tmp/m\'y,&quot; dir/derivs/thumb/my &quot;test,.jpg"/>',
         ),
+        # <img/> srcset attribute with no quotes, spaces or commas.
+        (
+            '<img class="image-process-crisp" src="/tmp/my&amp;_dir/my!_test.jpg" />',
+            '<img class="image-process-crisp" '
+            'src="/tmp/my&amp;_dir/derivs/crisp/1x/my!_test.jpg" '
+            'srcset="/tmp/my&amp;_dir/derivs/crisp/1x/my!_test.jpg 1x, '
+            "/tmp/my&amp;_dir/derivs/crisp/2x/my!_test.jpg 2x, "
+            '/tmp/my&amp;_dir/derivs/crisp/4x/my!_test.jpg 4x"/>',
+        ),
         # <img/> srcset attribute with double quotes, spaces and commas.
-        # In srcset, space and comma have special meaning.
         (
             '<img class="image-process-crisp" '
             'src="/tmp/my,&quot; dir/my &#34;test,.jpg" />',
@@ -551,7 +565,6 @@ def test_html_and_pictures_generation(mocker, orig_tag, new_tag, call_args):
             '/tmp/my%2C%22%20dir/derivs/crisp/4x/my%20%22test%2C.jpg 4x"/>',
         ),
         # <img/> srcset attribute with single and double quotes, spaces and commas.
-        # In srcset, space and comma have special meaning.
         (
             '<img class="image-process-crisp" '
             'src="/tmp/m\'y,&quot; dir/my &#34;test,.jpg" />',
@@ -561,6 +574,25 @@ def test_html_and_pictures_generation(mocker, orig_tag, new_tag, call_args):
             "/tmp/m%27y%2C%22%20dir/derivs/crisp/2x/my%20%22test%2C.jpg 2x, "
             '/tmp/m%27y%2C%22%20dir/derivs/crisp/4x/my%20%22test%2C.jpg 4x"/>',
         ),
+        # <picture/> src and srcset attributes with no quotes, spaces or commas.
+        (
+            '<picture><source class="source-1" '
+            'src="/my&amp;_dir/my!_pelican-closeup.jpg"/><img '
+            'class="image-process-pict" src="/my&amp;_dir/my!_pelican.jpg"/>'
+            "</picture>",
+            '<picture><source media="(min-width: 640px)" sizes="100vw" '
+            'srcset="/my&amp;_dir/derivs/pict/default/640w/'
+            "my!_pelican.jpg 640w, "
+            "/my&amp;_dir/derivs/pict/default/1024w/my!_pelican.jpg 1024w, "
+            '/my&amp;_dir/derivs/pict/default/1600w/my!_pelican.jpg 1600w"/>'
+            '<source srcset="/my&amp;_dir/derivs/pict/source-1/1x/'
+            "my!_pelican-closeup.jpg 1x, "
+            "/my&amp;_dir/derivs/pict/source-1/2x/"
+            'my!_pelican-closeup.jpg 2x"/><img '
+            'class="image-process-pict" '
+            'src="/my&amp;_dir/derivs/pict/default/640w/my!_pelican.jpg"/>'
+            "</picture>",
+        ),
         # <picture/> src and srcset attributes with double quotes, spaces and commas.
         (
             '<picture><source class="source-1" '
@@ -611,7 +643,7 @@ def test_special_chars_in_image_path_are_handled_properly(mocker, orig_tag, new_
     according to the quotation mark used to enclose the attribute value.
 
     For the srcset attribute, in addition to quotes, spaces and commas
-    need to be escaped.
+    need to be url-encoded.
 
     Related to issue #78 https://github.com/pelican-plugins/image-process/issues/78
     """