Merge pull request #479 from devgeniem/TMS-970

TMS-970: Add image caption text to call-to-action and content-columns blocks
devgeniem · Oct 23, 2023 · bade877 · bade877
2 parents 747cc43 + 5c23fa5
commit bade877
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 33 deletions.
diff --git a/CHANGELOG.MD b/CHANGELOG.MD
@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+## [1.52.0] - 2023-10-23
+
+### Added
+
+- TMS-970: Add image caption text to call-to-action and content-columns blocks.
+
 ## [1.51.0] - 2023-10-12
 
 ### Fixed

diff --git a/lib/ACF/Fields/CallToActionFields.php b/lib/ACF/Fields/CallToActionFields.php
@@ -73,12 +73,18 @@ protected function sub_fields() : array {
                 'on'           => 'Näytetään',
                 'off'          => 'Ei näytetä',
             ],
+            'display_caption' => [
+                'label'        => 'Kuvateksti',
+                'instructions' => 'Näytetäänkö kuvan alla kuvateksti?',
+                'on'           => 'Näytetään',
+                'off'          => 'Ei näytetä',
+            ],
         ];
 
         $key = $this->get_key();
 
         $rows_field = ( new Field\Repeater( $strings['rows']['label'] ) )
-            ->set_key( "${key}_rows" )
+            ->set_key( "{$key}_rows" )
             ->set_name( 'rows' )
             ->set_min( 1 )
             ->set_max( 6 )
