TMS-970: Add image meta to cta and content-columns components

devgeniem · Oct 16, 2023 · f009924 · f009924
1 parent 8a11b6a
commit f009924
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 31 deletions.
diff --git a/CHANGELOG.MD b/CHANGELOG.MD
@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+- TMS-970: Add image meta to call-to-action and content-columns components
+
 ## [1.9.3] - 2023-10-12
 
 ### Fixed

diff --git a/partials/layouts/layout-call-to-action.dust b/partials/layouts/layout-call-to-action.dust
@@ -1,43 +1,47 @@
-<div {?anchor}id="{anchor|s}"{/anchor} class="call-to-action {accent_color|s}">
+<div {?anchor}id="{anchor|attr}"{/anchor} class="call-to-action {accent_color|attr}">
     <div class="keep-vertical-spacing">
-      
+
         {#rows}
-            <div class="call-to-action__item section is-flex is-justify-content-center pt-6 pb-6"{bg_style|s}>
-             <div class="container columns is-variable is-6 is-vcentered {container_class|s}">
-                {?image}
-                    <div class="column is-relative {img_column_class}">
-                        {>"shared/layout-after-main-content" /}
-                        <div class="image {image_class|s}">
-                            {@image id=image.id size="large" class="objectfit-image" /}
-                        </div>
-                        {?display_artist}
-                            {?image_title_and_artist}
-                               <span class="is-block pt-2 pb-2 mb-0 {txt_color_class|s}">{image_title_and_artist|s}</span>
-                            {/image_title_and_artist}
-                        {/display_artist}
-                        {>"shared/layout-before-main-content" /}
-                    </div>
-                {/image}
+            <div class="call-to-action__item section is-flex is-justify-content-center pt-6 pb-6"{bg_style|attr}>
+                <div class="container columns is-variable is-6 is-vcentered {container_class|attr}">
+                    {?image}
+                        <div class="column is-relative {img_column_class|attr}">
+                            {>"shared/layout-after-main-content" /}
+                            <div class="image {image_class|attr}">
+                                {@image id=image.id size="large" class="objectfit-image" /}
+                            </div>
 
-                <div class="column {text_column_class|s}">
-                    {?title}
-                        <h2 class="call-to-action__title h4 mt-0 {txt_color_class|s}">
-                            {title|s}
-                        </h2>
-                    {/title}
+                            {@isset key1=display_caption key2=image.caption method="and" }
+                                {>"ui/image/image-caption"  /}
+                            {/isset}
 
-                    {?description}
-                        <div class="call-to-action__description mt-6 mb-6 {txt_color_class|s}">
-                            {description|s}
+                            {?display_artist}
+                                {?image_title_and_artist}
+                                    <span class="is-block pt-2 pb-2 mb-0 {txt_color_class|attr}">{image_title_and_artist|html}</span>
+                                {/image_title_and_artist}
+                            {/display_artist}
+                            {>"shared/layout-before-main-content" /}
                         </div>
-                    {/description}
+                    {/image}
 
-                    {>"ui/button-link" classes="is-primary" icon="chevron-right" icon_classes="icon--medium"  /}
+                    <div class="column {text_column_class|attr}">
+                        {?title}
+                            <h2 class="call-to-action__title h4 mt-0 {txt_color_class|attr}">
+                                {title|html}
+                            </h2>
+                        {/title}
+
+                        {?description}
+                            <div class="call-to-action__description mt-6 mb-6 {txt_color_class|attr}">
+                                {description|kses}
+                            </div>
+                        {/description}
+
+                        {>"ui/button-link" classes="is-primary" icon="chevron-right" icon_classes="icon--medium"  /}
+                    </div>
                 </div>
             </div>
-        </div>
         {/rows}
 
-
     </div>
 </div>
diff --git a/partials/layouts/layout-content-columns.dust b/partials/layouts/layout-content-columns.dust
@@ -7,6 +7,11 @@
                         <div class="image">
                             {@image id=image.id size="large" class="objectfit-image" /}
                         </div>
+
+                        {@isset key1=display_caption key2=image.caption method="AND" }
+                            {>"ui/image/image-caption"  /}
+                        {/isset}
+
                         {?display_artist}
                             {?image_author_and_artist}
                                 <small>{image_author_and_artist|html}</small>