Update display title overlay on Image Group Widget

templaza · Oct 23, 2024 · bae7a81 · bae7a81
1 parent 76da7a2
commit bae7a81
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 3 deletions.
diff --git a/assets/vendor/astroid/scss/widgets/_imagegroup.scss b/assets/vendor/astroid/scss/widgets/_imagegroup.scss
@@ -0,0 +1,28 @@
+.astroid-imagegroup {
+  .as-image-group-item {
+    .astroid-heading {
+      opacity: 0;
+      transform:translate3d(0,100%,0);
+      transition: opacity 600ms, transform 600ms;
+      z-index: 1;
+    }
+    &:hover {
+      .astroid-heading {
+        opacity: 1;
+        transform:translateZ(0)
+      }
+    }
+  }
+  .astroid-image-overlay-cover {
+    &:after {
+      pointer-events: none;
+      opacity: 0;
+      transition: opacity 600ms;
+    }
+    &:hover {
+      &:after {
+        opacity: 1;
+      }
+    }
+  }
+}
diff --git a/assets/vendor/astroid/scss/widgets/_widgets.scss b/assets/vendor/astroid/scss/widgets/_widgets.scss
@@ -4,4 +4,5 @@
 @import "slideshow";
 @import "list";
 @import "articles_listing";
-@import "listing_pro";
+@import "listing_pro";
+@import "imagegroup";
diff --git a/framework/elements/articles/articles.xml b/framework/elements/articles/articles.xml
@@ -462,6 +462,9 @@
                     <option value="rounded-pill">Circle</option>
                 </field>
             </fieldset>
+            <fieldset name="design-settings" label="ASTROID_ELEMENT_HEAD_DESIGN_SEETINGS_LABEL" addfieldpath="/libraries/astroid/framework/fields">
+                <field astroidgroup="animation_settings" ngShow="[animation]!=''" name="animation_element" type="astroidtext" default=".astroid-grid" label="ASTROID_ANIMATION_ELEMENT" description="ASTROID_ANIMATION_ELEMENT_DESC"/>
+            </fieldset>
             <fieldset name="assignment-settings" label="TPL_ASTROID_ASSIGNMENT_SETTINGS_LABEL" addfieldpath="/libraries/astroid/framework/fields" articleData="false">
                 <field type="astroidlist" name="assignment_type" label="ASTROID_WIDGET_ASSIGN" default="1">
                     <option value="1">ASTROID_WIDGET_ON_ALL_PAGES</option>

diff --git a/framework/elements/imagegroup/imagegroup.php b/framework/elements/imagegroup/imagegroup.php
@@ -160,12 +160,21 @@
 $box_shadow     = $params->get('box_shadow', '');
 $box_shadow     = $box_shadow !== '' ? ' ' . $box_shadow : '';
 $hover_effect   = $params->get('hover_effect', '');
-$hover_effect   = $hover_effect !== '' ? ' as-effect-' . $hover_effect : '';
+$hover_effect_cls   = $hover_effect !== '' ? ' as-effect-' . $hover_effect : ' astroid-image-overlay-cover';
 $transition     = $params->get('hover_transition', '');
 $transition     = $transition !== '' ? ' as-transition-' . $transition : '';
 
 $text_color_mode    =   $params->get('text_color_mode', '');
 $text_color_mode    =   $text_color_mode !== '' ? ' ' . $text_color_mode : '';
+
+$display_title      =   $params->get('display_title', 0);
+$title_html_element =   $params->get('title_html_element', 'h3');
+$title_font_style   =   $params->get('title_font_style');
+if (!empty($display_title) && !empty($title_font_style)) {
+    Style::renderTypography('#'.$element->id.' .astroid-heading', $title_font_style);
+}
+
+$overlay_type       =   $params->get('overlay_type', '');
 echo '<div class="'.($enable_slider ? 'astroid-slick overflow-hidden opacity-0' : $row_column_cls).$gutter_cls.$text_color_mode.'">';
 foreach ($images as $image) {
     $image_params   =   Style::getSubFormParams($image->params);
@@ -176,8 +185,9 @@
         } elseif ($use_lightbox) {
             echo '<a href="'. Astroid\Helper\Media::getMediaPath($image_params['image']).'" data-fancybox="astroid-'.$element->id.'">';
         }
-        echo '<div class="position-relative overflow-hidden' . ($enable_image_cover ? ' as-image-cover' : '') . $border_radius . $box_shadow . $hover_effect . $transition . '">';
+        echo '<div class="as-image-group-item position-relative overflow-hidden' . ($enable_image_cover ? ' as-image-cover' : '') . $border_radius . $box_shadow . $hover_effect_cls . $transition . '">';
         echo '<img src="'. Astroid\Helper\Media::getMediaPath($image_params['image']).'" alt="'.$image_params['title'].'" class="d-inline-block'.($enable_image_cover ? ' object-fit-cover w-100 h-100' : '').'">';
+        echo !empty($display_title) && !empty($image_params['title']) ? '<'.$title_html_element.' class="astroid-heading position-absolute bottom-0 w-100 p-5 m-0 pe-none">'. $image_params['title'] .'</'.$title_html_element.'>' : '';
         echo '</div>';
         if ($image_params['use_link'] || $use_lightbox) {
             echo '</a>';
@@ -205,4 +215,20 @@
     } else {
         $element->style->child('.as-image-cover')->addCss('height', $min_height . 'px');
     }
