feat: added pictures align features

djangocms_picture/cms_plugins.py

@@ -58,6 +58,11 @@ def get_render_template(self, context, instance, placeholder):
 
     def render(self, context, instance, placeholder):
         if instance.alignment:
+            # See https://getbootstrap.com/docs/5.2/content/images/#aligning-images
+            if instance.alignment != "center":
+                instance.add_classes(f"float-{instance.alignment}")
+            else:
+                instance.add_classes("mx-auto d-block")         
             classes = 'align-{} '.format(instance.alignment)
             classes += instance.attributes.get('class', '')
             # Set the class attribute to include the alignment html class
@@ -70,8 +75,6 @@ def render(self, context, instance, placeholder):
             height=context.get('height') or 0,
         )
         context['img_srcset_data'] = instance.img_srcset_data
-
         return super().render(context, instance, placeholder)
-
-
+
 plugin_pool.register_plugin(PicturePlugin)

djangocms_picture/models.py

@@ -14,7 +14,6 @@
 from filer.fields.image import FilerImageField
 from filer.models import ThumbnailOption
 
-
 # add setting for picture alignment, renders a class or inline styles
 # depending on your template setup
 def get_alignment():
@@ -25,6 +24,14 @@ def get_alignment():
             ('left', _('Align left')),
             ('right', _('Align right')),
             ('center', _('Align center')),
+            #image-float align
+            ("start", _("Float left")),            
+            ("end", _("Float right")),
+            #verticle-align
+            ('top', _('Align top')),
+            ('middle', _('Align middle')),
+            ('bottom', _('Align Bottom')),
+            ('baseline', _('Align baseline')),           
         )
     )
     return alignment
@@ -42,11 +49,10 @@ def get_templates():
     )
     return choices
 
-
 # use golden ration as default (https://en.wikipedia.org/wiki/Golden_ratio)
 PICTURE_RATIO = getattr(settings, 'DJANGOCMS_PICTURE_RATIO', 1.6180)
 
-# required for backwards compability
+# required for backwards compatiblity
 PICTURE_ALIGNMENT = get_alignment()
 
 LINK_TARGET = (
@@ -62,6 +68,10 @@ def get_templates():
     ('no', _('No')),
 )
 
+def add_classes(self, *args):
+        for arg in args:
+            if arg:
+                self._additional_classes += arg.split() if isinstance(arg, str) else arg
 
 class AbstractPicture(CMSPlugin):
     """
@@ -202,7 +212,6 @@ class AbstractPicture(CMSPlugin):
         help_text=_('Overrides width, height, and crop; scales up to the provided preset dimensions.'),
         on_delete=models.CASCADE,
     )
-
     # Add an app namespace to related_name to avoid field name clashes
     # with any other plugins that have a field with the same name as the
     # lowercase of the class name of this model.

tests/test_models.py

@@ -68,7 +68,7 @@ def test_settings(self):
         self.assertEqual(PICTURE_RATIO, 1.6180)
         self.assertEqual(
             get_alignment(),
-            (('left', 'Align left'), ('right', 'Align right'), ('center', 'Align center')),
+            (('left', 'Align left'), ('right', 'Align right'), ('center', 'Align center'),('start', 'Float left'),('end', 'Float right'),('top', 'Align top'),('middle', 'Align middle'),('bottom', 'Align Bottom'),('baseline', 'Align baseline')),
         )
 
     def test_picture_instance(self):