Skip to content

Add original scale's url in srcset (main) #197

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
erral merged 4 commits into from
Mar 5, 2026
Merged

Add original scale's url in srcset (main) #197

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
93ee915
add original size scale in the srcset
erral Feb 26, 2026
77d976b
avoid duplicating the scale if the original's size is one of the scales
erral Feb 26, 2026
27c2ffa
adjust the tests to use as a base an image whose size is not one of t…
erral Feb 26, 2026
ac1a5bf
Merge branch 'main' into erral-add-original-scale-url-in-srcset
erral Feb 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions news/+originalinsrcset.feature
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Add original image size url in the srcset generated in the srcset method @erral
18 changes: 18 additions & 0 deletions src/plone/namedfile/scaling.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -764,6 +764,23 @@ def srcset(
)

srcset_urls = []

# get first the original image url if its width is not in the available sizes
available_widths = [width for (width, height) in self.available_sizes.values()]
if original_width not in available_widths:
scale = storage.pre_scale(
fieldname=fieldname,
width=original_width,
height=original_height,
mode="scale",
)
if scale:
extension = scale["mimetype"].split("/")[-1].lower()
srcset_urls.append(
f'{self.context.absolute_url()}/@@images/{scale["uid"]}.{extension} {scale["width"]}w'
)

# then get the urls of the scales that are smaller than the original
for width, height in self.available_sizes.values():
if width <= original_width:
scale = storage.pre_scale(
Expand All @@ -773,6 +790,7 @@ def srcset(
srcset_urls.append(
f'{self.context.absolute_url()}/@@images/{scale["uid"]}.{extension} {scale["width"]}w'
)

attributes = {}
if title is _marker:
attributes["title"] = self.context.Title()
Expand Down
35 changes: 29 additions & 6 deletions src/plone/namedfile/tests/test_scaling.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -813,6 +813,30 @@ def testOversizedHighPixelDensityScale(self):
self.assertEqual(len(foo.srcset), 1)
self.assertEqual(foo.srcset[0]["scale"], 2)


class TestImgSrcSet(unittest.TestCase):

layer = PLONE_NAMEDFILE_INTEGRATION_TESTING

def setUp(self):
sm = getSiteManager()
sm.registerAdapter(PrimaryFieldInfo)

# We use the 900 px wide image to test that the original url
# is rendered next to the all other scale urls
data = getFile("900.jpg")
item = DummyContent()
item.image = MockNamedImage(data, "image/jpeg", "image.jpg")
self.layer["app"]._setOb("item", item)
self.item = self.layer["app"].item
self._orig_sizes = ImageScaling._sizes
self.scaling = ImageScaling(self.item, None)

def tearDown(self):
ImageScaling._sizes = self._orig_sizes
sm = getSiteManager()
sm.unregisterAdapter(PrimaryFieldInfo)

def testImgSrcSet(self):
"""test rendered srcset values"""
self.scaling.available_sizes = {
Expand All @@ -830,7 +854,7 @@ def testImgSrcSet(self):
}
tag = self.scaling.srcset("image", sizes="50vw")
base = self.item.absolute_url()
expected = f"""<img title="foo" alt="foo" sizes="50vw" srcset="{base}/@@images/image-200-....png 200w, {base}/@@images/image-128-....png 128w, {base}/@@images/image-64-....png 64w, {base}/@@images/image-32-....png 32w, {base}/@@images/image-16-....png 16w" src="{base}/@@images/image-1600-....png" width="..." height="...".../>"""
expected = f"""<img title="foo" alt="foo" sizes="50vw" srcset="{base}/@@images/image-900-....jpeg 900w, {base}/@@images/image-800-....jpeg 800w, {base}/@@images/image-600-....jpeg 600w, {base}/@@images/image-400-....jpeg 400w, {base}/@@images/image-200-....jpeg 200w, {base}/@@images/image-128-....jpeg 128w, {base}/@@images/image-64-....jpeg 64w, {base}/@@images/image-32-....jpeg 32w, {base}/@@images/image-16-....jpeg 16w" src="{base}/@@images/image-1600-....jpeg" width="..." height="..." />"""
self.assertTrue(_ellipsis_match(expected, tag.strip()))

def testImgSrcSetCustomSrc(self):
Expand All @@ -850,7 +874,7 @@ def testImgSrcSetCustomSrc(self):
}
tag = self.scaling.srcset("image", sizes="50vw", scale_in_src="mini")
base = self.item.absolute_url()
expected = f"""<img title="foo" alt="foo" sizes="50vw" srcset="{base}/@@images/image-200-....png 200w, {base}/@@images/image-128-....png 128w, {base}/@@images/image-64-....png 64w, {base}/@@images/image-32-....png 32w, {base}/@@images/image-16-....png 16w" src="{base}/@@images/image-200-....png" width="200" height="...".../>"""
expected = f"""<img title="foo" alt="foo" sizes="50vw" srcset="{base}/@@images/image-900-....jpeg 900w, {base}/@@images/image-800-....jpeg 800w, {base}/@@images/image-600-....jpeg 600w, {base}/@@images/image-400-....jpeg 400w, {base}/@@images/image-200-....jpeg 200w, {base}/@@images/image-128-....jpeg 128w, {base}/@@images/image-64-....jpeg 64w, {base}/@@images/image-32-....jpeg 32w, {base}/@@images/image-16-....jpeg 16w" src="{base}/@@images/image-200-....jpeg" width="200" height="...".../>"""
self.assertTrue(_ellipsis_match(expected, tag.strip()))

def testImgSrcSetInexistentScale(self):
Expand All @@ -874,7 +898,7 @@ def testImgSrcSetInexistentScale(self):
"image", sizes="50vw", scale_in_src="inexistent-scale-name"
)
base = self.item.absolute_url()
expected = f"""<img title="foo" alt="foo" sizes="50vw" srcset="{base}/@@images/image-200-....png 200w, {base}/@@images/image-128-....png 128w, {base}/@@images/image-64-....png 64w, {base}/@@images/image-32-....png 32w, {base}/@@images/image-16-....png 16w" src="{base}/@@images/image-200-....png" width="..." height="...".../>"""
expected = f"""<img title="foo" alt="foo" sizes="50vw" srcset="{base}/@@images/image-900-....jpeg 900w, {base}/@@images/image-800-....jpeg 800w, {base}/@@images/image-600-....jpeg 600w, {base}/@@images/image-400-....jpeg 400w, {base}/@@images/image-200-....jpeg 200w, {base}/@@images/image-128-....jpeg 128w, {base}/@@images/image-64-....jpeg 64w, {base}/@@images/image-32-....jpeg 32w, {base}/@@images/image-16-....jpeg 16w" src="{base}/@@images/image-800-....jpeg" width="..." height="...".../>"""
self.assertTrue(_ellipsis_match(expected, tag.strip()))

