Skip to content

Improve/crops #888

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Jun 15, 2023
Merged

Improve/crops #888

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
680f201
Update feature label, hooks and settings
Jun 13, 2023
ae3ce91
Add info box
Jun 13, 2023
ce8ceca
Fix styling
Jun 13, 2023
3007b15
Remove beta from SVG support
Jun 13, 2023
a96ee67
Update icon
Jun 13, 2023
f197fd9
Update compiled assets
Jun 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion css/cloudinary.css
View file
Open in desktop

Large diffs are not rendered by default.

10 changes: 5 additions & 5 deletions php/class-delivery.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' => '',
Expand Down
14 changes: 7 additions & 7 deletions php/class-media.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'] = '';
Expand Down
54 changes: 53 additions & 1 deletion php/ui/component/class-crops.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@

namespace Cloudinary\UI\Component;

use Cloudinary\Settings\Setting;
use Cloudinary\Utils;
use function Cloudinary\get_plugin_instance;

Expand All @@ -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.
Expand All @@ -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.
*
Expand Down Expand Up @@ -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' );
Expand All @@ -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;
Expand Down
6 changes: 6 additions & 0 deletions src/css/components/_ui.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
18 changes: 9 additions & 9 deletions ui-definitions/settings-image.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.',
Expand All @@ -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'
Expand All @@ -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 );
},
),
),
Expand Down
22 changes: 11 additions & 11 deletions ui-definitions/settings-metaboxes.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
),
),
),
Expand Down