--- a/src/pyams_file/skin/__init__.py	Tue May 04 12:38:32 2021 +0200
+++ b/src/pyams_file/skin/__init__.py	Fri May 07 14:18:00 2021 +0200
@@ -12,6 +12,8 @@
 
 __docformat__ = 'restructuredtext'
 
+import json
+
 from pyramid.renderers import render
 from zope.interface import Interface
 
@@ -35,7 +37,8 @@
 
     def render(self, context=None, lg_thumb='lg', lg_width=12, md_thumb='md', md_width=12,
                sm_thumb='sm', sm_width=12, xs_thumb='xs', xs_width=12,
-               def_thumb=None, def_width=None, alt='', css_class='', img_width='100%'):
+               def_thumb=None, def_width=None, alt='', css_class='', pic_class=None,
+               img_width='100%', data=None):
         if context is None:
             context = self.context
         if context.content_type.startswith('image/svg'):
@@ -54,6 +57,7 @@
                 def_thumb = md_thumb or lg_thumb or sm_thumb or xs_thumb
             if def_width is None:
                 def_width = md_width or lg_width or sm_width or xs_width
+            data = json.dumps(data) if data else ''
             return render('templates/picture.pt', {
                 'image': context,
                 'lg_thumb': lg_thumb,
@@ -67,6 +71,8 @@
                 'def_thumb': def_thumb,
                 'def_width': def_width,
                 'alt': alt,
+                'pic_class': pic_class,
                 'css_class': css_class,
-                'img_width': img_width
+                'img_width': img_width,
+                'data': data
             }, request=self.request)

--- a/src/pyams_file/skin/templates/picture.pt	Tue May 04 12:38:32 2021 +0200
+++ b/src/pyams_file/skin/templates/picture.pt	Fri May 07 14:18:00 2021 +0200
@@ -1,5 +1,6 @@
 <picture tal:define="image_url tales:absolute_url(image);
-					 thumbnails tales:thumbnails(image);">
+					 thumbnails tales:thumbnails(image);"
+		 class="${pic_class}">
 	<tal:if condition="xs_width">
 		<!-- xs source -->
 		<source media="(max-width: 767px)"
@@ -50,6 +51,7 @@
 			 tal:define="width str(round(1200 / 12 * def_width));
 						 thumb thumbnails.get_thumbnail(def_thumb + ':w' + width);
 						 timestamp tales:timestamp(thumb);"
-			 alt="${alt}" src="${image_url}/++thumb++${def_thumb}:w${width}?_=${timestamp}" />
+			 alt="${alt}" src="${image_url}/++thumb++${def_thumb}:w${width}?_=${timestamp}"
+			 data-ams-data='${data}' />
 	</tal:if>
 </picture>