diff --git a/djangocms_picture/cms_plugins.py b/djangocms_picture/cms_plugins.py index 0c6e972..9e8550a 100644 --- a/djangocms_picture/cms_plugins.py +++ b/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 diff --git a/djangocms_picture/models.py b/djangocms_picture/models.py index 47e9a5c..7825ecc 100644 --- a/djangocms_picture/models.py +++ b/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, diff --git a/tests/test_models.py b/tests/test_models.py index 76017a2..3878f87 100644 --- a/tests/test_models.py +++ b/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):