ZO-6370: add image grid module to vivi

core/src/zeit/content/article/edit/browser/configure.zcml

@@ -827,4 +827,25 @@
     permission="zope.View"
     />
 
+  <!-- ImageGrid -->
+
+
+  <browser:viewlet
+    for="zeit.content.article.edit.interfaces.IImageGrid"
+    layer="zeit.cms.browser.interfaces.ICMSLayer"
+    view="zope.interface.Interface"
+    manager="zeit.edit.interfaces.IContentViewletManager"
+    name="edit-image-grid"
+    class="zeit.edit.browser.form.FormLoader"
+    permission="zope.View"
+    />
+
+  <browser:page
+    for="zeit.content.article.edit.interfaces.IImageGrid"
+    layer="zeit.cms.browser.interfaces.ICMSLayer"
+    name="edit-image-grid"
+    class=".edit.EditImageGrid"
+    permission="zope.View"
+    />
+
 </configure>

core/src/zeit/content/article/edit/browser/edit.py

@@ -575,3 +575,14 @@ class EditAnimation(zeit.cms.browser.manual.FormMixin, zeit.edit.browser.form.In
     @property
     def prefix(self):
         return 'animation.{0}'.format(self.context.__name__)
+
+
+class EditImageGrid(zeit.edit.browser.form.InlineForm):
+    legend = ''
+    form_fields = zope.formlib.form.FormFields(
+        zeit.content.article.edit.interfaces.IImageGrid
+    ).omit(*list(zeit.edit.interfaces.IBlock))
+
+    @property
+    def prefix(self):
+        return 'image_grid.{0}'.format(self.context.__name__)

core/src/zeit/content/article/edit/configure.zcml

@@ -462,6 +462,17 @@
       />
   </class>
 
+  <class class=".image_grid.ImageGrid">
+    <require
+      interface=".interfaces.IImageGrid"
+      permission="zope.View"
+      />
+    <require
+      set_schema=".interfaces.IImageGrid"
+      permission="zeit.EditContent"
+      />
+  </class>
+
   <utility factory=".videotagesschau.from_product_config" zcml:condition="not-have zeit.cms.testing" />
   <utility factory="zeit.content.article.edit.videotagesschau.MockVideoTagesschau" zcml:condition="have zeit.cms.testing" />
 

core/src/zeit/content/article/edit/image.py

@@ -105,6 +105,22 @@ def factor_image_block_from_imagegroup(body, group, position):
     return factor_image_block_from_image(body, group, position)
 
 
+@grok.adapter(
+    zeit.content.article.edit.interfaces.IImageGrid, zeit.content.image.interfaces.IImage, int
+)
+@grok.implementer(zeit.edit.interfaces.IElement)
+def factor_image_block_from_image_grid(body, image, position):
+    return factor_image_block_from_image(body, image, position)
+
+
+@grok.adapter(
+    zeit.content.article.edit.interfaces.IImageGrid, zeit.content.image.interfaces.IImageGroup, int
+)
+@grok.implementer(zeit.edit.interfaces.IElement)
+def factor_image_block_from_imagegroup_grid(body, image, position):
+    return factor_image_block_from_image(body, image, position)
+
+
 @grok.subscribe(zeit.content.article.interfaces.IArticle, zope.lifecycleevent.IObjectModifiedEvent)
 def copy_image_to_body(context, event):
     for description in event.descriptions:

core/src/zeit/content/article/edit/image_grid.py

@@ -0,0 +1,38 @@
+import grokcore.component as grok
+
+from zeit.cms.content.property import ObjectPathAttributeProperty
+from zeit.cms.i18n import MessageFactory as _
+import zeit.cms.content.property
+import zeit.cms.content.reference
+import zeit.content.article.edit.block
+import zeit.content.article.edit.interfaces
+
+
+@grok.implementer(zeit.content.article.edit.interfaces.IImageGrid)
+class ImageGrid(zeit.content.article.edit.block.Block):
+    type = 'image_grid'
+
+    show_caption = ObjectPathAttributeProperty(
+        '.', 'show_caption', zeit.content.article.edit.interfaces.IImageGrid['show_caption']
+    )
+    size = ObjectPathAttributeProperty(
+        '.', 'size', zeit.content.article.edit.interfaces.IImageGrid['size']
+    )
+    aspect_ration = ObjectPathAttributeProperty(
+        '.', 'aspect_ration', zeit.content.article.edit.interfaces.IImageGrid['aspect_ration']
+    )
+    _images = zeit.cms.content.reference.MultiResource('.image', 'image')
+
+    @property
+    def images(self):
+        return self._images
+
+    @images.setter
+    def images(self, value):
+        # TODO: Should I convert the Image here?
+        self._images = value
+
+
+class Factory(zeit.content.article.edit.block.BlockFactory):
+    produces = ImageGrid
+    title = _('Image Grid')

core/src/zeit/content/article/edit/interfaces.py

@@ -653,3 +653,42 @@ class IIngredientDice(IBlock):
     """
 
     pass
+
+
+class ImageGridSizeSource(zeit.cms.content.sources.SimpleDictSource):
+    values = {
+        'small': _('Small'),
+        'medium': _('Medium'),
+        'large': _('Large'),
+    }
+
+
+class ImageGridAspectRationSource(zeit.cms.content.sources.SimpleDictSource):
+    values = {
+        '2-3': _('2:3'),
+        '3-2': _('3:2'),
+        '4-3': _('4:3'),
+    }
+
+
+class IImageGrid(IBlock):
+    show_caption = zope.schema.Bool(title=_('Show caption'), required=False, default=True)
+    size = zope.schema.Choice(
+        title=_('Size'),
+        source=ImageGridSizeSource(),
+        default='medium',
+        required=True,
+    )
+    aspect_ration = zope.schema.Choice(
+        title=_('Aspect ration'),
+        source=ImageGridAspectRationSource(),
+        default='2-3',
+        required=True,
+    )
+    images = zope.schema.Tuple(
+        title=_('Images'),
+        default=(),
+        max_length=3,
+        required=False,
+        value_type=zope.schema.Choice(source=zeit.content.image.interfaces.ImageGroupSource()),
+    )

core/src/zeit/content/article/edit/tests/modules.xml

@@ -29,4 +29,5 @@
   <module id="video">Video</module>
   <module id="volume">Ausgabe</module>
   <module id="videotagesschau">ARD Video</module>
+  <module id="image_grid">Bilder-Grid</module>
 </modules>