Add Image Effect for Article Widget

templaza · Aug 13, 2024 · bf6f8f2 · bf6f8f2
1 parent ed669d7
commit bf6f8f2
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 0 deletions.
diff --git a/assets/vendor/astroid/scss/utilities/_image_effect.scss b/assets/vendor/astroid/scss/utilities/_image_effect.scss
@@ -0,0 +1,3 @@
+.as-image-effect {
+  transition: filter 0.3s ease-in-out;
+}
diff --git a/assets/vendor/astroid/scss/utilities/_utilities.scss b/assets/vendor/astroid/scss/utilities/_utilities.scss
@@ -1,4 +1,5 @@
 @import "typography";
+@import "image_effect";
 @import "width";
 @import "gutters";
 @import "columns";

diff --git a/framework/elements/articles/articles.php b/framework/elements/articles/articles.php
@@ -202,6 +202,20 @@
     $img_border_radius  = $img_border_radius !== '' ? ' ' . $img_border_radius : '';
 }
 
+// Image Effect
+$enable_image_effect=   $params->get('enable_image_effect', 0);
+$brightness         =   $params->get('brightness', '100');
+$contrast           =   $params->get('contrast', '100');
+$saturate           =   $params->get('saturate', '100');
+$blur               =   $params->get('blur', '0');
+$hue_rotate         =   $params->get('hue_rotate', '0');
+
+$brightness_hover   =   $params->get('brightness_hover', '100');
+$contrast_hover     =   $params->get('contrast_hover', '100');
+$saturate_hover     =   $params->get('saturate_hover', '100');
+$blur_hover         =   $params->get('blur_hover', '0');
+$hue_rotate_hover   =   $params->get('hue_rotate_hover', '0');
+
 $title_html_element =   $params->get('title_html_element', 'h3');
 $title_font_style   =   $params->get('title_font_style');
 if (!empty($title_font_style)) {
@@ -300,6 +314,9 @@
     if ($item_image_cover && ($item->post_format !== 'video' || $video_type !== 'local')) {
         $media  =   '<a href="'.Route::_($link).'" title="'. $item->title . '"><div class="as-image-cover d-block overflow-hidden'.($layout == 'overlay' ? ' astroid-image-overlay-cover' : '').$img_border_radius.'"><img class="object-fit-cover w-100 h-100" src="'. $item->image_thumbnail .'" alt="'.$item->title.'"></div></a>';
     }
+    if ($enable_image_effect) {
+        $media  =   '<div class="as-image-effect">' . $media . '</div>';
+    }
     echo '<div class="astroid-article-item astroid-grid '.$item->post_format.'"><div class="card overflow-hidden' . $card_style . $box_shadow . $bd_radius . ($enable_grid_match ? ' h-100' : '') . '">';
     if (($media_position == 'left' || $media_position == 'right') && !$item_image_cover && $layout == 'classic') {
         echo '<div class="row g-0">';
@@ -429,6 +446,10 @@
         $style->child('.as-slideshow-media .carousel-item')->addCss('height', $min_height . 'px');
     }
 }
