| @@ -8,8 +8,12 @@ | ||
| 8 | 8 | * @package \Optimole\Inc |
| 9 | 9 | * @author Optimole <[email protected]> |
| 10 | 10 | */ |
| 11 | 11 | |
| 12 | +use Optimole\Sdk\Resource\ImageProperty\GravityProperty; | |
| 13 | +use Optimole\Sdk\Resource\ImageProperty\ResizeTypeProperty; | |
| 14 | +use Optimole\Sdk\ValueObject\Position; | |
| 15 | + | |
| 12 | 16 | /** |
| 13 | 17 | * Class Optml_Dam |
| 14 | 18 | */ |
| 15 | 19 | class Optml_Dam { |
| @@ -50,19 +54,20 @@ | ||
| 50 | 54 | add_action( 'wp_enqueue_media', [ $this, 'enqueue_media_scripts' ] ); |
| 51 | 55 | add_action( 'admin_enqueue_scripts', [ $this, 'enqueue_admin_page_scripts' ] ); |
| 52 | 56 | } |
| 53 | 57 | |
| 54 | - if ( defined( 'OPTML_DAM_ENDPOINT' ) && constant( 'OPTML_DAM_ENDPOINT' ) ) { | |
| 58 | + if ( defined( 'OPTML_DAM_ENDPOINT' ) ) { | |
| 55 | 59 | $this->dam_endpoint = constant( 'OPTML_DAM_ENDPOINT' ); |
| 56 | 60 | } |
| 57 | - | |
| 61 | + if ( $this->settings->get( 'retina_images' ) === 'enabled' ) { | |
| 62 | + add_filter( 'wp_get_attachment_image_attributes', [ Optml_Tag_Replacer::instance(), 'filter_attachment_image_attributes' ], 99, 3 ); | |
| 63 | + } | |
| 58 | 64 | add_filter( 'wp_get_attachment_image_src', [ $this, 'alter_attachment_image_src' ], 10, 4 ); |
| 59 | 65 | add_filter( 'wp_get_attachment_metadata', [ $this, 'alter_attachment_metadata' ], 10, 2 ); |
| 60 | 66 | add_filter( 'image_downsize', [ $this, 'catch_downsize' ], 10, 3 ); |
| 61 | - add_filter( 'wp_prepare_attachment_for_js', [$this, 'alter_attachment_for_js'], 10, 3 ); | |
| 62 | - add_filter( 'wp_image_src_get_dimensions', [$this, 'alter_img_tag_w_h'], 10, 4 ); | |
| 63 | - add_filter( 'get_attached_file', [$this, 'alter_attached_file_response'], 10, 2 ); | |
| 64 | - add_filter( 'wp_calculate_image_srcset', [$this, 'disable_dam_images_srcset'], 1, 5 ); | |
| 67 | + add_filter( 'wp_prepare_attachment_for_js', [ $this, 'alter_attachment_for_js' ], 10, 3 ); | |
| 68 | + add_filter( 'get_attached_file', [ $this, 'alter_attached_file_response' ], 10, 2 ); | |
| 69 | + add_filter( 'wp_calculate_image_srcset', [ $this, 'disable_dam_images_srcset' ], 1, 5 ); | |
| 65 | 70 | |
| 66 | 71 | add_filter( |
| 67 | 72 | 'elementor/image_size/get_attachment_image_html', |
| 68 | 73 | [ |
| @@ -191,32 +196,29 @@ | ||
| 191 | 196 | * |
| 192 | 197 | * @return array $image. |
| 193 | 198 | */ |
| 194 | 199 | public function alter_attachment_image_src( $image, $attachment_id, $size, $icon ) { |
| 200 | + | |
| 195 | 201 | // Skip if not DAM image. |
| 196 | 202 | if ( ! $this->is_dam_imported_image( $attachment_id ) ) { |
| 197 | 203 | return $image; |
| 198 | 204 | } |
| 199 | - | |
| 200 | 205 | $image_url = wp_get_attachment_url( $attachment_id ); |
| 201 | - $incoming_size = $this->parse_dimension_from_optimized_url( $image_url ); | |
| 202 | - $width = $incoming_size[0]; | |
| 203 | - $height = $incoming_size[1]; | |
| 206 | + list($width, $height) = $this->parse_dimension_from_optimized_url( $image_url ); | |
| 204 | 207 | |
| 205 | 208 | // Skip resize in single attachment view on backend. |
| 206 | 209 | if ( $this->is_attachment_edit_page( $attachment_id ) ) { |
| 207 | 210 | return [ |
| 208 | 211 | $image_url, |
| 209 | - $width, | |
| 210 | - $height, | |
| 212 | + $width === 'auto' ? false : $width, | |
| 213 | + $height === 'auto' ? false : $height, | |
| 211 | 214 | false, |
| 212 | 215 | ]; |
| 213 | 216 | } |
| 214 | 217 | |
| 218 | + $metadata = wp_get_attachment_metadata( $attachment_id ); | |
| 215 | 219 | // Use the original size if the requested size is full. |
| 216 | 220 | if ( $size === 'full' ) { |
| 217 | - $metadata = wp_get_attachment_metadata( $attachment_id ); | |
| 218 | - | |
| 219 | 221 | $image_url = $this->replace_dam_url_args( |
| 220 | 222 | [ |
| 221 | 223 | 'width' => $metadata['width'], |
| 222 | 224 | 'height' => $metadata['height'], |
| @@ -231,47 +233,23 @@ | ||
| 231 | 233 | $metadata['height'], |
| 232 | 234 | false, |
| 233 | 235 | ]; |
| 234 | 236 | } |
| 237 | + $sizes = $this->size_to_dimension( $size, $metadata ); | |
| 235 | 238 | |
| 236 | - $crop = false; | |
| 237 | - | |
| 238 | - // Size can be int [] containing width and height. | |
| 239 | - if ( is_array( $size ) ) { | |
| 240 | - $width = $size[0]; | |
| 241 | - $height = $size[1]; | |
| 242 | - $crop = true; | |
| 243 | - } else { | |
| 244 | - $sizes = $this->get_all_image_sizes(); | |
| 245 | - | |
| 246 | - if ( ! isset( $sizes[ $size ] ) ) { | |
| 247 | - return [ | |
| 248 | - $image_url, | |
| 249 | - $width, | |
| 250 | - $height, | |
| 251 | - false, | |
| 252 | - ]; | |
| 253 | - } | |
| 254 | - | |
| 255 | - $width = $sizes[ $size ]['width']; | |
| 256 | - $height = $sizes[ $size ]['height']; | |
| 257 | - $crop = (bool) $sizes[ $size ]['crop']; | |
| 258 | - } | |
| 259 | - | |
| 260 | 239 | $image_url = $this->replace_dam_url_args( |
| 261 | 240 | [ |
| 262 | - 'width' => $width, | |
| 263 | - 'height' => $height, | |
| 264 | - 'crop' => $crop, | |
| 241 | + 'width' => $sizes['width'], | |
| 242 | + 'height' => $sizes['height'], | |
| 243 | + 'crop' => $sizes['resize'] ?? false, | |
| 265 | 244 | ], |
| 266 | 245 | $image_url |
| 267 | 246 | ); |
| 268 | - | |
| 269 | 247 | return [ |
| 270 | 248 | $image_url, |
| 271 | - $width, | |
| 272 | - $height, | |
| 273 | - $crop, | |
| 249 | + $sizes['width'], | |
| 250 | + $sizes['height'], | |
| 251 | + $size === 'full', // @phpstan-ignore-line | |
| 274 | 252 | ]; |
| 275 | 253 | } |
| 276 | 254 | |
| 277 | 255 | /** |
| @@ -450,12 +428,12 @@ | ||
| 450 | 428 | .notice:not(.optml-notice-optin){ |
| 451 | 429 | display: none !important; |
| 452 | 430 | } |
| 453 | 431 | </style> |
| 454 | - <iframe id="om-dam" style="display: none;" src="<?php echo( $this->build_iframe_url() ); ?>"></iframe> | |
| 432 | + <iframe id="om-dam" style="display: none;" src="<?php echo( $this->build_iframe_url() ); ?>" allow="clipboard-read; clipboard-write"></iframe> | |
| 455 | 433 | <div class="om-dam-loader"> |
| 456 | 434 | <img src="<?php echo esc_url( OPTML_URL . 'assets/img/logo.png' ); ?>" alt="Optimole Logo" |
| 457 | - class="om-dam-logo"> | |
| 435 | + class="om-dam-logo"> | |
| 458 | 436 | <p><?php echo esc_html__( 'Loading', 'optimole-wp' ); ?>...</p> |
| 459 | 437 | </div> |
| 460 | 438 | <?php |
| 461 | 439 | } |
| @@ -491,13 +469,16 @@ | ||
| 491 | 469 | |
| 492 | 470 | $data = json_encode( $data ); |
| 493 | 471 | $data = rtrim( base64_encode( $data ), '=' ); |
| 494 | 472 | |
| 495 | - return add_query_arg( | |
| 496 | - [ | |
| 497 | - 'data' => $data, | |
| 498 | - ], | |
| 499 | - $this->dam_endpoint | |
| 473 | + return tsdk_translate_link( | |
| 474 | + add_query_arg( | |
| 475 | + [ | |
| 476 | + 'data' => $data, | |
| 477 | + ], | |
| 478 | + $this->dam_endpoint | |
| 479 | + ), | |
| 480 | + 'query' | |
| 500 | 481 | ); |
| 501 | 482 | } |
| 502 | 483 | |
| 503 | 484 | /** |
| @@ -553,8 +534,10 @@ | ||
| 553 | 534 | |
| 554 | 535 | wp_enqueue_script( OPTML_NAMESPACE . '-admin-page' ); |
| 555 | 536 | |
| 556 | 537 | wp_enqueue_style( OPTML_NAMESPACE . '-admin-page', OPTML_URL . 'assets/build/media/admin-page.css' ); |
| 538 | + | |
| 539 | + do_action( 'themeisle_internal_page', OPTML_PRODUCT_SLUG, 'dam' ); | |
| 557 | 540 | } |
| 558 | 541 | |
| 559 | 542 | /** |
| 560 | 543 | * Get localized variables for the media modal. |
| @@ -619,15 +602,15 @@ | ||
| 619 | 602 | |
| 620 | 603 | return $this->replace_dam_url_args( $custom_dimensions, $html ); |
| 621 | 604 | } |
| 622 | 605 | |
| 623 | - $all_sizes = $this->get_all_image_sizes(); | |
| 606 | + $all_sizes = Optml_App_Replacer::image_sizes(); | |
| 624 | 607 | |
| 625 | - if ( ! isset( $all_sizes[ $settings['image_size'] ] ) ) { | |
| 608 | + if ( ! isset( $all_sizes[ $image_size_key ] ) ) { | |
| 626 | 609 | return $html; |
| 627 | 610 | } |
| 628 | 611 | |
| 629 | - return $this->replace_dam_url_args( $all_sizes[ $settings['image_size'] ], $html ); | |
| 612 | + return $this->replace_dam_url_args( $all_sizes[ $image_size_key ], $html ); | |
| 630 | 613 | } |
| 631 | 614 | |
| 632 | 615 | /** |
| 633 | 616 | * Needed as some blocks might use the image sizes. |
| @@ -642,21 +625,23 @@ | ||
| 642 | 625 | if ( ! $this->is_dam_imported_image( $attachment->ID ) ) { |
| 643 | 626 | return $response; |
| 644 | 627 | } |
| 645 | 628 | |
| 646 | - $sizes = $this->get_all_image_sizes(); | |
| 629 | + $sizes = Optml_App_Replacer::image_sizes(); | |
| 647 | 630 | |
| 631 | + $meta = []; | |
| 632 | + if ( isset( $response['width'] ) ) { | |
| 633 | + $meta['width'] = $response['width']; | |
| 634 | + } | |
| 635 | + if ( isset( $response['height'] ) ) { | |
| 636 | + $meta['height'] = $response['height']; | |
| 637 | + } | |
| 648 | 638 | foreach ( $sizes as $size => $args ) { |
| 649 | 639 | if ( isset( $response['sizes'][ $size ] ) ) { |
| 650 | 640 | continue; |
| 651 | 641 | } |
| 642 | + $args = $this->size_to_dimension( $size, $meta ); | |
| 652 | 643 | |
| 653 | - $args = [ | |
| 654 | - 'height' => $args['height'], | |
| 655 | - 'width' => $args['width'], | |
| 656 | - 'crop' => true, | |
| 657 | - ]; | |
| 658 | - | |
| 659 | 644 | $response['sizes'][ $size ] = array_merge( |
| 660 | 645 | $args, |
| 661 | 646 | [ |
| 662 | 647 | 'url' => $this->replace_dam_url_args( $args, $response['url'] ), |
| @@ -663,68 +648,14 @@ | ||
| 663 | 648 | 'orientation' => ( $args['height'] > $args['width'] ) ? 'portrait' : 'landscape', |
| 664 | 649 | ] |
| 665 | 650 | ); |
| 666 | 651 | } |
| 652 | + $response['url'] = $this->replace_dam_url_args( $meta, $response['url'] ); | |
| 667 | 653 | |
| 668 | - $url_args = [ | |
| 669 | - 'height' => $response['height'], | |
| 670 | - 'width' => $response['width'], | |
| 671 | - 'crop' => false, | |
| 672 | - ]; | |
| 673 | - | |
| 674 | - $response['url'] = $this->replace_dam_url_args( $url_args, $response['url'] ); | |
| 675 | - | |
| 676 | 654 | return $response; |
| 677 | 655 | } |
| 678 | 656 | |
| 679 | 657 | /** |
| 680 | - * We have to short-circuit the logic that adds width and height to the img tag. | |
| 681 | - * It compares the URL basename, and the `file` param for each image. | |
| 682 | - * This happens for any image that gets its size set non-explicitly | |
| 683 | - * e.g. an image block with its size set from the sidebar to `thumbnail`). | |
| 684 | - * | |
| 685 | - * Optimole has a single basename for all image resizes in its URL. | |
| 686 | - * | |
| 687 | - * @param array|false $dimensions Array with first element being the width | |
| 688 | - * and second element being the height, or | |
| 689 | - * false if dimensions could not be determined. | |
| 690 | - * @param string $image_src The image URL (will be Optimole URL). | |
| 691 | - * @param array $image_meta The image metadata. | |
| 692 | - * @param int $attachment_id The image attachment ID. Default 0. | |
| 693 | - */ | |
| 694 | - public function alter_img_tag_w_h( $dimensions, $image_src, $image_meta, $attachment_id ) { | |
| 695 | - if ( ! $this->is_dam_imported_image( $attachment_id ) ) { | |
| 696 | - return $dimensions; | |
| 697 | - } | |
| 698 | - | |
| 699 | - // Get the dimensions from the optimized URL. | |
| 700 | - $incoming_size = $this->parse_dimension_from_optimized_url( $image_src ); | |
| 701 | - $width = $incoming_size[0]; | |
| 702 | - $height = $incoming_size[1]; | |
| 703 | - | |
| 704 | - $sizes = $this->get_all_image_sizes(); | |
| 705 | - | |
| 706 | - // If this is an image size. Return its dimensions. | |
| 707 | - foreach ( $sizes as $size => $args ) { | |
| 708 | - if ( (int) $args['width'] !== (int) $width ) { | |
| 709 | - continue; | |
| 710 | - } | |
| 711 | - | |
| 712 | - if ( (int) $args['height'] !== (int) $height ) { | |
| 713 | - continue; | |
| 714 | - } | |
| 715 | - | |
| 716 | - return [ | |
| 717 | - $args['width'], | |
| 718 | - $args['height'], | |
| 719 | - ]; | |
| 720 | - } | |
| 721 | - | |
| 722 | - // Fall-through with the original dimensions. | |
| 723 | - return $dimensions; | |
| 724 | - } | |
| 725 | - | |
| 726 | - /** | |
| 727 | 658 | * Replace the image size params in DAM URLs inside a string. |
| 728 | 659 | * |
| 729 | 660 | * @param array $args The arguments to replace. |
| 730 | 661 | * - width: The width of the image. |
| @@ -734,18 +665,18 @@ | ||
| 734 | 665 | * |
| 735 | 666 | * @return string |
| 736 | 667 | */ |
| 737 | 668 | public function replace_dam_url_args( $args, $subject ) { |
| 738 | - $args = wp_parse_args( $args, [ 'width' => 'auto', 'height' => 'auto', 'crop' => false, 'dam' => true] ); | |
| 669 | + $args = wp_parse_args( $args, [ 'width' => 'auto', 'height' => 'auto', 'dam' => true ] ); | |
| 739 | 670 | |
| 740 | 671 | $width = $args['width']; |
| 741 | 672 | $height = $args['height']; |
| 742 | - $crop = (bool) $args['crop']; | |
| 673 | + $crop = $args['crop'] ?? $args['resize'] ?? false; | |
| 743 | 674 | |
| 744 | - $gravity = Optml_Resize::GRAVITY_CENTER; | |
| 675 | + $gravity = Position::CENTER; | |
| 745 | 676 | |
| 746 | 677 | if ( $this->settings->get( 'resize_smart' ) === 'enabled' ) { |
| 747 | - $gravity = Optml_Resize::GRAVITY_SMART; | |
| 678 | + $gravity = GravityProperty::SMART; | |
| 748 | 679 | } |
| 749 | 680 | |
| 750 | 681 | if ( $width === 0 ) { |
| 751 | 682 | $width = 'auto'; |
| @@ -757,10 +688,15 @@ | ||
| 757 | 688 | |
| 758 | 689 | // Use the proper replacement for the image size. |
| 759 | 690 | $replacement = '/w:' . $width . '/h:' . $height; |
| 760 | 691 | |
| 761 | - if ( $crop ) { | |
| 692 | + if ( $crop === true ) { | |
| 762 | 693 | $replacement .= '/g:' . $gravity . '/rt:fill'; |
| 694 | + } elseif ( is_array( $crop ) && ! empty( $crop ) ) { | |
| 695 | + | |
| 696 | + $replacement .= '/' . ( new GravityProperty( $crop['gravity'] ) ) . | |
| 697 | + '/' . new ResizeTypeProperty( $crop['type'] ) . | |
| 698 | + ( $crop['enlarge'] ? '/el:1' : '' ); | |
| 763 | 699 | } |
| 764 | 700 | |
| 765 | 701 | $replacement .= '/q:'; |
| 766 | 702 | |