+
+
+
+cs.srcset
+Backport of the srcset method added to the @@images view in plone.namedfile 7.1.0 to be able to use it in older Plone versions. +It also includes an optimized @@image_helper view for Plone 6+ that uses catalog metadata to avoid N+1 performance issues in listings.
+Features
+-
+
- Adds a view called @@images-srcset for older Plone versions (backport). +
- Adds a view called @@image_helper optimized for Plone 6+ catalog metadata. +
Read more about responsive images and its use in the MDN documentation
+Documentation
+@@images-srcset
+You should use this view like this
++<img tal:define="images context/@@images-srcset;" + tal:replace="structure python:images.srcset( + fieldname='image', + scale_in_src='huge', + sizes='(min-width: 570px) 550px,90vw', + css_class='mini w-100 h-100 responsive-3-2', + alt=context.Title(), + title=context.Title(), + loading='lazy')" +/> ++
The meaning of each parameter is the following:
+-
+
- fieldname: name of the field where the image is stored +
- scale_in_src: name of the scale that will be used to render the src attribute +
- sizes: the value of the sizes attribute in the output tag +
- css_class: CSS classes added to the img tag +
- additional attributes: any aditional attribute that will be rendered in the img tag, useful to add the title, alt, loading, fetchpriority, id, and other attributes. +
@@image_helper
+This view is designed for high-performance listings in Plone 6. +It attempts to generate the <img> tag using only catalog metadata (image_scales attribute in brains), avoiding expensive getObject() calls. +If metadata is missing, it gracefully falls back to the standard @@images view logic.
+You should use this view like this
++<tal:block tal:define="helper context/@@image_helper"> + <div tal:replace="structure python:helper.srcset(item, fieldname='image', sizes='25vw', css_class='my-img')" /> +</tal:block> ++
Available methods:
+-
+
- srcset(item, fieldname='image', **kwargs): Returns a responsive <img> tag with the srcset attribute. +
- tag(item, fieldname='image', scale=None, **kwargs): Returns a fixed <img> tag (optionally for a specific scale). +
Parameters:
+-
+
- item: Either a catalog brain (recommended for performance) or a Plone object. +
- fieldname: The name of the image field (default: image). +
- scale_in_src: (Only for the srcset method) The name of the scale to use for the src attribute (default: huge). +
- scale: (Only for the tag method) The name of the scale to use for the src. +
- **kwargs: Any other HTML attributes (alt, title, loading, css_class, etc.). +
Note: Unlike standard Plone views, this helper does not provide default values for alt or loading attributes. +Developers must provide them explicitly in the template if needed. +However, it does automatically provide width and height based on the rendered scale to prevent layout shifts.
+Installation
+Install cs.srcset by adding it to your buildout:
++[buildout] + +... + +eggs = + cs.srcset ++
and then running bin/buildout
+NOTE: You do not need to install the product in the Plone add-ons controlpanel, there is nothing to be installed.
+Contribute
+-
+
- Issue Tracker: https://github.com/codesyntax/cs.srcset/issues +
- Source Code: https://github.com/codesyntax/cs.srcset +
Support
+If you are having issues, please let us know.
+License
+The project is licensed under the GPLv2.
+Contributors
+-
+
- Mikel Larreategi, mlarreategi@codesyntax.com +
Changelog
+2.0 (unreleased)
+Breaking changes
+-
+
- Remove Plone 5.2 and Python 3.7/3.8 as unsupported. @erral ([#2](https://github.com/codesyntax/cs.srcset/pull/2)) +
New features
+-
+
- Add a @@image-helper view to create image URLs from catalog metadata @erral ([#2](https://github.com/codesyntax/cs.srcset/pull/2)) +
1.2 (unreleased)
+-
+
- Nothing changed yet. +
1.1 (2025-10-14)
+-
+
- Add default width and heigth attributes if none provided when using the srcset method +[erral] +
1.0 (2025-09-24)
+-
+
- Initial release. +[codesyntax] +