+if ($enable_image_effect) {
+    $style->child('.as-image-effect')->addCss('filter', 'brightness('.$brightness.'%) contrast('.$contrast.'%) saturate('.$saturate.'%) blur('.$blur.'px) hue-rotate('.$hue_rotate.'deg)');
+    $style->child('.as-image-effect')->hover()->addCss('filter', 'brightness('.$brightness_hover.'%) contrast('.$contrast_hover.'%) saturate('.$saturate_hover.'%) blur('.$blur_hover.'px) hue-rotate('.$hue_rotate_hover.'deg)');
+}
 switch ($overlay_type) {
     case 'color':
         $overlay_color      =   Style::getColor($params->get('overlay_color', ''));

diff --git a/framework/elements/articles/articles.xml b/framework/elements/articles/articles.xml
@@ -356,6 +356,24 @@
                     <option value="4">Large</option>
                     <option value="5">X-Large</option>
                 </field>
+
+                <field astroidgroup="image_options" name="enable_image_effect" type="astroidradio" astroid-switch="true" default="0" label="ASTROID_WIDGET_ENABLE_IMAGE_EFFECT"/>
+                <field astroidgroup="image_options" ngShow="[enable_image_effect]==1" name="image_hover_type" type="astroidradio" width="full" default="normal" label="ASTROID_WIDGET_IMAGE_HOVER_EFFECT">
+                    <option value="normal">ASTROID_WIDGET_NORMAL_EFFECT</option>
+                    <option value="hover">ASTROID_WIDGET_HOVER_EFFECT</option>
+                </field>
+                <field astroidgroup="image_options" ngShow="[enable_image_effect]==1 AND [image_hover_type]=='normal'" name="brightness" type="astroidrange" min="0" max="1000" step="1" default="100" label="ASTROID_WIDGET_BRIGHTNESS" postfix="%" />
+                <field astroidgroup="image_options" ngShow="[enable_image_effect]==1 AND [image_hover_type]=='normal'" name="contrast" type="astroidrange" min="0" max="1000" step="1" default="100" label="ASTROID_WIDGET_CONTRACT" postfix="%" />
+                <field astroidgroup="image_options" ngShow="[enable_image_effect]==1 AND [image_hover_type]=='normal'" name="saturate" type="astroidrange" min="0" max="1000" step="1" default="100" label="ASTROID_WIDGET_SATURATE" postfix="%" />
+                <field astroidgroup="image_options" ngShow="[enable_image_effect]==1 AND [image_hover_type]=='normal'" name="blur" type="astroidrange" min="0" max="10" step="0.1" default="0" label="ASTROID_WIDGET_BLUR" postfix="px" />
+                <field astroidgroup="image_options" ngShow="[enable_image_effect]==1 AND [image_hover_type]=='normal'" name="hue_rotate" type="astroidrange" min="0" max="360" step="1" default="0" label="ASTROID_WIDGET_HUE" postfix="deg" />
+
+                <field astroidgroup="image_options" ngShow="[enable_image_effect]==1 AND [image_hover_type]=='hover'" name="brightness_hover" type="astroidrange" min="0" max="1000" step="1" default="100" label="ASTROID_WIDGET_BRIGHTNESS" postfix="%" />
+                <field astroidgroup="image_options" ngShow="[enable_image_effect]==1 AND [image_hover_type]=='hover'" name="contrast_hover" type="astroidrange" min="0" max="1000" step="1" default="100" label="ASTROID_WIDGET_CONTRACT" postfix="%" />
+                <field astroidgroup="image_options" ngShow="[enable_image_effect]==1 AND [image_hover_type]=='hover'" name="saturate_hover" type="astroidrange" min="0" max="1000" step="1" default="100" label="ASTROID_WIDGET_SATURATE" postfix="%" />
+                <field astroidgroup="image_options" ngShow="[enable_image_effect]==1 AND [image_hover_type]=='hover'" name="blur_hover" type="astroidrange" min="0" max="10" step="0.1" default="0" label="ASTROID_WIDGET_BLUR" postfix="px" />
+                <field astroidgroup="image_options" ngShow="[enable_image_effect]==1 AND [image_hover_type]=='hover'" name="hue_rotate_hover" type="astroidrange" min="0" max="360" step="1" default="0" label="ASTROID_WIDGET_HUE" postfix="deg" />
+
                 <field astroidgroup="image_options" name="enable_image_cover" type="astroidradio" astroid-switch="true" default="0" label="ASTROID_WIDGET_ENABLE_IMAGE_COVER"/>
                 <field astroidgroup="image_options" ngShow="[enable_image_cover]==1" name="min_height" type="astroidrange" min="1" max="1000" step="1" default="200" label="ASTROID_WIDGET_MIN_HEIGHT" postfix="px" />
                 <field astroidgroup="image_options" ngShow="[enable_image_cover]==1" type="astroidtext" class="form-control" label="JFIELD_MEDIA_HEIGHT_LABEL" name="height"/>

diff --git a/language/en-GB/en-GB.astroid.ini b/language/en-GB/en-GB.astroid.ini
@@ -1407,6 +1407,15 @@ ASTROID_WIDGET_ENABLE_ICON_LINK="Enable Icon Link"
 ASTROID_WIDGET_MIN_HEIGHT="Min Height"
 ASTROID_WIDGET_NAV_COLOR="Navigation Color"
 ASTROID_WIDGET_OVERLAY_COLOR="Overlay Color"
+ASTROID_WIDGET_ENABLE_IMAGE_EFFECT="Enable Image Effect"
+ASTROID_WIDGET_IMAGE_HOVER_EFFECT="Image Hover Effect"
+ASTROID_WIDGET_NORMAL_EFFECT="Normal Effect"
+ASTROID_WIDGET_HOVER_EFFECT="Hover Effect"
+ASTROID_WIDGET_BRIGHTNESS="Brightness"
+ASTROID_WIDGET_CONTRACT="Contract"
+ASTROID_WIDGET_SATURATE="Saturate"
+ASTROID_WIDGET_BLUR="Blur"
+ASTROID_WIDGET_HUE="Hue Rotate"
 ASTROID_WIDGET_OVERLAY_GRADIENT="Overlay Gradient"
 ASTROID_WIDGET_META_POSITION_LABEL="Meta Position"
 ASTROID_BEFORE_TITLE="Before Title"