Merge pull request #9 from 10up/feature/link-in-bio-identity-image-po…

…sition Internal: Conversion center - Link in bio identity image position controls
10up · Jun 12, 2024 · bf3c264 · bf3c264
2 parents e76c633 + a04602e
commit bf3c264
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 0 deletions.
diff --git a/modules/conversion-center/assets/scss/widgets/link-in-bio-base.scss b/modules/conversion-center/assets/scss/widgets/link-in-bio-base.scss
@@ -23,9 +23,11 @@
 	--e-link-in-bio-identity-image-cover-border-color: transparent;
 	--e-link-in-bio-identity-image-cover-border-style: none;
 	--e-link-in-bio-identity-image-cover-height: 170px;
+	--e-link-in-bio-identity-image-cover-position: center center;
 
 	// Identity config - Profile
 	--e-link-in-bio-identity-image-profile-border-color: transparent;
+	--e-link-in-bio-identity-image-profile-position: center center;
 	--e-link-in-bio-identity-image-profile-border-radius: 50%;
 	--e-link-in-bio-identity-image-profile-border-style: none;
 	--e-link-in-bio-identity-image-profile-border-width: 0;
@@ -209,6 +211,10 @@
 			&.has-border {
 				--e-link-in-bio-identity-image-cover-border-style: solid;
 			}
+
+			.e-link-in-bio__identity-image-element {
+				object-position: var(--e-link-in-bio-identity-image-cover-position);
+			}
 		}
 
 		.e-link-in-bio__identity-image-profile {
@@ -237,6 +243,7 @@
 
 			.e-link-in-bio__identity-image-element {
 				aspect-ratio: inherit;
+				object-position: var(--e-link-in-bio-identity-image-profile-position);
 			}
 		}
 

diff --git a/modules/conversion-center/base/widget-link-in-bio-base.php b/modules/conversion-center/base/widget-link-in-bio-base.php
@@ -156,6 +156,21 @@ public function get_keywords(): array {
 		return [ 'buttons', 'bio', 'widget', 'link in bio' ];
 	}
 
+	public function get_image_position_options(): array {
+		return [
+			'' => esc_html__( 'Default', 'elementor' ),
+			'center center' => esc_html__( 'Center Center', 'elementor' ),
+			'center left' => esc_html__( 'Center Left', 'elementor' ),
+			'center right' => esc_html__( 'Center Right', 'elementor' ),
+			'top center' => esc_html__( 'Top Center', 'elementor' ),
+			'top left' => esc_html__( 'Top Left', 'elementor' ),
+			'top right' => esc_html__( 'Top Right', 'elementor' ),
+			'bottom center' => esc_html__( 'Bottom Center', 'elementor' ),
+			'bottom left' => esc_html__( 'Bottom Left', 'elementor' ),
+			'bottom right' => esc_html__( 'Bottom Right', 'elementor' ),
+		];
+	}
+
 	public function show_in_panel(): bool {
 		return Plugin::$instance->experiments->is_feature_active( ConversionCenterModule::EXPERIMENT_NAME );
 	}
@@ -898,6 +913,24 @@ protected function add_identity_section(): void {
 					],
 				]
 			);
+
+			$this->add_responsive_control(
+				'identity_image_cover_position',
+				[
+					'label' => esc_html__( 'Position', 'elementor' ),
+					'type' => Controls_Manager::SELECT,
+					'desktop_default' => 'center center',
+					'tablet_default' => 'center center',
+					'mobile_default' => 'center center',
+					'options' => $this->get_image_position_options(),
+					'selectors' => [
+						'{{WRAPPER}} .e-link-in-bio' => '--e-link-in-bio-identity-image-cover-position: {{VALUE}}',
+					],
+					'condition' => [
+						'identity_image_cover[url]!' => '',
+					],
+				]
+			);
 		}
 
 		if ( $config['content']['identity_section']['has_heading_text'] ) {
@@ -936,6 +969,24 @@ protected function add_identity_section(): void {
 			]
 		);
 
+		$this->add_responsive_control(
+			'identity_image_position',
+			[
+				'label' => esc_html__( 'Position', 'elementor' ),
+				'type' => Controls_Manager::SELECT,
+				'desktop_default' => 'center center',
+				'tablet_default' => 'center center',
+				'mobile_default' => 'center center',
+				'options' => $this->get_image_position_options(),
+				'selectors' => [
+					'{{WRAPPER}} .e-link-in-bio' => '--e-link-in-bio-identity-image-profile-position: {{VALUE}}',
+				],
+				'condition' => [
+					'identity_image[url]!' => '',
+				],
+			]
+		);
+
 		$this->end_controls_section();
 	}