@@ -87,57 +93,67 @@ protected function sub_fields() : array {
             ->set_instructions( $strings['rows']['instructions'] );
 
         $image_field = ( new Field\Image( $strings['image']['label'] ) )
-            ->set_key( "${key}_numbers" )
+            ->set_key( "{$key}_numbers" )
             ->set_name( 'image' )
             ->set_wrapper_width( 50 )
             ->set_instructions( $strings['image']['instructions'] );
 
         $title_field = ( new Field\Text( $strings['title']['label'] ) )
-            ->set_key( "${key}_title" )
+            ->set_key( "{$key}_title" )
             ->set_name( 'title' )
             ->set_wrapper_width( 50 )
             ->set_instructions( $strings['title']['instructions'] );
 
         $description_field = ( new Field\Textarea( $strings['description']['label'] ) )
-            ->set_key( "${key}_description" )
+            ->set_key( "{$key}_description" )
             ->set_name( 'description' )
             ->set_rows( 4 )
             ->set_new_lines( 'wpautop' )
             ->set_wrapper_width( 50 )
             ->set_instructions( $strings['description']['instructions'] );
 
         $link_field = ( new Field\Link( $strings['link']['label'] ) )
-            ->set_key( "${key}_link" )
+            ->set_key( "{$key}_link" )
             ->set_name( 'link' )
             ->set_wrapper_width( 50 )
             ->set_instructions( $strings['link']['instructions'] );
 
         $layout_field = ( new Field\Radio( $strings['layout']['label'] ) )
-            ->set_key( "${key}_layout" )
+            ->set_key( "{$key}_layout" )
             ->set_name( 'layout' )
             ->set_choices( [
                 'is-image-first' => 'Kuva ensin',
                 'is-text-first'  => 'Teksti ensin',
             ] )
-            ->set_wrapper_width( 50 )
+            ->set_wrapper_width( 33 )
             ->set_instructions( $strings['layout']['instructions'] );
 
         $display_artist_field = ( new Field\TrueFalse( $strings['display_artist']['label'] ) )
-            ->set_key( "${key}_display_artist" )
+            ->set_key( "{$key}_display_artist" )
             ->set_name( 'display_artist' )
-            ->set_wrapper_width( 50 )
+            ->set_wrapper_width( 33 )
             ->use_ui()
             ->set_ui_off_text( $strings['display_artist']['off'] )
             ->set_ui_on_text( $strings['display_artist']['on'] )
             ->set_instructions( $strings['display_artist']['instructions'] );
 
+        $display_caption_field = ( new Field\TrueFalse( $strings['display_caption']['label'] ) )
+            ->set_key( "{$key}_display_caption" )
+            ->set_name( 'display_caption' )
+            ->set_wrapper_width( 33 )
+            ->use_ui()
+            ->set_ui_off_text( $strings['display_caption']['off'] )
+            ->set_ui_on_text( $strings['display_caption']['on'] )
+            ->set_instructions( $strings['display_caption']['instructions'] );
+
         $rows_field->add_fields( [
             $image_field,
             $title_field,
             $description_field,
             $link_field,
             $layout_field,
             $display_artist_field,
+            $display_caption_field,
         ] );
 
         return [

diff --git a/lib/ACF/Fields/ContentColumnsFields.php b/lib/ACF/Fields/ContentColumnsFields.php
@@ -73,12 +73,18 @@ protected function sub_fields() : array {
                 'on'           => 'Näytetään',
                 'off'          => 'Ei näytetä',
             ],
+            'display_caption' => [
+                'label'        => 'Kuvateksti',
+                'instructions' => 'Näytetäänkö kuvan alla kuvateksti?',
+                'on'           => 'Näytetään',
+                'off'          => 'Ei näytetä',
+            ],
         ];
 
         $key = $this->get_key();
 
         $rows_field = ( new Field\Repeater( $strings['rows']['label'] ) )
-            ->set_key( "${key}_rows" )
+            ->set_key( "{$key}_rows" )
             ->set_name( 'rows' )
             ->set_min( 1 )
             ->set_max( 6 )
@@ -87,62 +93,72 @@ protected function sub_fields() : array {
             ->set_instructions( $strings['rows']['instructions'] );
 
         $title_field = ( new Field\Text( $strings['title']['label'] ) )
-            ->set_key( "${key}_title" )
+            ->set_key( "{$key}_title" )
             ->set_name( 'title' )
             ->set_wrapper_width( 100 )
             ->set_instructions( $strings['title']['instructions'] );
 
         $image_field = ( new Field\Image( $strings['image']['label'] ) )
-            ->set_key( "${key}_image" )
+            ->set_key( "{$key}_image" )
             ->set_name( 'image' )
             ->set_wrapper_width( 45 )
             ->set_instructions( $strings['image']['instructions'] );
 
         $description_field = ( new Field\Textarea( $strings['description']['label'] ) )
-            ->set_key( "${key}_description" )
+            ->set_key( "{$key}_description" )
             ->set_name( 'description' )
             ->set_rows( 4 )
             ->set_new_lines( 'wpautop' )
             ->set_wrapper_width( 55 )
             ->set_instructions( $strings['description']['instructions'] );
 
         $layout_field = ( new Field\Radio( $strings['layout']['label'] ) )
-            ->set_key( "${key}_layout" )
+            ->set_key( "{$key}_layout" )
             ->set_name( 'layout' )
             ->set_choices( [
                 'is-image-first' => 'Kuva ensin',
                 'is-text-first'  => 'Teksti ensin',
             ] )
-            ->set_wrapper_width( 33 )
+            ->set_wrapper_width( 25 )
             ->set_instructions( $strings['layout']['instructions'] );
 
         $aspect_ratio_field = ( new Field\Radio( $strings['aspect_ratio']['label'] ) )
-            ->set_key( "${key}_aspect_ratio" )
+            ->set_key( "{$key}_aspect_ratio" )
             ->set_name( 'aspect_ratio' )
             ->set_choices( [
                 '50-50' => '50/50',
                 '30-70' => '30/70',
                 '70-30' => '70/30',
             ] )
-            ->set_wrapper_width( 33 )
+            ->set_wrapper_width( 25 )
             ->set_instructions( $strings['aspect_ratio']['instructions'] );
 
         $display_artist_field = ( new Field\TrueFalse( $strings['display_artist']['label'] ) )
-            ->set_key( "${key}_display_artist" )
+            ->set_key( "{$key}_display_artist" )
             ->set_name( 'display_artist' )
-            ->set_wrapper_width( 33 )
+            ->set_wrapper_width( 25 )
             ->use_ui()
             ->set_ui_off_text( $strings['display_artist']['off'] )
             ->set_ui_on_text( $strings['display_artist']['on'] )
             ->set_instructions( $strings['display_artist']['instructions'] );
 
+        $display_caption_field = ( new Field\TrueFalse( $strings['display_caption']['label'] ) )
+            ->set_key( "{$key}_display_caption" )
+            ->set_name( 'display_caption' )
+            ->set_wrapper_width( 25 )
+            ->use_ui()
+            ->set_ui_off_text( $strings['display_caption']['off'] )
+            ->set_ui_on_text( $strings['display_caption']['on'] )
+            ->set_instructions( $strings['display_caption']['instructions'] );
+
         $rows_field->add_fields( [
             $title_field,
             $image_field,
             $description_field,
             $layout_field,
             $aspect_ratio_field,
             $display_artist_field,
+            $display_caption_field,
         ] );
 
         return [

diff --git a/partials/layouts/layout-call-to-action.dust b/partials/layouts/layout-call-to-action.dust
@@ -1,31 +1,35 @@
-<div {?anchor}id="{anchor|s}"{/anchor} class="section call-to-action {accent_color|s}">
+<div {?anchor}id="{anchor|attr}"{/anchor} class="section call-to-action {accent_color|attr}">
     <div class="container keep-vertical-spacing">
         {>"shared/layout-before-main-content" /}
 
         {#rows}
-            <div class="call-to-action__item mt-6 mb-6 columns is-variable is-6 is-vcentered {container_class|s}">
+            <div class="call-to-action__item mt-6 mb-6 columns is-variable is-6 is-vcentered {container_class|attr}">
                 {?image}
                     <div class="column is-6-desktop">
-                        <div class="image is-5by3 {image_class|s}">
+                        <div class="image is-5by3 {image_class|attr}">
                             {@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}
                             {>"ui/image/image-meta-minimal"  /}
                         {/display_artist}
                     </div>
                 {/image}
 
-                <div class="column {text_column_class|s}">
+                <div class="column {text_column_class|attr}">
                     {?title}
                         <h2 class="call-to-action__title h4 mt-0">
-                            {title|s}
+                            {title|html}
                         </h2>
                     {/title}
 
                     {?description}
                         <div class="call-to-action__description mt-6 mb-6">
-                            {description|s}
+                            {description|kses}
                         </div>
                     {/description}
 

diff --git a/partials/layouts/layout-content-columns.dust b/partials/layouts/layout-content-columns.dust
@@ -1,29 +1,33 @@
-<div {?anchor}id="{anchor|s}"{/anchor} class="section content-columns">
+<div {?anchor}id="{anchor|attr}"{/anchor} class="section content-columns">
     <div class="container keep-vertical-spacing">
         {#rows}
-            <div class="content-columns__item mt-6 mb-6 columns is-vcentered {item_class|s}">
+            <div class="content-columns__item mt-6 mb-6 columns is-vcentered {item_class|attr}">
                 {?image}
-                    <div class="column {img_col_class|s}">
+                    <div class="column {img_col_class|attr}">
                         <div class="image is-5by3">
                             {@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}
-                            {>"ui/image/image-meta-minimal"  /}
+                            {>"ui/image/image-meta-minimal" /}
                         {/display_artist}
                     </div>
                 {/image}
 
-                <div class="column {text_col_class|s}">
+                <div class="column {text_col_class|attr}">
                     {?title}
                         <h2 class="content-columns__title h4 mt-0-desktop">
-                            {title|s}
+                            {title|html}
                         </h2>
                     {/title}
 
                     {?description}
                         <div class="content-columns__description mt-6 keep-vertical-spacing">
-                            {description|s}
+                            {description|kses}
                         </div>
                     {/description}
                 </div>

diff --git a/partials/ui/image/image-caption.dust b/partials/ui/image/image-caption.dust
@@ -0,0 +1,8 @@
+<div class="columns pt-2">
+    <div
+        class="column is-flex is-justify-content-space-between is-flex-wrap-wrap has-text-small">
+            <strong class="is-inline-block">
+                {image.caption|kses}
+            </strong>
+    </div>
+</div>
diff --git a/style.css b/style.css
@@ -2,7 +2,7 @@
  * Theme Name:  TMS Theme Base
  * Description: Tampere Multisite Base Theme
  * Domain Path: /lang
- * Version:     1.51.0
+ * Version:     1.52.0
  * Author:      Geniem
  * Author URI:  https://geniem.fi
  * Text Domain: tms-theme-base