+}
+
+if ($hover_effect == '') {
+    switch ($overlay_type) {
+        case 'color':
+            $overlay_color      =   Style::getColor($params->get('overlay_color', ''));
+            $element->style->child('.astroid-image-overlay-cover:after')->addCss('background-color', $overlay_color['light']);
+            $element->style_dark->child('.astroid-image-overlay-cover:after')->addCss('background-color', $overlay_color['dark']);
+            break;
+        case 'gradient':
+            $overlay_gradient   =   $params->get('overlay_gradient', '');
+            if (!empty($overlay_gradient)) {
+                $element->style->child('.astroid-image-overlay-cover:after')->addCss('background-image', Style::getGradientValue($overlay_gradient));
+            }
+            break;
+    }
 }
diff --git a/framework/elements/imagegroup/imagegroup.xml b/framework/elements/imagegroup/imagegroup.xml
@@ -11,6 +11,7 @@
                 <field type="astroidgroup" name="column_options" title="ASTROID_WIDGET_COLUMN_OPTIONS_LABEL"/>
                 <field type="astroidgroup" name="slider_options" title="ASTROID_WIDGET_SLIDER_OPTIONS_LABEL"/>
                 <field type="astroidgroup" name="widget_styles" title="ASTROID_WIDGET_STYLES_LABEL"/>
+                <field type="astroidgroup" name="title_options" title="ASTROID_WIDGET_TITLE_OPTIONS_LABEL"/>
                 <field astroidgroup="general" name="images" type="astroidsubform" label="ASTROID_WIDGET_IMAGES_LABEL">
                     <form>
                         <fields>
@@ -247,6 +248,13 @@
                     <option value="flash">ASTROID_WIDGET_EFFECT_FLASH</option>
                     <option value="unveil">ASTROID_WIDGET_EFFECT_UNVEIL</option>
                 </field>
+                <field astroidgroup="widget_styles" ngShow="[hover_effect]==''" name="overlay_type" type="astroidradio" width="full" default="">
+                    <option value="">ASTROID_NONE</option>
+                    <option value="color">TPL_ASTROID_COLOR</option>
+                    <option value="gradient">TPL_ASTROID_GRADIENT</option>
+                </field>
+                <field astroidgroup="widget_styles" ngShow="[hover_effect]=='' AND [overlay_type]=='color'" name="overlay_color" type="astroidcolor" label="ASTROID_WIDGET_OVERLAY_COLOR" />
+                <field astroidgroup="widget_styles" ngShow="[hover_effect]=='' AND [overlay_type]=='gradient'" name="overlay_gradient" type="astroidgradient" label="ASTROID_WIDGET_OVERLAY_GRADIENT"/>
                 <field astroidgroup="widget_styles" name="hover_transition" type="astroidlist" label="ASTROID_WIDGET_HOVER_TRANSITION_LABEL" default="">
                     <option value="">TPL_ASTROID_DEFAULT</option>
                     <option value="scale-up">ASTROID_WIDGET_TRANSITION_SCALE_UP</option>
@@ -277,6 +285,17 @@
                     <option value="buzz">ASTROID_WIDGET_TRANSITION_BUZZ</option>
                     <option value="buzz-out">ASTROID_WIDGET_TRANSITION_BUZZ_OUT</option>
                 </field>
+                <field astroidgroup="title_options" name="display_title" type="astroidradio" astroid-switch="true" default="0" label="ASTROID_WIDGET_DISPLAY_TITLE"/>
+                <field astroidgroup="title_options" ngShow="[display_title]==1" name="title_html_element" type="astroidlist" label="ASTROID_WIDGET_HTML_ELEMENT_LABEL" default="h3">
+                    <option value="h1">h1</option>
+                    <option value="h2">h2</option>
+                    <option value="h3">h3</option>
+                    <option value="h4">h4</option>
+                    <option value="h5">h5</option>
+                    <option value="h6">h6</option>
+                    <option value="div">div</option>
+                </field>
+                <field astroidgroup="title_options" ngShow="[display_title]==1" name="title_font_style" label="ASTROID_WIDGET_FONT_STYLES_LABEL" type="astroidtypography" columns="1" preview="false"/>
             </fieldset>
             <fieldset name="assignment-settings" label="TPL_ASTROID_ASSIGNMENT_SETTINGS_LABEL" addfieldpath="/libraries/astroid/framework/fields" articleData="false">
                 <field type="astroidlist" name="assignment_type" label="ASTROID_WIDGET_ASSIGN" default="1">

diff --git a/language/en-GB/en-GB.astroid.ini b/language/en-GB/en-GB.astroid.ini
@@ -1573,6 +1573,7 @@ ASTROID_WIDGET_ARTICLES_ENABLE_SLIDER="Display Articler as Slider"
 ASTROID_WIDGET_IMAGE_GROUP_LABEL="Image Group"
 ASTROID_WIDGET_IMAGE_GROUP_DESC="Display image group with different styles"
 ASTROID_WIDGET_IMAGES_LABEL="Images"
+ASTROID_WIDGET_DISPLAY_TITLE="Display Title"
 
 ; Testimonials
 ASTROID_WIDGET_TESTIMONIALS_LABEL="Testimonials"