GH-83: Fix Callout Plugin, Update Styles to Match

taccsite_cms/contrib/taccsite_callout/cms_plugins.py

@@ -2,6 +2,7 @@
 from cms.plugin_pool import plugin_pool
 from django.utils.translation import gettext_lazy as _
 
+from taccsite_cms.contrib.helpers import concat_classnames
 from taccsite_cms.contrib.constants import TEXT_FOR_NESTED_PLUGIN_CONTENT_SWAP
 
 from .models import TaccsiteCallout
@@ -25,8 +26,7 @@ class TaccsiteCalloutPlugin(CMSPluginBase):
     #     'SectionPlugin'
     # ]
     child_classes = [
-        'PicturePlugin',
-        'Bootstrap4PicturePlugin'
+        'PicturePlugin'
     ]
     max_children = 1
 
@@ -36,7 +36,7 @@ class TaccsiteCalloutPlugin(CMSPluginBase):
                 'title', 'description',
             ),
         }),
-        (_('Figure'), {
+        (_('Image'), {
             'classes': ('collapse',),
             'description': TEXT_FOR_NESTED_PLUGIN_CONTENT_SWAP.format(
                 element='an image',
@@ -57,11 +57,17 @@ class TaccsiteCalloutPlugin(CMSPluginBase):
     def render(self, context, instance, placeholder):
         context = super().render(context, instance, placeholder)
         request = context['request']
-        has_children = len(instance.child_plugin_instances)
+        has_child_plugin = {}
+
+        # To identify child plugins
+        for plugin_instance in instance.child_plugin_instances:
+            if (type(plugin_instance).__name__ == 'Picture'):
+                has_child_plugin['image'] = True
+                context.update({ 'image_plugin': plugin_instance })
 
         classes = concat_classnames([
             'c-callout',
-            'c-callout--has-children' if has_children else '',
+            'c-callout--has-figure' if has_child_plugin.get('image') else '',
             instance.attributes.get('class'),
         ])
         instance.attributes['class'] = classes

taccsite_cms/contrib/taccsite_callout/templates/callout.html

@@ -3,7 +3,7 @@
 <aside {# class="c-callout" #}{{ instance.attributes_str }}>
   <h2 class="c-callout__title">{{ instance.title }}</h2>
   <p class="c-callout__desc">{{ instance.description }}</p>
-  {% if has_children %}
+  {% if image_plugin %}
   <figure class="c-callout__figure">
     {% for plugin_instance in instance.child_plugin_instances %}
       {% render_plugin plugin_instance %}

taccsite_cms/static/site_cms/css/src/_imports/components/c-callout.css

@@ -36,6 +36,7 @@ Styleguide Components.Callout
 
 .c-callout {
   display: grid;
+  grid-template-rows: auto 1fr;
 
   padding: 20px;
 }
@@ -62,11 +63,15 @@ Styleguide Components.Callout
   .c-callout--has-figure { column-gap: 40px; }
 }
 
-/* To align image to exact center */
+/* To align figure to exact center */
 .c-callout__figure {
   place-self: center;
   margin: 0; /* override Bootstrap and browser */
 }
+/* To fit (expected) figure content to available horizontal space */
+.c-callout__figure img {
+  max-width: 100%;
+}
 
 /* To force wrap before full width (to match design) */
 /* NOTE: 1200px window, design has 15px but this was 7px (wraps the same) */