Merge pull request #888 from cloudinary/improve/crops

Improve/crops

Author: pereirinha

css/cloudinary.css

@@ -1241,18 +1241,18 @@ public function parse_element( $element ) {
 		$config = $this->plugin->settings->get_value( 'image_settings' );
 
 		/**
-		 * Enable the crop size settings.
+		 * Enable the Crop and Gravity control settings.
 		 *
-		 * @hook  cloudinary_enabled_crop_sizes
+		 * @hook  cloudinary_enable_crop_and_gravity_control
 		 * @since 3.1.3
 		 * @default {false}
 		 *
-		 * @param $enabeld {bool} Are the crop sizes enabled?
+		 * @param $enabeld {bool} Is the Crop and Gravity control enabled?
 		 *
 		 * @retrun {bool}
 		 */
-		$enabled_crop_sizes       = apply_filters( 'cloudinary_enabled_crop_sizes', false );
-		$has_sized_transformation = $enabled_crop_sizes && ! empty( $config['crop_sizes'] );
+		$enabled_crop_gravity     = apply_filters( 'cloudinary_enable_crop_and_gravity_control', false );
+		$has_sized_transformation = $enabled_crop_gravity && ! empty( $config['crop_sizes'] );
 
 		$tag_element = array(
 			'tag'                       => '',

php/class-delivery.php

@@ -1007,23 +1007,23 @@ public function get_crop_transformations( $attachment_id, $size ) {
 			}
 
 			/**
-			 * Enable the crop size settings.
+			 * Enable the Crop and Gravity control settings.
 			 *
-			 * @hook  cloudinary_enabled_crop_sizes
+			 * @hook  cloudinary_enable_crop_and_gravity_control
 			 * @since 3.1.3
 			 * @default {false}
 			 *
-			 * @param $enabeld {bool} Are the crop sizes enabled?
+			 * @param $enabeld {bool} Is the Crop and Gravity control enabled?
 			 *
 			 * @retrun {bool}
 			 */
-			$enabled_crop_sizes = apply_filters( 'cloudinary_enabled_crop_sizes', false );
+			$enabled_crop_and_gravity = apply_filters( 'cloudinary_enable_crop_and_gravity_control', false );
 
 			// Check for custom crop.
-			if ( is_numeric( $attachment_id ) && $enabled_crop_sizes ) {
+			if ( is_numeric( $attachment_id ) && $enabled_crop_and_gravity ) {
 				$meta_sizes = $this->get_post_meta( $attachment_id, 'cloudinary_metaboxes_crop_meta', true );
-				if ( ! empty( $meta_sizes['single_crop_sizes']['single_sizes'] ) ) {
-					$custom_sizes = $meta_sizes['single_crop_sizes']['single_sizes'];
+				if ( ! empty( $meta_sizes['single_crop_and_gravity']['single_sizes'] ) ) {
+					$custom_sizes = $meta_sizes['single_crop_and_gravity']['single_sizes'];
 					if ( ! empty( $custom_sizes[ $size_dim ] ) ) {
 						if ( '--' === $custom_sizes[ $size_dim ] ) {
 							$size['transformation'] = '';

php/class-media.php

@@ -7,6 +7,7 @@
 
 namespace Cloudinary\UI\Component;
 
+use Cloudinary\Settings\Setting;
 use Cloudinary\Utils;
 use function Cloudinary\get_plugin_instance;
 
@@ -33,7 +34,7 @@ class Crops extends Select {
 	 *
 	 * @var string
 	 */
-	protected $blueprint = 'wrap|label|title|/title|prefix/|/label|input/|/wrap';
+	protected $blueprint = 'wrap|hr/|label|title/|prefix/|/label|info_box/|input/|/wrap';
 
 	/**
 	 * Enqueue scripts this component may use.
@@ -42,6 +43,51 @@ public function enqueue_scripts() {
 		wp_enqueue_media();
 	}
 
+	/**
+	 * Filter the hr structure.
+	 *
+	 * @param array $struct The array structure.
+	 *
+	 * @return array
+	 */
+	protected function hr( $struct ) {
+
+		if ( 'image_settings' === $this->setting->get_parent()->get_slug() ) {
+			$struct['element'] = 'hr';
+			$struct['render']  = true;
+		}
+
+		return $struct;
+	}
+
+	/**
+	 * Filter the info box structure.
+	 *
+	 * @param array $struct The array structure.
+	 *
+	 * @return array
+	 */
+	protected function info_box( $struct ) {
+		$panel_toggle = new Setting( 'info_box_crop_gravity' );
+		$panel_toggle->set_param( 'title', __( 'What is Crop and Gravity control?', 'cloudinary' ) );
+		$panel_toggle->set_param(
+			'text',
+			sprintf(
+				// translators: %1$s: link to Crop doc, %2$s: link to Gravity doc.
+				__( 'This feature allows you to fine tune the behaviour of the %1$s and %2$s per registered crop size of the delivered images.', 'cloudinary' ),
+				'<a href="https://cloudinary.com/documentation/resizing_and_cropping#resize_and_crop_modes" target="_blank">' . __( 'Crop', 'cloudinary' ) . '</a>',
+				'<a href="https://cloudinary.com/documentation/resizing_and_cropping#control_gravity" target="_blank">' . __( 'Gravity', 'cloudinary' ) . '</a>'
+			)
+		);
+		$panel_toggle->set_param( 'icon', get_plugin_instance()->dir_url . 'css/images/crop.svg' );
+		$title_toggle = new Info_Box( $panel_toggle );
+
+		$struct['element'] = 'div';
+		$struct['content'] = $title_toggle->render();
+
+		return $struct;
+	}
+
 	/**
 	 * Filter the select input parts structure.
 	 *
@@ -169,9 +215,14 @@ protected function make_input( $name, $value ) {
 			'crop-size-inputs',
 		);
 
+		$label                      = $this->get_part( 'label' );
+		$label['attributes']['for'] = $name;
+		$label['content']           = __( 'Disable', 'cloudinary' );
+
 		$check                          = $this->get_part( 'input' );
 		$check['attributes']['type']    = 'checkbox';
 		$check['attributes']['name']    = $name;
+		$check['attributes']['id']      = $name;
 		$check['attributes']['value']   = '--';
 		$check['attributes']['class'][] = 'disable-toggle';
 		$check['attributes']['title']   = __( 'Disable gravity and crops', 'cloudinary' );
@@ -186,6 +237,7 @@ protected function make_input( $name, $value ) {
 		$input['attributes']['class'][] = 'regular-text';
 
 		$wrapper['children']['input'] = $input;
+		$wrapper['children']['label'] = $label;
 		$wrapper['children']['check'] = $check;
 
 		return $wrapper;

php/ui/component/class-crops.php

@@ -32,3 +32,9 @@
 	color: $color-white;
 	font-size: 0.8em;
 }
+
+#poststuff .cld-info-box h2 {
+	padding: 0;
+	margin: 0 0 6px;
+	font-weight: 700;
+}

src/css/components/_ui.scss

@@ -175,7 +175,7 @@
 					),
 					array(
 						'type'  => 'info_box',
-						'icon'  => $this->dir_url . 'css/images/crop.svg',
+						'icon'  => $this->dir_url . 'css/images/transformation.svg',
 						'title' => __( 'What are transformations?', 'cloudinary' ),
 						'text'  => __(
 							'A set of parameters included in a Cloudinary URL to programmatically transform the visual appearance of the assets on your website.',
@@ -189,8 +189,8 @@
 					array(
 						'type'               => 'on_off',
 						'slug'               => 'svg_support',
-						'title'              => __( 'SVG Support (beta)', 'cloudinary' ),
-						'optimisation_title' => __( 'SVG Support (beta)', 'cloudinary' ),
+						'title'              => __( 'SVG Support', 'cloudinary' ),
+						'optimisation_title' => __( 'SVG Support', 'cloudinary' ),
 						'tooltip_text'       => __(
 							'Enable Cloudinary\'s beta SVG Support.',
 							'cloudinary'
@@ -201,20 +201,20 @@
 					array(
 						'type'    => 'crops',
 						'slug'    => 'crop_sizes',
-						'title'   => __( 'Crops Sizes', 'cloudinary' ),
-						'enabled' => function () {
+						'title'   => __( 'Crop and Gravity control (beta)', 'cloudinary' ),
+						'enabled' => static function () {
 							/**
-							 * Enable the crop size settings.
+							 * Enable the Crop and Gravity control settings.
 							 *
-							 * @hook  cloudinary_enabled_crop_sizes
+							 * @hook  cloudinary_enable_crop_and_gravity_control
 							 * @since 3.1.3
 							 * @default {false}
 							 *
-							 * @param $enabeld {bool} Are the crop sizes enabled?
+							 * @param $enabeld {bool} Is the Crop and Gravity control enabled?
 							 *
 							 * @retrun {bool}
 							 */
-							return apply_filters( 'cloudinary_enabled_crop_sizes', false );
+							return apply_filters( 'cloudinary_enable_crop_and_gravity_control', false );
 						},
 					),
 				),

ui-definitions/settings-image.php

@@ -6,44 +6,44 @@
  */
 
 /**
- * Enable the crop size settings.
+ * Enable the Crop and Gravity control settings.
  *
- * @hook  cloudinary_enabled_crop_sizes
+ * @hook  cloudinary_enable_crop_and_gravity_control
  * @since 3.1.3
  * @default {false}
  *
- * @param $enabeld {bool} Are the crop sizes enabled?
+ * @param $enabeld {bool} Is the Crop and Gravity control enabled?
  *
  * @retrun {bool}
  */
-if ( ! apply_filters( 'cloudinary_enabled_crop_sizes', false ) ) {
+if ( ! apply_filters( 'cloudinary_enable_crop_and_gravity_control', false ) ) {
 	return array();
 }
 $metaboxes = array(
 	'crop_meta' => array(
-		'title'    => __( 'Cloudinary crop sizes', 'cloudinary' ),
+		'title'    => __( 'Cloudinary Crop and Gravity control', 'cloudinary' ),
 		'screen'   => 'attachment',
 		'settings' => array(
 			array(
-				'slug' => 'single_crop_sizes',
+				'slug' => 'single_crop_and_gravity',
 				'type' => 'stand_alone',
 				array(
 					'type'         => 'on_off',
-					'slug'         => 'enable_single_sizes',
-					'title'        => __( 'Sized transformations', 'cloudinary' ),
+					'slug'         => 'enable_crop_and_gravity',
+					'title'        => __( 'Crop and Gravity control (beta)', 'cloudinary' ),
 					'tooltip_text' => __(
-						'Enable transformations per registered image sizes.',
+						'Enable Crop and Gravity control for registered image sizes.',
 						'cloudinary'
 					),
-					'description'  => __( 'Enable sized transformations.', 'cloudinary' ),
+					'description'  => __( 'Enable Crop and Gravity', 'cloudinary' ),
 					'default'      => 'off',
 				),
 				array(
 					'type'      => 'crops',
 					'slug'      => 'single_sizes',
 					'mode'      => 'full',
 					'condition' => array(
-						'enable_single_sizes' => true,
+						'enable_crop_and_gravity' => true,
 					),
 				),
 			),