def testImgSrcSetCustomTitle(self):
Expand All @@ -894,7 +918,7 @@ def testImgSrcSetCustomTitle(self):
}
tag = self.scaling.srcset("image", sizes="50vw", title="My Custom Title")
base = self.item.absolute_url()
expected = f"""<img title="My Custom Title" alt="foo" sizes="50vw" srcset="{base}/@@images/image-200-....png 200w, {base}/@@images/image-128-....png 128w, {base}/@@images/image-64-....png 64w, {base}/@@images/image-32-....png 32w, {base}/@@images/image-16-....png 16w" src="{base}/@@images/image-1600-....png" width="..." height="...".../>"""
expected = f"""<img title="My Custom Title" alt="foo" sizes="50vw" srcset="{base}/@@images/image-900-....jpeg 900w, {base}/@@images/image-800-....jpeg 800w, {base}/@@images/image-600-....jpeg 600w, {base}/@@images/image-400-....jpeg 400w, {base}/@@images/image-200-....jpeg 200w, {base}/@@images/image-128-....jpeg 128w, {base}/@@images/image-64-....jpeg 64w, {base}/@@images/image-32-....jpeg 32w, {base}/@@images/image-16-....jpeg 16w" src="{base}/@@images/image-1600-....jpeg" width="..." height="...".../>"""
self.assertTrue(_ellipsis_match(expected, tag.strip()))

def testImgSrcSetAdditionalAttributes(self):
Expand All @@ -921,8 +945,7 @@ def testImgSrcSetAdditionalAttributes(self):
loading="lazy",
)
base = self.item.absolute_url()

expected = f"""<img title="My Custom Title" alt="This image shows nothing" class="my-personal-class" loading="lazy" sizes="50vw" srcset="{base}/@@images/image-200-....png 200w, {base}/@@images/image-128-....png 128w, {base}/@@images/image-64-....png 64w, {base}/@@images/image-32-....png 32w, {base}/@@images/image-16-....png 16w" src="{base}/@@images/image-1600-....png" width="..." height="...".../>"""
expected = f"""<img title="My Custom Title" alt="This image shows nothing" class="my-personal-class" loading="lazy" sizes="50vw" srcset="{base}/@@images/image-900-....jpeg 900w, {base}/@@images/image-800-....jpeg 800w, {base}/@@images/image-600-....jpeg 600w, {base}/@@images/image-400-....jpeg 400w, {base}/@@images/image-200-....jpeg 200w, {base}/@@images/image-128-....jpeg 128w, {base}/@@images/image-64-....jpeg 64w, {base}/@@images/image-32-....jpeg 32w, {base}/@@images/image-16-....jpeg 16w" src="{base}/@@images/image-1600-....jpeg" width="..." height="...".../>"""
self.assertTrue(_ellipsis_match(expected, tag.strip()))


Expand Down
Loading