diff --git a/djangocms_picture/cms_plugins.py b/djangocms_picture/cms_plugins.py index 0c6e972..8bfc8e2 100644 --- a/djangocms_picture/cms_plugins.py +++ b/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) diff --git a/djangocms_picture/models.py b/djangocms_picture/models.py index 1ed9b86..803f518 100644 --- a/djangocms_picture/models.py +++ b/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. diff --git a/tests/test_models.py b/tests/test_models.py index 0b7c2ad..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')), + (('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):