From 7a738f6f2ca45c6ecce080ea76e092879cc9e821 Mon Sep 17 00:00:00 2001 From: KMchaudhary Date: Thu, 15 Jan 2026 15:12:12 +0530 Subject: [PATCH 01/17] Rename the image type to card, and update default options, and unwanted image-cat options --- .../video-editor/components/SidebarLayers.js | 3 +- pages/video-editor/components/cta/ImageCTA.js | 41 ------------------- .../components/layers/CTALayer.js | 16 ++++---- 3 files changed, 9 insertions(+), 51 deletions(-) diff --git a/pages/video-editor/components/SidebarLayers.js b/pages/video-editor/components/SidebarLayers.js index abc733845..0e8174ba4 100644 --- a/pages/video-editor/components/SidebarLayers.js +++ b/pages/video-editor/components/SidebarLayers.js @@ -204,12 +204,11 @@ const SidebarLayers = ( { currentTime, onSelectLayer, onPauseVideo, duration } ) id: uuidv4(), displayTime: currentTime, type, - cta_type: 'text', + cta_type: 'image', text: '', html: '', link: '', allow_skip: true, - imageOpacity: 1, } ) ); break; case 'hotspot': diff --git a/pages/video-editor/components/cta/ImageCTA.js b/pages/video-editor/components/cta/ImageCTA.js index 351146900..a12af9dce 100644 --- a/pages/video-editor/components/cta/ImageCTA.js +++ b/pages/video-editor/components/cta/ImageCTA.js @@ -7,7 +7,6 @@ import { Button, Notice, - RangeControl, SelectControl, TextareaControl, TextControl, Icon, @@ -52,17 +51,6 @@ const ImageCTA = ( { layerID } ) => { const restURL = window.godamRestRoute.url || ''; - const imageOrientationOptions = [ - { - label: __( 'Landscape', 'godam' ), - value: 'landscape', - }, - { - label: __( 'Portrait', 'godam' ), - value: 'portrait', - }, - ]; - const openImageCTAUploader = () => { const fileFrame = wp.media( { title: __( 'Select Custom Background Image', 'godam' ), @@ -310,35 +298,6 @@ const ImageCTA = ( { layerID } ) => { ) } - - { - updateField( 'imageCtaOrientation', value ); - } } - options={ imageOrientationOptions } - value={ layer.imageCtaOrientation } - /> - -
-
- updateField( 'imageOpacity', value ) } - step={ 0.1 } - value={ layer.imageOpacity ?? 1 } - label={ __( 'Opacity of background image', 'godam' ) } - /> -
-
); }; diff --git a/pages/video-editor/components/layers/CTALayer.js b/pages/video-editor/components/layers/CTALayer.js index 2e237e4cb..514c6b6ea 100644 --- a/pages/video-editor/components/layers/CTALayer.js +++ b/pages/video-editor/components/layers/CTALayer.js @@ -55,6 +55,10 @@ const CTALayer = ( { layerID, goBack, duration } ) => { ); const ctaLayerOptions = [ + { + label: __( 'Image', 'godam' ), + value: 'image', + }, { label: __( 'Text', 'godam' ), value: 'text', @@ -63,10 +67,6 @@ const CTALayer = ( { layerID, goBack, duration } ) => { label: __( 'HTML', 'godam' ), value: 'html', }, - { - label: __( 'Image', 'godam' ), - value: 'image', - }, ]; const handleCTATypeSelect = ( val ) => { @@ -120,7 +120,7 @@ const CTALayer = ( { layerID, goBack, duration } ) => { case 'html': return ; default: - return ; + return ; } }; @@ -180,21 +180,21 @@ const CTALayer = ( { layerID, goBack, duration } ) => {
-

{ __( 'Call to Action', 'godam' ) }

+ { renderSelectedCTAInputs() } { /* Common settings */ } - + Date: Thu, 15 Jan 2026 20:08:15 +0530 Subject: [PATCH 02/17] Implement the different layout options UI --- .../layers/card-layout/media-bottom.svg | 2 + .../layers/card-layout/media-cover-text.svg | 1 + .../layers/card-layout/media-text-cover.svg | 2 + .../assets/layers/card-layout/media-text.svg | 1 + .../assets/layers/card-layout/media-top.svg | 2 + .../layers/card-layout/text-cover-media.svg | 2 + .../layers/card-layout/text-media-cover.svg | 2 + .../assets/layers/card-layout/text-media.svg | 1 + .../assets/layers/card-layout/text-only.svg | 2 + pages/video-editor/components/cta/ImageCTA.js | 113 ++++++++++++++++++ 10 files changed, 128 insertions(+) create mode 100644 pages/video-editor/assets/layers/card-layout/media-bottom.svg create mode 100644 pages/video-editor/assets/layers/card-layout/media-cover-text.svg create mode 100644 pages/video-editor/assets/layers/card-layout/media-text-cover.svg create mode 100644 pages/video-editor/assets/layers/card-layout/media-text.svg create mode 100644 pages/video-editor/assets/layers/card-layout/media-top.svg create mode 100644 pages/video-editor/assets/layers/card-layout/text-cover-media.svg create mode 100644 pages/video-editor/assets/layers/card-layout/text-media-cover.svg create mode 100644 pages/video-editor/assets/layers/card-layout/text-media.svg create mode 100644 pages/video-editor/assets/layers/card-layout/text-only.svg diff --git a/pages/video-editor/assets/layers/card-layout/media-bottom.svg b/pages/video-editor/assets/layers/card-layout/media-bottom.svg new file mode 100644 index 000000000..38dd687c9 --- /dev/null +++ b/pages/video-editor/assets/layers/card-layout/media-bottom.svg @@ -0,0 +1,2 @@ + + diff --git a/pages/video-editor/assets/layers/card-layout/media-cover-text.svg b/pages/video-editor/assets/layers/card-layout/media-cover-text.svg new file mode 100644 index 000000000..af4382552 --- /dev/null +++ b/pages/video-editor/assets/layers/card-layout/media-cover-text.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/pages/video-editor/assets/layers/card-layout/media-text-cover.svg b/pages/video-editor/assets/layers/card-layout/media-text-cover.svg new file mode 100644 index 000000000..a4b3cc842 --- /dev/null +++ b/pages/video-editor/assets/layers/card-layout/media-text-cover.svg @@ -0,0 +1,2 @@ + + diff --git a/pages/video-editor/assets/layers/card-layout/media-text.svg b/pages/video-editor/assets/layers/card-layout/media-text.svg new file mode 100644 index 000000000..1ea311cd5 --- /dev/null +++ b/pages/video-editor/assets/layers/card-layout/media-text.svg @@ -0,0 +1 @@ + diff --git a/pages/video-editor/assets/layers/card-layout/media-top.svg b/pages/video-editor/assets/layers/card-layout/media-top.svg new file mode 100644 index 000000000..91a2cdeb9 --- /dev/null +++ b/pages/video-editor/assets/layers/card-layout/media-top.svg @@ -0,0 +1,2 @@ + + diff --git a/pages/video-editor/assets/layers/card-layout/text-cover-media.svg b/pages/video-editor/assets/layers/card-layout/text-cover-media.svg new file mode 100644 index 000000000..adc1b7f2a --- /dev/null +++ b/pages/video-editor/assets/layers/card-layout/text-cover-media.svg @@ -0,0 +1,2 @@ + + diff --git a/pages/video-editor/assets/layers/card-layout/text-media-cover.svg b/pages/video-editor/assets/layers/card-layout/text-media-cover.svg new file mode 100644 index 000000000..b987aae3e --- /dev/null +++ b/pages/video-editor/assets/layers/card-layout/text-media-cover.svg @@ -0,0 +1,2 @@ + + diff --git a/pages/video-editor/assets/layers/card-layout/text-media.svg b/pages/video-editor/assets/layers/card-layout/text-media.svg new file mode 100644 index 000000000..cc0b6b1c7 --- /dev/null +++ b/pages/video-editor/assets/layers/card-layout/text-media.svg @@ -0,0 +1 @@ + diff --git a/pages/video-editor/assets/layers/card-layout/text-only.svg b/pages/video-editor/assets/layers/card-layout/text-only.svg new file mode 100644 index 000000000..f7dc36047 --- /dev/null +++ b/pages/video-editor/assets/layers/card-layout/text-only.svg @@ -0,0 +1,2 @@ + + diff --git a/pages/video-editor/components/cta/ImageCTA.js b/pages/video-editor/components/cta/ImageCTA.js index a12af9dce..7efeda132 100644 --- a/pages/video-editor/components/cta/ImageCTA.js +++ b/pages/video-editor/components/cta/ImageCTA.js @@ -27,6 +27,76 @@ import ColorPickerButton from '../shared/color-picker/ColorPickerButton.jsx'; */ import { updateLayerField } from '../../redux/slice/videoSlice'; +/** + * Layout SVG Icon Components + */ +const LayoutIcons = { + TextMediaCover: () => ( + + + + + + + ), + MediaTextCover: () => ( + + + + + + + ), + TextMedia: () => ( + + + + + + + ), + MediaText: () => ( + + + + + + + ), + MediaTop: () => ( + + + + + + + ), + MediaBottom: () => ( + + + + + + + ), + TextCoverMedia: () => ( + + + + + + + ), + TextOnly: () => ( + + + + + + + ), +}; + const ImageCTA = ( { layerID } ) => { /** * State to manage the notice message and visibility. @@ -178,6 +248,18 @@ const ImageCTA = ( { layerID } ) => { [], ); + // Layout options + const layoutOptions = [ + { label: __( 'Text Left, Image Right (Full Height)', 'godam' ), value: 'card-layout--text-imagecover', icon: 'TextMediaCover' }, + { label: __( 'Image Left, Text Right (Full Height)', 'godam' ), value: 'card-layout--imagecover-text', icon: 'MediaTextCover' }, + { label: __( 'Text Left, Image Right', 'godam' ), value: 'card-layout--text-image', icon: 'TextMedia' }, + { label: __( 'Image Left, Text Right', 'godam' ), value: 'card-layout--image-text', icon: 'MediaText' }, + { label: __( 'Image Top, Text Bottom', 'godam' ), value: 'card-layout--image-top', icon: 'MediaTop' }, + { label: __( 'Text Top, Image Bottom', 'godam' ), value: 'card-layout--image-bottom', icon: 'MediaBottom' }, + { label: __( 'Image Background', 'godam' ), value: 'card-layout--image-background', icon: 'TextCoverMedia' }, + { label: __( 'Text Only (No Image)', 'godam' ), value: 'desktop-text-only', icon: 'TextOnly' }, + ]; + return (
@@ -229,6 +311,37 @@ const ImageCTA = ( { layerID } ) => { ) }
+
+
+ { __( 'Layout', 'godam' ) } +
+
+ { layoutOptions.map( ( layout ) => { + const isSelected = ( layer?.cardLayout || 'card-layout--text-imagecover' ) === layout.value; + const IconComponent = LayoutIcons[ layout.icon ]; + return ( + + + + ); + } ) } +
+
+ Date: Fri, 16 Jan 2026 08:29:09 +0530 Subject: [PATCH 03/17] Update the Card CTA UI and make it responsive for mobile devices as well. --- inc/helpers/custom-functions.php | 87 +++-- .../layers/card-layout/media-bottom.svg | 2 - .../layers/card-layout/media-cover-text.svg | 1 - .../layers/card-layout/media-text-cover.svg | 2 - .../assets/layers/card-layout/media-text.svg | 1 - .../assets/layers/card-layout/media-top.svg | 2 - .../layers/card-layout/text-cover-media.svg | 2 - .../layers/card-layout/text-media-cover.svg | 2 - .../assets/layers/card-layout/text-media.svg | 1 - .../assets/layers/card-layout/text-only.svg | 2 - pages/video-editor/components/cta/ImageCTA.js | 32 +- .../components/layers/CTALayer.js | 74 ++-- pages/video-editor/video-control.css | 267 +++++++++++-- pages/video-editor/video-control.scss | 360 ++++++++++++++++++ 14 files changed, 705 insertions(+), 130 deletions(-) delete mode 100644 pages/video-editor/assets/layers/card-layout/media-bottom.svg delete mode 100644 pages/video-editor/assets/layers/card-layout/media-cover-text.svg delete mode 100644 pages/video-editor/assets/layers/card-layout/media-text-cover.svg delete mode 100644 pages/video-editor/assets/layers/card-layout/media-text.svg delete mode 100644 pages/video-editor/assets/layers/card-layout/media-top.svg delete mode 100644 pages/video-editor/assets/layers/card-layout/text-cover-media.svg delete mode 100644 pages/video-editor/assets/layers/card-layout/text-media-cover.svg delete mode 100644 pages/video-editor/assets/layers/card-layout/text-media.svg delete mode 100644 pages/video-editor/assets/layers/card-layout/text-only.svg create mode 100644 pages/video-editor/video-control.scss diff --git a/inc/helpers/custom-functions.php b/inc/helpers/custom-functions.php index 50ddc9e9b..61f8548d5 100644 --- a/inc/helpers/custom-functions.php +++ b/inc/helpers/custom-functions.php @@ -157,7 +157,7 @@ function rtgodam_fetch_overlay_media_url( $media_id ) { * @param array $layer Associative array containing CTA details: * - 'image' (int): Media ID for the image. * - 'imageUrlExt' (string): External URL for the image (GoDAM hosted). - * - 'imageCtaOrientation' (string): Orientation of the CTA ('portrait' or other). + * - 'cardLayout' (string): Layout type for the CTA card. * - 'imageOpacity' (float): Opacity of the image (default is 1). * - 'imageText' (string): Heading text for the CTA. * - 'imageDescription' (string): Description text for the CTA. @@ -177,45 +177,70 @@ function rtgodam_image_cta_html( $layer ) { $image_url = rtgodam_fetch_overlay_media_url( $layer['image'] ); } - // Ensure $layer is an associative array and has required fields. - $orientation_class = isset( $layer['imageCtaOrientation'] ) && 'portrait' === $layer['imageCtaOrientation'] - ? 'vertical-image-cta-container' - : 'image-cta-container'; - + $layout = isset( $layer['cardLayout'] ) ? $layer['cardLayout'] : 'card-layout--text-imagecover'; + $has_image = ! empty( $image_url ); $image_opacity = isset( $layer['imageOpacity'] ) ? $layer['imageOpacity'] : 1; $image_text = isset( $layer['imageText'] ) ? $layer['imageText'] : ''; $image_description = isset( $layer['imageDescription'] ) ? $layer['imageDescription'] : ''; - $image_link = isset( $layer['imageLink'] ) ? $layer['imageLink'] : '/'; - $cta_background_color = isset( $layer['imageCtaButtonColor'] ) ? $layer['imageCtaButtonColor'] : '#eeab95'; - $cta_button_text = ! empty( $layer['imageCtaButtonText'] ) ? $layer['imageCtaButtonText'] : 'Buy Now'; // Null coalescing with empty check. - $image_box = "
" . __( 'No Image', 'godam' ) . '
'; + $image_link = isset( $layer['imageLink'] ) ? $layer['imageLink'] : '#'; + $cta_background_color = isset( $layer['imageCtaButtonColor'] ) ? $layer['imageCtaButtonColor'] : '#000000'; + $cta_button_text = ! empty( $layer['imageCtaButtonText'] ) ? $layer['imageCtaButtonText'] : __( 'Check now', 'godam' ); + + // Generate image element. + $image_element = $has_image + ? "\"CTA" + : "
" . __( 'No Image', 'godam' ) . '
'; + + // Generate content element. + $content_element = ' +
+ ' . ( ! empty( $image_text ) ? "

{$image_text}

" : '' ) . ' + ' . ( ! empty( $image_description ) ? "

{$image_description}

" : '' ); + + if ( ! empty( $cta_button_text ) || ! empty( $image_link ) ) { + $content_element .= " +
+ + {$cta_button_text} + +
"; + } + + $content_element .= ' +
+ '; + + // Handle different layouts. + $card_content = ''; + + if ( 'desktop-text-only' === $layout ) { + // Text only - no image. + $card_content = $content_element; + } elseif ( 'card-layout--image-background' === $layout ) { + // Image background layout. + $card_content = " +
+ {$content_element} + "; + } else { + // All other layouts with image element. + $image_content = "
{$image_element}
"; - if ( ! empty( $image_url ) ) { - $image_box = "\"CTA"; + // Return based on layout order. + if ( 'card-layout--text-imagecover' === $layout || 'card-layout--text-image' === $layout || 'card-layout--image-bottom' === $layout ) { + $card_content = $content_element . $image_content; + } else { + $card_content = $image_content . $content_element; + } } return " -
-
-
- {$image_box} -
- " . ( ! empty( $image_text ) ? "

{$image_text}

" : '' ) . ' - ' . ( ! empty( $image_description ) ? "

{$image_description}

" : '' ) . " - - {$cta_button_text} - -
-
+
+
+ {$card_content}
- "; + "; } /** diff --git a/pages/video-editor/assets/layers/card-layout/media-bottom.svg b/pages/video-editor/assets/layers/card-layout/media-bottom.svg deleted file mode 100644 index 38dd687c9..000000000 --- a/pages/video-editor/assets/layers/card-layout/media-bottom.svg +++ /dev/null @@ -1,2 +0,0 @@ - - diff --git a/pages/video-editor/assets/layers/card-layout/media-cover-text.svg b/pages/video-editor/assets/layers/card-layout/media-cover-text.svg deleted file mode 100644 index af4382552..000000000 --- a/pages/video-editor/assets/layers/card-layout/media-cover-text.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/pages/video-editor/assets/layers/card-layout/media-text-cover.svg b/pages/video-editor/assets/layers/card-layout/media-text-cover.svg deleted file mode 100644 index a4b3cc842..000000000 --- a/pages/video-editor/assets/layers/card-layout/media-text-cover.svg +++ /dev/null @@ -1,2 +0,0 @@ - - diff --git a/pages/video-editor/assets/layers/card-layout/media-text.svg b/pages/video-editor/assets/layers/card-layout/media-text.svg deleted file mode 100644 index 1ea311cd5..000000000 --- a/pages/video-editor/assets/layers/card-layout/media-text.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/pages/video-editor/assets/layers/card-layout/media-top.svg b/pages/video-editor/assets/layers/card-layout/media-top.svg deleted file mode 100644 index 91a2cdeb9..000000000 --- a/pages/video-editor/assets/layers/card-layout/media-top.svg +++ /dev/null @@ -1,2 +0,0 @@ - - diff --git a/pages/video-editor/assets/layers/card-layout/text-cover-media.svg b/pages/video-editor/assets/layers/card-layout/text-cover-media.svg deleted file mode 100644 index adc1b7f2a..000000000 --- a/pages/video-editor/assets/layers/card-layout/text-cover-media.svg +++ /dev/null @@ -1,2 +0,0 @@ - - diff --git a/pages/video-editor/assets/layers/card-layout/text-media-cover.svg b/pages/video-editor/assets/layers/card-layout/text-media-cover.svg deleted file mode 100644 index b987aae3e..000000000 --- a/pages/video-editor/assets/layers/card-layout/text-media-cover.svg +++ /dev/null @@ -1,2 +0,0 @@ - - diff --git a/pages/video-editor/assets/layers/card-layout/text-media.svg b/pages/video-editor/assets/layers/card-layout/text-media.svg deleted file mode 100644 index cc0b6b1c7..000000000 --- a/pages/video-editor/assets/layers/card-layout/text-media.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/pages/video-editor/assets/layers/card-layout/text-only.svg b/pages/video-editor/assets/layers/card-layout/text-only.svg deleted file mode 100644 index f7dc36047..000000000 --- a/pages/video-editor/assets/layers/card-layout/text-only.svg +++ /dev/null @@ -1,2 +0,0 @@ - - diff --git a/pages/video-editor/components/cta/ImageCTA.js b/pages/video-editor/components/cta/ImageCTA.js index 7efeda132..00448ca66 100644 --- a/pages/video-editor/components/cta/ImageCTA.js +++ b/pages/video-editor/components/cta/ImageCTA.js @@ -31,14 +31,6 @@ import { updateLayerField } from '../../redux/slice/videoSlice'; * Layout SVG Icon Components */ const LayoutIcons = { - TextMediaCover: () => ( - - - - - - - ), MediaTextCover: () => ( @@ -47,9 +39,9 @@ const LayoutIcons = { ), - TextMedia: () => ( + TextMediaCover: () => ( - + @@ -63,6 +55,14 @@ const LayoutIcons = { ), + TextMedia: () => ( + + + + + + + ), MediaTop: () => ( @@ -315,7 +315,7 @@ const ImageCTA = ( { layerID } ) => {
{ __( 'Layout', 'godam' ) }
-
+
{ layoutOptions.map( ( layout ) => { const isSelected = ( layer?.cardLayout || 'card-layout--text-imagecover' ) === layout.value; const IconComponent = LayoutIcons[ layout.icon ]; @@ -346,12 +346,12 @@ const ImageCTA = ( { layerID } ) => { __nextHasNoMarginBottom __next40pxDefaultSize className="godam-input" - label={ __( 'Text', 'godam' ) } + label={ __( 'Title', 'godam' ) } value={ layer.imageText } onChange={ ( value ) => { updateField( 'imageText', value ); } } - placeholder={ __( 'Your text', 'godam' ) } + placeholder={ __( 'Add title here', 'godam' ) } /> { onChange={ ( value ) => { updateField( 'imageCtaButtonText', value ); } } - placeholder={ __( 'Buy Now', 'godam' ) } + placeholder={ __( 'Check now', 'godam' ) } />
{ + + ); + } ) } +
+
+
-
-
- { __( 'Layout', 'godam' ) } -
-
- { layoutOptions.map( ( layout ) => { - const isSelected = ( layer?.cardLayout || 'card-layout--text-imagecover' ) === layout.value; - const IconComponent = LayoutIcons[ layout.icon ]; - return ( - - - - ); - } ) } -
-
+ { selectedImageUrl && ( + updateField( 'imageWidth', value ) } + min={ 15 } + max={ 85 } + step={ 1 } + help={ __( 'Applies to horizontal layouts only', 'godam' ) } + /> + ) } { { layer?.cta_type === 'image' && (
-
+
{ renderImageCTA() }
From f2982d320025043391abf44ad4b8ce037822b1a2 Mon Sep 17 00:00:00 2001 From: KMchaudhary Date: Tue, 27 Jan 2026 17:15:24 +0530 Subject: [PATCH 10/17] Fix spacing issues, and only show image width for horizontal layouts --- assets/src/css/_cta-card.scss | 12 ++++++++---- pages/video-editor/components/SidebarLayers.js | 1 + pages/video-editor/components/cta/ImageCTA.js | 6 +++--- pages/video-editor/components/layers/CTALayer.js | 2 +- 4 files changed, 13 insertions(+), 8 deletions(-) diff --git a/assets/src/css/_cta-card.scss b/assets/src/css/_cta-card.scss index bb7cc103b..d718a82b7 100644 --- a/assets/src/css/_cta-card.scss +++ b/assets/src/css/_cta-card.scss @@ -58,7 +58,7 @@ $cta-card-max-width-vertical: 400px !default; // Layout: Text Left, Image Right (Full Height) &.card-layout--text-imagecover { display: grid; - grid-template-columns: calc(100% - var(--image-width, 50%)) var(--image-width, 50%); + grid-template-columns: calc(100% - 1rem -var(--image-width, 50%)) var(--image-width, 50%); gap: $cta-spacing-md; .godam-cta-card-image { @@ -69,7 +69,7 @@ $cta-card-max-width-vertical: 400px !default; // Layout: Image Left, Text Right (Full Height) &.card-layout--imagecover-text { display: grid; - grid-template-columns: var(--image-width, 50%) calc(100% - var(--image-width, 50%)); + grid-template-columns: var(--image-width, 50%) calc(100% - 1rem - var(--image-width, 50%)); gap: $cta-spacing-md; .godam-cta-card-image { @@ -81,7 +81,7 @@ $cta-card-max-width-vertical: 400px !default; // Layout: Text Left, Image Right (Half Height) &.card-layout--text-image { display: grid; - grid-template-columns: calc(100% - var(--image-width, 50%)) var(--image-width, 50%); + grid-template-columns: calc(100% - 1rem - var(--image-width, 50%)) var(--image-width, 50%); gap: $cta-spacing-md; align-items: center; @@ -93,7 +93,7 @@ $cta-card-max-width-vertical: 400px !default; // Layout: Image Left, Text Right (Half Height) &.card-layout--image-text { display: grid; - grid-template-columns: var(--image-width, 50%) calc(100% - var(--image-width, 50%)); + grid-template-columns: var(--image-width, 50%) calc(100% - 1rem - var(--image-width, 50%)); gap: $cta-spacing-md; align-items: center; @@ -178,6 +178,9 @@ $cta-card-max-width-vertical: 400px !default; // Card Content // ============================================ .godam-cta-card-content { + display: flex; + flex-direction: column; + justify-content: center; padding: $cta-spacing-md; @@ -277,6 +280,7 @@ $cta-card-max-width-vertical: 400px !default; } .godam-cta-card-content { + padding-top: 0; .card-title { font-size: $cta-font-size-md; diff --git a/pages/video-editor/components/SidebarLayers.js b/pages/video-editor/components/SidebarLayers.js index 0e8174ba4..c3d7cda2b 100644 --- a/pages/video-editor/components/SidebarLayers.js +++ b/pages/video-editor/components/SidebarLayers.js @@ -205,6 +205,7 @@ const SidebarLayers = ( { currentTime, onSelectLayer, onPauseVideo, duration } ) displayTime: currentTime, type, cta_type: 'image', + cardLayout: 'card-layout--imagecover-text', text: '', html: '', link: '', diff --git a/pages/video-editor/components/cta/ImageCTA.js b/pages/video-editor/components/cta/ImageCTA.js index a804c6545..f4457945e 100644 --- a/pages/video-editor/components/cta/ImageCTA.js +++ b/pages/video-editor/components/cta/ImageCTA.js @@ -251,10 +251,10 @@ const ImageCTA = ( { layerID } ) => { // Layout options const layoutOptions = [ - { label: __( 'Text Left, Image Right (Full Height)', 'godam' ), value: 'card-layout--text-imagecover', icon: 'TextMediaCover' }, { label: __( 'Image Left, Text Right (Full Height)', 'godam' ), value: 'card-layout--imagecover-text', icon: 'MediaTextCover' }, - { label: __( 'Text Left, Image Right', 'godam' ), value: 'card-layout--text-image', icon: 'TextMedia' }, + { label: __( 'Text Left, Image Right (Full Height)', 'godam' ), value: 'card-layout--text-imagecover', icon: 'TextMediaCover' }, { label: __( 'Image Left, Text Right', 'godam' ), value: 'card-layout--image-text', icon: 'MediaText' }, + { label: __( 'Text Left, Image Right', 'godam' ), value: 'card-layout--text-image', icon: 'TextMedia' }, { label: __( 'Image Top, Text Bottom', 'godam' ), value: 'card-layout--image-top', icon: 'MediaTop' }, { label: __( 'Text Top, Image Bottom', 'godam' ), value: 'card-layout--image-bottom', icon: 'MediaBottom' }, { label: __( 'Image Background', 'godam' ), value: 'card-layout--image-background', icon: 'TextCoverMedia' }, @@ -343,7 +343,7 @@ const ImageCTA = ( { layerID } ) => { ) }
- { selectedImageUrl && ( + { ( selectedImageUrl && [ 'card-layout--text-imagecover', 'card-layout--imagecover-text', 'card-layout--text-image', 'card-layout--image-text' ].includes( layer?.cardLayout ) ) && ( { const ctaLayerOptions = [ { - label: __( 'Image', 'godam' ), + label: __( 'Card', 'godam' ), value: 'image', }, { From d9434b3552d103f3810340694767855686910220 Mon Sep 17 00:00:00 2001 From: KMchaudhary Date: Tue, 27 Jan 2026 17:34:53 +0530 Subject: [PATCH 11/17] Fix copilot comments --- assets/src/css/godam-player.scss | 2 +- inc/helpers/custom-functions.php | 4 ++-- pages/video-editor/components/layers/CTALayer.js | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/assets/src/css/godam-player.scss b/assets/src/css/godam-player.scss index 243e5a6bf..705be2d9f 100644 --- a/assets/src/css/godam-player.scss +++ b/assets/src/css/godam-player.scss @@ -13,7 +13,7 @@ @use "./video-engagement"; // CTA Card styles - Shared component (also used in video editor) -@import './cta-card'; +@use './cta-card'; .rtgodam-video-caption { diff --git a/inc/helpers/custom-functions.php b/inc/helpers/custom-functions.php index 34d12d91e..e26b68b7e 100644 --- a/inc/helpers/custom-functions.php +++ b/inc/helpers/custom-functions.php @@ -200,13 +200,13 @@ function rtgodam_image_cta_html( $layer ) { // Generate content element. $content_element = '
- ' . ( ! empty( $image_text ) ? "

{$image_text}

" : '' ) . ' + ' . ( ! empty( $image_text ) ? "

{$image_text}

" : '' ) . ' ' . ( ! empty( $image_description ) ? "

{$image_description}

" : '' ); if ( ! empty( $cta_button_text ) || ! empty( $image_link ) ) { $content_element .= "
- + {$cta_button_text}
"; diff --git a/pages/video-editor/components/layers/CTALayer.js b/pages/video-editor/components/layers/CTALayer.js index d4c521e72..67a0083a9 100644 --- a/pages/video-editor/components/layers/CTALayer.js +++ b/pages/video-editor/components/layers/CTALayer.js @@ -141,7 +141,7 @@ const CTALayer = ( { layerID, goBack, duration } ) => { // Content element component const contentElement = (
- { layer?.imageText &&

{ layer.imageText }

} + { layer?.imageText &&

{ layer.imageText }

} { layer?.imageDescription &&

{ layer.imageDescription }

} { ( layer?.imageCtaButtonText || layer?.imageLink ) && (
@@ -150,7 +150,7 @@ const CTALayer = ( { layerID, goBack, duration } ) => { href={ layer?.imageLink || '#' } target="_blank" rel="noreferrer" - style={ { backgroundColor: layer?.imageCtaButtonColor ?? '#000', textDecoration: 'none' } } + style={ { backgroundColor: layer?.imageCtaButtonColor ?? '#000000', textDecoration: 'none' } } > { layer?.imageCtaButtonText || __( 'Check now', 'godam' ) } From 3c7225747a23e7410b41fe030016ebf468cff77c Mon Sep 17 00:00:00 2001 From: KMchaudhary Date: Tue, 27 Jan 2026 18:03:56 +0530 Subject: [PATCH 12/17] Use proper escaping functions for CTA-Cards rendering --- assets/src/css/_cta-card.scss | 2 +- inc/helpers/custom-functions.php | 115 ++++++++++++++++++++----------- 2 files changed, 76 insertions(+), 41 deletions(-) diff --git a/assets/src/css/_cta-card.scss b/assets/src/css/_cta-card.scss index d718a82b7..5ed93599c 100644 --- a/assets/src/css/_cta-card.scss +++ b/assets/src/css/_cta-card.scss @@ -273,6 +273,7 @@ $cta-card-max-width-vertical: 400px !default; .godam-cta-card-image { padding: 1rem; + padding-bottom: 0; } } @@ -280,7 +281,6 @@ $cta-card-max-width-vertical: 400px !default; } .godam-cta-card-content { - padding-top: 0; .card-title { font-size: $cta-font-size-md; diff --git a/inc/helpers/custom-functions.php b/inc/helpers/custom-functions.php index e26b68b7e..27e925a4b 100644 --- a/inc/helpers/custom-functions.php +++ b/inc/helpers/custom-functions.php @@ -169,23 +169,43 @@ function rtgodam_fetch_overlay_media_url( $media_id ) { */ function rtgodam_image_cta_html( $layer ) { // Determine if the image is a GoDAM hosted media. - $is_godam_media = is_string( $layer['image'] ) && strpos( $layer['image'], 'godam_' ) === 0; + $is_godam_media = isset( $layer['image'] ) && is_string( $layer['image'] ) && str_starts_with( $layer['image'], 'godam_' ); if ( $is_godam_media && ! empty( $layer['imageUrlExt'] ) ) { - $image_url = $layer['imageUrlExt']; + $image_url = esc_url( $layer['imageUrlExt'] ); } else { - $image_url = rtgodam_fetch_overlay_media_url( $layer['image'] ); + $image_url = esc_url( rtgodam_fetch_overlay_media_url( isset( $layer['image'] ) ? $layer['image'] : 0 ) ); } - $layout = isset( $layer['cardLayout'] ) ? $layer['cardLayout'] : 'card-layout--text-imagecover'; + // Define allowed layouts for validation. + $allowed_layouts = array( + 'card-layout--text-imagecover', + 'card-layout--text-image', + 'card-layout--image-bottom', + 'card-layout--image-background', + 'card-layout--imagecover-text', + 'card-layout--image-text', + 'desktop-text-only', + ); + + $layout = isset( $layer['cardLayout'] ) && in_array( $layer['cardLayout'], $allowed_layouts, true ) + ? $layer['cardLayout'] + : 'card-layout--text-imagecover'; + $has_image = ! empty( $image_url ); - $image_opacity = isset( $layer['imageOpacity'] ) ? $layer['imageOpacity'] : 1; - $image_width = isset( $layer['imageWidth'] ) ? $layer['imageWidth'] : 50; - $image_text = isset( $layer['imageText'] ) ? $layer['imageText'] : ''; - $image_description = isset( $layer['imageDescription'] ) ? $layer['imageDescription'] : ''; - $image_link = isset( $layer['imageLink'] ) ? $layer['imageLink'] : '#'; - $cta_background_color = isset( $layer['imageCtaButtonColor'] ) ? $layer['imageCtaButtonColor'] : '#000000'; - $cta_button_text = ! empty( $layer['imageCtaButtonText'] ) ? $layer['imageCtaButtonText'] : __( 'Check now', 'godam' ); + $image_opacity = isset( $layer['imageOpacity'] ) ? floatval( $layer['imageOpacity'] ) : 1; + $image_width = isset( $layer['imageWidth'] ) ? absint( $layer['imageWidth'] ) : 50; + $image_text = isset( $layer['imageText'] ) ? sanitize_text_field( $layer['imageText'] ) : ''; + $image_description = isset( $layer['imageDescription'] ) ? sanitize_text_field( $layer['imageDescription'] ) : ''; + $image_link = isset( $layer['imageLink'] ) ? esc_url( $layer['imageLink'] ) : '#'; + $cta_background_color = isset( $layer['imageCtaButtonColor'] ) ? sanitize_hex_color( $layer['imageCtaButtonColor'] ) : '#000000'; + $cta_button_text = ! empty( $layer['imageCtaButtonText'] ) ? sanitize_text_field( $layer['imageCtaButtonText'] ) : __( 'Check now', 'godam' ); + + // Ensure opacity is within valid range. + $image_opacity = max( 0, min( 1, $image_opacity ) ); + + // Ensure width is within valid range. + $image_width = max( 0, min( 100, $image_width ) ); // If no image is provided, force text-only layout on frontend. if ( ! $has_image ) { @@ -193,28 +213,42 @@ function rtgodam_image_cta_html( $layer ) { } // Generate image element. - $image_element = $has_image - ? "\"CTA" - : "
" . __( 'No Image', 'godam' ) . '
'; + if ( $has_image ) { + $image_element = sprintf( + '%s', + esc_url( $image_url ), + esc_attr__( 'CTA Card Image', 'godam' ), + esc_attr( $image_opacity ) + ); + } else { + $image_element = sprintf( + '
%s
', + esc_attr( $image_opacity ), + esc_html__( 'No Image', 'godam' ) + ); + } // Generate content element. - $content_element = ' -
- ' . ( ! empty( $image_text ) ? "

{$image_text}

" : '' ) . ' - ' . ( ! empty( $image_description ) ? "

{$image_description}

" : '' ); + $content_element = '
'; + + if ( ! empty( $image_text ) ) { + $content_element .= sprintf( '

%s

', esc_html( $image_text ) ); + } + + if ( ! empty( $image_description ) ) { + $content_element .= sprintf( '

%s

', esc_html( $image_description ) ); + } if ( ! empty( $cta_button_text ) || ! empty( $image_link ) ) { - $content_element .= " -
- - {$cta_button_text} - -
"; + $content_element .= sprintf( + '
%s
', + esc_url( $image_link ), + esc_attr( $cta_background_color ), + esc_html( $cta_button_text ) + ); } - $content_element .= ' -
- '; + $content_element .= '
'; // Handle different layouts. $card_content = ''; @@ -224,29 +258,30 @@ function rtgodam_image_cta_html( $layer ) { $card_content = $content_element; } elseif ( 'card-layout--image-background' === $layout ) { // Image background layout. - $card_content = " -
- {$content_element} - "; + $card_content = sprintf( + '
%s', + esc_url( $image_url ), + esc_attr( $image_opacity ), + $content_element + ); } else { // All other layouts with image element. - $image_content = "
{$image_element}
"; + $image_content = sprintf( '
%s
', $image_element ); // Return based on layout order. - if ( 'card-layout--text-imagecover' === $layout || 'card-layout--text-image' === $layout || 'card-layout--image-bottom' === $layout ) { + if ( in_array( $layout, array( 'card-layout--text-imagecover', 'card-layout--text-image', 'card-layout--image-bottom' ), true ) ) { $card_content = $content_element . $image_content; } else { $card_content = $image_content . $content_element; } } - return " -
-
- {$card_content} -
-
- "; + return sprintf( + '
%s
', + esc_attr( $layout ), + esc_attr( $image_width ), + $card_content + ); } /** From 82103f1665e786dd3d64f5e7802b9bdb63f28367 Mon Sep 17 00:00:00 2001 From: KMchaudhary Date: Tue, 27 Jan 2026 19:49:20 +0530 Subject: [PATCH 13/17] Fix text-imagecover layout --- assets/src/css/_cta-card.scss | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/assets/src/css/_cta-card.scss b/assets/src/css/_cta-card.scss index 5ed93599c..cae8014a0 100644 --- a/assets/src/css/_cta-card.scss +++ b/assets/src/css/_cta-card.scss @@ -58,7 +58,7 @@ $cta-card-max-width-vertical: 400px !default; // Layout: Text Left, Image Right (Full Height) &.card-layout--text-imagecover { display: grid; - grid-template-columns: calc(100% - 1rem -var(--image-width, 50%)) var(--image-width, 50%); + grid-template-columns: calc(100% - 1rem - var(--image-width, 50%)) var(--image-width, 50%); gap: $cta-spacing-md; .godam-cta-card-image { @@ -184,11 +184,14 @@ $cta-card-max-width-vertical: 400px !default; padding: $cta-spacing-md; - .godam-cta-card.card-layout--image-bottom &, .godam-cta-card.card-layout--image-top & { padding-top: 0; } + .godam-cta-card.card-layout--image-bottom & { + padding-bottom: 0; + } + .godam-cta-card.card-layout--image-background & { position: relative; z-index: 1; From 55571dde3df47fd2146bd552d7465cffd004cc5d Mon Sep 17 00:00:00 2001 From: KMchaudhary Date: Tue, 27 Jan 2026 19:49:20 +0530 Subject: [PATCH 14/17] Fix text-imagecover layout --- assets/src/css/_cta-card.scss | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/assets/src/css/_cta-card.scss b/assets/src/css/_cta-card.scss index 5ed93599c..b4d745ff1 100644 --- a/assets/src/css/_cta-card.scss +++ b/assets/src/css/_cta-card.scss @@ -58,7 +58,7 @@ $cta-card-max-width-vertical: 400px !default; // Layout: Text Left, Image Right (Full Height) &.card-layout--text-imagecover { display: grid; - grid-template-columns: calc(100% - 1rem -var(--image-width, 50%)) var(--image-width, 50%); + grid-template-columns: calc(100% - 1rem - var(--image-width, 50%)) var(--image-width, 50%); gap: $cta-spacing-md; .godam-cta-card-image { @@ -184,11 +184,6 @@ $cta-card-max-width-vertical: 400px !default; padding: $cta-spacing-md; - .godam-cta-card.card-layout--image-bottom &, - .godam-cta-card.card-layout--image-top & { - padding-top: 0; - } - .godam-cta-card.card-layout--image-background & { position: relative; z-index: 1; From d1af7d02083ae0c09d03b3528225d7a457ae0bd1 Mon Sep 17 00:00:00 2001 From: KMchaudhary Date: Thu, 29 Jan 2026 17:17:03 +0530 Subject: [PATCH 15/17] Address the PR feedback --- assets/src/css/_cta-card.scss | 13 ++++++++++++- inc/helpers/custom-functions.php | 6 +++--- pages/video-editor/components/cta/ImageCTA.js | 4 +++- pages/video-editor/components/layers/CTALayer.js | 3 ++- 4 files changed, 20 insertions(+), 6 deletions(-) diff --git a/assets/src/css/_cta-card.scss b/assets/src/css/_cta-card.scss index b4d745ff1..7a9c276e1 100644 --- a/assets/src/css/_cta-card.scss +++ b/assets/src/css/_cta-card.scss @@ -87,6 +87,8 @@ $cta-card-max-width-vertical: 400px !default; .godam-cta-card-image { padding-right: $cta-spacing-md; + padding-top: $cta-spacing-md; + padding-bottom: $cta-spacing-md; } } @@ -100,6 +102,8 @@ $cta-card-max-width-vertical: 400px !default; .godam-cta-card-image { order: -1; padding-left: $cta-spacing-md; + padding-top: $cta-spacing-md; + padding-bottom: $cta-spacing-md; } } @@ -263,7 +267,14 @@ $cta-card-max-width-vertical: 400px !default; grid-template-columns: 1fr; } - &.card-layout--text-image, + &.card-layout--text-image { + + .godam-cta-card-image { + padding: 1rem; + padding-top: 0; + } + } + &.card-layout--image-text { .godam-cta-card-image { diff --git a/inc/helpers/custom-functions.php b/inc/helpers/custom-functions.php index 27e925a4b..def86c938 100644 --- a/inc/helpers/custom-functions.php +++ b/inc/helpers/custom-functions.php @@ -172,9 +172,9 @@ function rtgodam_image_cta_html( $layer ) { $is_godam_media = isset( $layer['image'] ) && is_string( $layer['image'] ) && str_starts_with( $layer['image'], 'godam_' ); if ( $is_godam_media && ! empty( $layer['imageUrlExt'] ) ) { - $image_url = esc_url( $layer['imageUrlExt'] ); + $image_url = $layer['imageUrlExt']; } else { - $image_url = esc_url( rtgodam_fetch_overlay_media_url( isset( $layer['image'] ) ? $layer['image'] : 0 ) ); + $image_url = rtgodam_fetch_overlay_media_url( isset( $layer['image'] ) ? $layer['image'] : 0 ); } // Define allowed layouts for validation. @@ -197,7 +197,7 @@ function rtgodam_image_cta_html( $layer ) { $image_width = isset( $layer['imageWidth'] ) ? absint( $layer['imageWidth'] ) : 50; $image_text = isset( $layer['imageText'] ) ? sanitize_text_field( $layer['imageText'] ) : ''; $image_description = isset( $layer['imageDescription'] ) ? sanitize_text_field( $layer['imageDescription'] ) : ''; - $image_link = isset( $layer['imageLink'] ) ? esc_url( $layer['imageLink'] ) : '#'; + $image_link = isset( $layer['imageLink'] ) ? $layer['imageLink'] : '#'; $cta_background_color = isset( $layer['imageCtaButtonColor'] ) ? sanitize_hex_color( $layer['imageCtaButtonColor'] ) : '#000000'; $cta_button_text = ! empty( $layer['imageCtaButtonText'] ) ? sanitize_text_field( $layer['imageCtaButtonText'] ) : __( 'Check now', 'godam' ); diff --git a/pages/video-editor/components/cta/ImageCTA.js b/pages/video-editor/components/cta/ImageCTA.js index f4457945e..d7393d30d 100644 --- a/pages/video-editor/components/cta/ImageCTA.js +++ b/pages/video-editor/components/cta/ImageCTA.js @@ -261,6 +261,8 @@ const ImageCTA = ( { layerID } ) => { { label: __( 'Text Only (No Image)', 'godam' ), value: 'desktop-text-only', icon: 'TextOnly' }, ]; + const layoutsWithWidth = [ 'card-layout--text-imagecover', 'card-layout--imagecover-text', 'card-layout--text-image', 'card-layout--image-text' ]; + return (
@@ -343,7 +345,7 @@ const ImageCTA = ( { layerID } ) => { ) }
- { ( selectedImageUrl && [ 'card-layout--text-imagecover', 'card-layout--imagecover-text', 'card-layout--text-image', 'card-layout--image-text' ].includes( layer?.cardLayout ) ) && ( + { ( selectedImageUrl && layoutsWithWidth?.includes( layer?.cardLayout ) ) && ( { // All other layouts with image element const imageContent =
{ imageElement }
; + const textMediaLayerouts = [ 'card-layout--text-imagecover', 'card-layout--text-image', 'card-layout--image-bottom' ]; // Return based on layout order - if ( layout === 'card-layout--text-imagecover' || layout === 'card-layout--text-image' || layout === 'card-layout--image-bottom' ) { + if ( textMediaLayerouts.includes( layout ) ) { return ( <> { contentElement } From b026f17b321f0c7a2947fc5fb0f8c093cddd8bb6 Mon Sep 17 00:00:00 2001 From: KMchaudhary Date: Fri, 30 Jan 2026 16:02:03 +0530 Subject: [PATCH 16/17] Add backward compatibility for image cta layer --- inc/helpers/custom-functions.php | 9 ++++++++- pages/video-editor/components/cta/ImageCTA.js | 12 +++++++++++- pages/video-editor/components/layers/CTALayer.js | 2 +- 3 files changed, 20 insertions(+), 3 deletions(-) diff --git a/inc/helpers/custom-functions.php b/inc/helpers/custom-functions.php index def86c938..a11d5c2cc 100644 --- a/inc/helpers/custom-functions.php +++ b/inc/helpers/custom-functions.php @@ -185,12 +185,19 @@ function rtgodam_image_cta_html( $layer ) { 'card-layout--image-background', 'card-layout--imagecover-text', 'card-layout--image-text', + 'card-layout--image-top', 'desktop-text-only', ); + // Backward compatibility: determine default layout based on imageCtaOrientation. + $default_layout = 'card-layout--image-text'; + if ( isset( $layer['imageCtaOrientation'] ) && 'landscape' !== $layer['imageCtaOrientation'] ) { + $default_layout = 'card-layout--image-top'; + } + $layout = isset( $layer['cardLayout'] ) && in_array( $layer['cardLayout'], $allowed_layouts, true ) ? $layer['cardLayout'] - : 'card-layout--text-imagecover'; + : $default_layout; $has_image = ! empty( $image_url ); $image_opacity = isset( $layer['imageOpacity'] ) ? floatval( $layer['imageOpacity'] ) : 1; diff --git a/pages/video-editor/components/cta/ImageCTA.js b/pages/video-editor/components/cta/ImageCTA.js index d7393d30d..0a66977fd 100644 --- a/pages/video-editor/components/cta/ImageCTA.js +++ b/pages/video-editor/components/cta/ImageCTA.js @@ -263,6 +263,16 @@ const ImageCTA = ( { layerID } ) => { const layoutsWithWidth = [ 'card-layout--text-imagecover', 'card-layout--imagecover-text', 'card-layout--text-image', 'card-layout--image-text' ]; + // Backward compatibility: determine default layout based on imageCtaOrientation + const getDefaultLayout = () => { + if ( ! layer?.imageCtaOrientation || layer?.imageCtaOrientation === 'landscape' ) { + return 'card-layout--image-text'; + } + return 'card-layout--image-top'; + }; + + const currentLayout = layer?.cardLayout || getDefaultLayout(); + return (
@@ -271,7 +281,7 @@ const ImageCTA = ( { layerID } ) => {
{ layoutOptions.map( ( layout ) => { - const isSelected = ( layer?.cardLayout || 'card-layout--text-imagecover' ) === layout.value; + const isSelected = currentLayout === layout.value; const IconComponent = LayoutIcons[ layout.icon ]; return ( diff --git a/pages/video-editor/components/layers/CTALayer.js b/pages/video-editor/components/layers/CTALayer.js index 1c0307599..79dcb2d8a 100644 --- a/pages/video-editor/components/layers/CTALayer.js +++ b/pages/video-editor/components/layers/CTALayer.js @@ -272,7 +272,7 @@ const CTALayer = ( { layerID, goBack, duration } ) => {
{ renderImageCTA() } From 0a018b794c69f300a3a4d6e9f6da0516b1a73044 Mon Sep 17 00:00:00 2001 From: KMchaudhary Date: Fri, 30 Jan 2026 18:21:35 +0530 Subject: [PATCH 17/17] Change card CTA default color for backward compatibility --- assets/src/css/_cta-card.scss | 2 -- inc/helpers/custom-functions.php | 2 +- pages/video-editor/components/cta/ImageCTA.js | 4 ++-- pages/video-editor/components/layers/CTALayer.js | 2 +- 4 files changed, 4 insertions(+), 6 deletions(-) diff --git a/assets/src/css/_cta-card.scss b/assets/src/css/_cta-card.scss index 7a9c276e1..eb0dd18a6 100644 --- a/assets/src/css/_cta-card.scss +++ b/assets/src/css/_cta-card.scss @@ -111,7 +111,6 @@ $cta-card-max-width-vertical: 400px !default; &.card-layout--image-top { display: flex; flex-direction: column; - gap: $cta-spacing-md; max-width: $cta-card-max-width-vertical; .godam-cta-card-image { @@ -123,7 +122,6 @@ $cta-card-max-width-vertical: 400px !default; &.card-layout--image-bottom { display: flex; flex-direction: column; - gap: $cta-spacing-md; max-width: $cta-card-max-width-vertical; } diff --git a/inc/helpers/custom-functions.php b/inc/helpers/custom-functions.php index a11d5c2cc..3e9f2fca7 100644 --- a/inc/helpers/custom-functions.php +++ b/inc/helpers/custom-functions.php @@ -205,7 +205,7 @@ function rtgodam_image_cta_html( $layer ) { $image_text = isset( $layer['imageText'] ) ? sanitize_text_field( $layer['imageText'] ) : ''; $image_description = isset( $layer['imageDescription'] ) ? sanitize_text_field( $layer['imageDescription'] ) : ''; $image_link = isset( $layer['imageLink'] ) ? $layer['imageLink'] : '#'; - $cta_background_color = isset( $layer['imageCtaButtonColor'] ) ? sanitize_hex_color( $layer['imageCtaButtonColor'] ) : '#000000'; + $cta_background_color = isset( $layer['imageCtaButtonColor'] ) ? sanitize_hex_color( $layer['imageCtaButtonColor'] ) : '#EEAB95'; $cta_button_text = ! empty( $layer['imageCtaButtonText'] ) ? sanitize_text_field( $layer['imageCtaButtonText'] ) : __( 'Check now', 'godam' ); // Ensure opacity is within valid range. diff --git a/pages/video-editor/components/cta/ImageCTA.js b/pages/video-editor/components/cta/ImageCTA.js index 0a66977fd..a9e5f10ee 100644 --- a/pages/video-editor/components/cta/ImageCTA.js +++ b/pages/video-editor/components/cta/ImageCTA.js @@ -419,7 +419,7 @@ const ImageCTA = ( { layerID } ) => {
{