Added picture align options

Signed-off-by: eknath.baravkar <[email protected]>

djangocms_picture/cms_plugins.py

@@ -54,10 +54,16 @@ class PicturePlugin(CMSPluginBase):
     ]
 
     def get_render_template(self, context, instance, placeholder):
-        return 'djangocms_picture/{}/picture.html'.format(instance.template)
+        return 'djangocms_picture/{}/picture.html'.format(instance.template)    
 
     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

djangocms_picture/models.py

@@ -25,10 +25,14 @@ def get_alignment():
             ('left', _('Align left')),
             ('right', _('Align right')),
             ('center', _('Align center')),
-            ('ltr', _('Left-to-Right')),
-            ('rtl', _('Right-to-Left')),
-            ('top', _('Top Aligned')),
-            ('bottom', _('Bottom Aligned')),
+            #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
@@ -50,7 +54,7 @@ def get_templates():
 # 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 = (
@@ -66,6 +70,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):
     """
@@ -180,6 +188,7 @@ class AbstractPicture(CMSPlugin):
         default=False,
         help_text=_('Crops the image according to the thumbnail settings provided in the template.'),
     )
+
     use_upscale = models.BooleanField(
         verbose_name=_('Upscale image'),
         blank=True,

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'),('ltr', ('Left-to-Right')),('rtl', ('Right-to-Left')),('top', ('Top Aligned')),('bottom', ('Bottom Aligned'))),
+            (('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):