Closes #795: Compare original vs optimized image isnot working probab…

…ly (#814)

assets/css/admin.css

@@ -1445,11 +1445,6 @@ ul.imagify-datas-details.imagify-datas-details {
 }
 
 /* Attachments specifics */
-.wp_attachment_image #imagify-visual-comparison .close-btn,
-.imagify-visual-comparison .close-btn {
-	top: 0;
-}
-
 .wp_attachment_image #imagify-visual-comparison .imagify-modal-content,
 .imagify-visual-comparison .imagify-modal-content {
 	padding-top: 40px;
@@ -1585,3 +1580,11 @@ ul.imagify-datas-details.imagify-datas-details {
 .imagify-upsell .imagify-meteo-icon {
 	filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(104deg) brightness(103%) contrast(103%);
 }
+
+.imagify-original-fize-size {
+	display: block !important;
+}
+
+.imagify-original-fize-size .value {
+	padding-left: 15px !important;
+}

assets/js/jquery.twentytwenty.js

@@ -211,7 +211,7 @@
 						modalHtml += '<img class="imagify-img-after" alt="" width="' + settings.width + '" height="' + settings.height + '">';
 					modalHtml += '</div>';
 					modalHtml += '<div class="imagify-comparison-levels">';
-						modalHtml += '<div class="imagify-c-level imagify-level-original go-left">';
+						modalHtml += '<div class="imagify-c-level imagify-level-original go-left imagify-original-fize-size">';
 							modalHtml += '<p class="imagify-c-level-row">';
 								modalHtml += '<span class="label">' + imagifyTTT.labels.filesize + '</span>';
 								modalHtml += '<span class="value level">' + settings.originalSize + '</span>';
@@ -515,7 +515,7 @@
 		// If shown image > 360, use twentytwenty.
 		if ( imagifyTTT.imageWidth > imagifyTTT.widthLimit && oriSource.src ) {
 
-			filesize = $( '.misc-pub-filesize strong' ).text();
+			filesize = $( '#imagify-full-optimized-size' ).val();
 			saving   = $( '.imagify-data-item .imagify-chart-value' ).text();
 
 			// Create button to trigger.
@@ -574,7 +574,7 @@
 				originalUrl:   $this.data( 'backup-src' ),
 				optimizedUrl:  $this.data( 'full-src' ),
 				originalSize:  $datas.find( '.original' ).text(),
-				optimizedSize: $datas.find( '.imagify-data-item .big' ).text(),
+				optimizedSize: $datas.find( '#imagify_data_sum .big' ).text(),
 				saving:        $datas.find( '.imagify-chart-value' ).text(),
 				modalAppendTo: $this.closest( '.column-primary' ),
 				trigger:       $this,
@@ -630,7 +630,7 @@
 							originalUrl:   originalSrc,
 							optimizedUrl:  $( '#imagify-full-src' ).val(),
 							originalSize:  $( '#imagify-original-size' ).val(),
-							optimizedSize: $datas.find( '.imagify-data-item .big' ).text(),
+							optimizedSize: $datas.find( '#imagify_data_sum .big' ).text(),
 							saving:        $datas.find( '.imagify-chart-value' ).text(),
 							modalAppendTo: $( '.media-frame-content .thumbnail-image' ),
 							trigger:       $( '#imagify-media-frame-comparison-btn' ),

inc/admin/meta-boxes.php

@@ -83,7 +83,8 @@ function _imagify_attachment_submitbox_misc_actions() {
 	if ( $media->has_backup() && $data->is_optimized() ) {
 		?>
 		<input id="imagify-full-original" type="hidden" value="<?php echo esc_url( $media->get_backup_url() ); ?>">
-		<input id="imagify-full-original-size" type="hidden" value="<?php echo esc_attr( $data->get_original_size( true, 0 ) ); ?>">
+		<input id="imagify-full-original-size" type="hidden" value="<?php echo esc_attr( $data->get_original_size() ); ?>">
+		<input id="imagify-full-optimized-size" type="hidden" value="<?php echo esc_attr( $data->get_optimized_size() ); ?>">
 		<?php
 	}
 }

inc/functions/admin-ui.php

@@ -18,7 +18,7 @@ function get_imagify_attachment_optimization_text( $process ) {
 
 	$is_media_page            = Imagify_Views::get_instance()->is_media_page();
 	$is_library_page          = Imagify_Views::get_instance()->is_wp_library_page();
-	$output                   = $is_media_page ? '' : '<ul class="imagify-datas-list">';
+	$output                   = $is_media_page ? '' : '<ul class="imagify-datas-list" id="imagify_data_sum">';
 	$output_before            = $is_media_page ? '' : '<li class="imagify-data-item">';
 	$output_after             = $is_media_page ? '<br/>' : '</li>';
 	$reoptimize_link          = get_imagify_attachment_reoptimize_link( $process );