Simplify resize settings and update free images estimation according to resize setting.

Author: Edwin Westerhoud

src/class-tiny-settings.php

@@ -68,7 +68,7 @@ public function admin_init() {
     }
 
     public function image_sizes_notice() {
-        $this->render_image_sizes_notice($_GET["image_sizes_selected"]);
+        $this->render_image_sizes_notice($_GET["image_sizes_selected"], $_GET["resize_original"]);
         exit();
     }
 
@@ -217,7 +217,7 @@ public function render_sizes() {
         }
 
         echo '<div id="tiny-image-sizes-notice">';
-        $this->render_image_sizes_notice(count(self::get_active_tinify_sizes()));
+        $this->render_image_sizes_notice(count(self::get_active_tinify_sizes()), self::get_resize_enabled());
         echo '</div>';
     }
 
@@ -234,8 +234,11 @@ private function render_size_checkbox($size, $option) {
 <?php
     }
 
-    public function render_image_sizes_notice($active_image_sizes_count) {
-        echo '<br/>';
+    public function render_image_sizes_notice($active_image_sizes_count, $resize_original_enabled) {
+        echo '<br>';
+        if ($resize_original_enabled) {
+            $active_image_sizes_count++;
+        }
         if ($active_image_sizes_count < 1) {
             echo '<p>' . self::translate_escape('With these settings no images will be compressed') . '.</p>';
         }
@@ -245,27 +248,34 @@ public function render_image_sizes_notice($active_image_sizes_count) {
             echo '<p>';
             echo self::translate_escape('With these settings you can compress');
             echo ' <strong>';
-            printf(self::translate_escape('%s images'), $free_images_per_month);
+            printf(self::translate_escape('at least %s images'), $free_images_per_month);
             echo '</strong> ';
             echo self::translate_escape('for free each month') . '.';
             echo '</p>';
         }
     }
 
     public function render_resize() {
-        echo '<p>' . self::translate_escape("Automatically resize the orginal image to a lower resolution. Enabling this option will resize the original image when it exceeds the specified width or height, using the TinyPNG API") . '.</p>';
         echo '<p class="tiny-resize-unavailable" style="display: none">' . self::translate_escape("Enable the compression of the original image size to configure resizing") . '.</p>';
 
         $id = self::get_prefixed_name("resize_original_enabled");
         $field = self::get_prefixed_name("resize_original[enabled]");
-        $label = self::translate_escape('fit original image within');
-        $class = "tiny-resize-available";
+        $label = self::translate_escape('Resize orginal images larger than');
+
+        echo '<p class="tiny-resize-available">';
         ?>
-        <p><input class="<?php echo $class ?>" type="checkbox" id="<?php echo $id ?>" name="<?php echo $field ?>" value="on" <?php if ($this->get_resize_enabled()) { echo ' checked="checked"'; } ?>/>
-        <label class="<?php echo $class ?>" for="<?php echo $id; ?>"><?php echo $label; ?>
-        <?php $this->render_resize_input('width') ?> x <?php $this->render_resize_input('height') ?> <?php printf("%s (%s x %s)", self::translate_escape('pixels'), self::translate_escape('width'), self::translate_escape('height')) ?></label></p>
+        <input  type="checkbox" id="<?php echo $id ?>" name="<?php echo $field ?>" value="on" <?php if ($this->get_resize_enabled()) { echo ' checked="checked"'; } ?>/>
+        <label for="<?php echo $id; ?>"><?php echo $label; ?>:</label><br>
         <?php
-        echo '<p class="tiny-resize-available">' . sprintf(self::translate_escape("Resizing takes %s per image larger than the specified resolution"), '<strong>' . self::translate_escape('1 additional compression') . '</strong>') . '.</p>';
+
+        echo '</p>';
+        echo '<p class="tiny-resize-available tiny-resize-resolution">';
+
+        printf("%s: ", self::translate_escape('Max Width'));
+        $this->render_resize_input('width');
+        printf("%s: ", self::translate_escape('Max Height'));
+        $this->render_resize_input('height');
+        echo '</p>';
     }
 
     public function render_resize_input($name) {

src/scripts/admin.js

@@ -156,10 +156,14 @@
   if (adminpage === "options-media-php") {
     jQuery('#tiny-compress-status').load(ajaxurl + '?action=tiny_compress_status')
 
-    jQuery('input[name*="tinypng_sizes"]').on("click", function() {
+    jQuery('input[name*="tinypng_sizes"], input#tinypng_resize_original_enabled').on("click", function() {
       // Unfortunately, we need some additional information to display the correct notice.
       totalSelectedSizes = jQuery('input[name*="tinypng_sizes"]:checked').length
-      jQuery('#tiny-image-sizes-notice').load(ajaxurl + '?action=tiny_image_sizes_notice&image_sizes_selected=' + totalSelectedSizes)
+      var image_count_url = ajaxurl + '?action=tiny_image_sizes_notice&image_sizes_selected=' + totalSelectedSizes
+      if (jQuery('input#tinypng_resize_original_enabled').prop('checked') && jQuery('input#tinypng_sizes_0').prop('checked')) {
+        image_count_url += '&resize_original=true'
+      }
+      jQuery('#tiny-image-sizes-notice').load(image_count_url)
     })
 
     function update_resize_settings() {

src/styles/admin.css

@@ -56,6 +56,14 @@ p.tiny-resize-unavailable {
     font-style: italic;
 }
 
+p.tiny-resize-resolution {
+    margin-left: 24px;
+}
+
+p.tiny-resize-resolution input {
+    margin-right: 6px;
+}
+
 input[type=number][name*="tinypng_resize_original"] {
     width: 65px;
 }

test/integration/CompressIntegrationTest.php

@@ -87,7 +87,7 @@ public function testResizeFit() {
         $this->upload_image(dirname(__FILE__) . '/../fixtures/input-example.png');
         $this->assertContains('Resized original to 300x200',
             self::$driver->findElement(WebDriverBy::cssSelector('td.tiny-compress-images'))->getText());
-        self::$driver->findElement(WebDriverBy::xpath('//a[contains(text(),"input-example")]'))->click();
+        $this->view_edit_image();
         $this->assertContains('Dimensions: 300 × 200',
             self::$driver->findElement(WebDriverBy::cssSelector('div.misc-pub-dimensions'))->getText());
     }
@@ -98,7 +98,7 @@ public function testResizeScale() {
         $this->upload_image(dirname(__FILE__) . '/../fixtures/input-example.png');
         $this->assertContains('Resized original to 300x200',
             self::$driver->findElement(WebDriverBy::cssSelector('td.tiny-compress-images'))->getText());
-        self::$driver->findElement(WebDriverBy::xpath('//a[contains(text(),"input-example")]'))->click();
+        $this->view_edit_image();
         $this->assertContains('Dimensions: 300 × 200',
             self::$driver->findElement(WebDriverBy::cssSelector('div.misc-pub-dimensions'))->getText());
     }
@@ -110,7 +110,7 @@ public function testResizeNotNeeded()
         $this->upload_image(dirname(__FILE__) . '/../fixtures/input-example.png');
         $this->assertNotContains('Resized original',
             self::$driver->findElement(WebDriverBy::cssSelector('td.tiny-compress-images'))->getText());
-        self::$driver->findElement(WebDriverBy::xpath('//a[contains(text(),"input-example")]'))->click();
+        $this->view_edit_image();
         $this->assertContains('Dimensions: 1080 × 720',
             self::$driver->findElement(WebDriverBy::cssSelector('div.misc-pub-dimensions'))->getText());
     }
@@ -123,7 +123,7 @@ public function testResizeDisabled()
         $this->upload_image(dirname(__FILE__) . '/../fixtures/input-example.png');
         $this->assertNotContains('Resized original',
             self::$driver->findElement(WebDriverBy::cssSelector('td.tiny-compress-images'))->getText());
-        self::$driver->findElement(WebDriverBy::xpath('//a[contains(text(),"input-example")]'))->click();
+        $this->view_edit_image();
         $this->assertContains('Dimensions: 1080 × 720',
             self::$driver->findElement(WebDriverBy::cssSelector('div.misc-pub-dimensions'))->getText());
     }

test/integration/IntegrationTestCase.php

@@ -88,4 +88,17 @@ protected function disable_resize() {
         }
         self::$driver->findElement(WebDriverBy::tagName('form'))->submit();
     }
+
+    protected function view_edit_image($image_title = 'input-example') {
+        $url = wordpress('/wp-admin/upload.php');
+        if (self::$driver->getCurrentUrl() != $url) {
+            self::$driver->get($url);
+        }
+        if (wordpress_version() >= 43) {
+            $selector = "//span[text()='" . $image_title . "']";
+        } else {
+            $selector = "//a[contains(text(),'" . $image_title . "')]";
+        }
+        self::$driver->findElement(WebDriverBy::xpath($selector))->click();
+    }
 }

test/integration/SettingsIntegrationTest.php

@@ -89,19 +89,19 @@ public function testShouldPersistNoSizes() {
     public function testShouldShowTotalImagesInfo() {
         $elements = self::$driver->findElement(WebDriverBy::id('tiny-image-sizes-notice'))->findElements(WebDriverBy::tagName('p'));
         $statuses = array_map('innerText', $elements);
-        $this->assertContains('With these settings you can compress 100 images for free each month.', $statuses);
+        $this->assertContains('With these settings you can compress at least 100 images for free each month.', $statuses);
     }
 
     public function testShouldUpdateTotalImagesInfo() {
         $element = self::$driver->findElement(
             WebDriverBy::xpath('//input[@type="checkbox" and @name="tinypng_sizes[0]" and @checked="checked"]'));
         $element->click();
         self::$driver->wait(2)->until(WebDriverExpectedCondition::textToBePresentInElement(
-            WebDriverBy::cssSelector('#tiny-image-sizes-notice'), 'With these settings you can compress 125 images for free each month.'));
+            WebDriverBy::cssSelector('#tiny-image-sizes-notice'), 'With these settings you can compress at least 125 images for free each month.'));
         // Not really necessary anymore to assert this.
         $elements = self::$driver->findElement(WebDriverBy::id('tiny-image-sizes-notice'))->findElements(WebDriverBy::tagName('p'));
         $statuses = array_map('innerText', $elements);
-        $this->assertContains('With these settings you can compress 125 images for free each month.', $statuses);
+        $this->assertContains('With these settings you can compress at least 125 images for free each month.', $statuses);
     }
 
     public function testShouldShowCorrectNoImageSizesInfo() {
@@ -125,10 +125,9 @@ public function testShouldShowResizingWhenOriginalEnabled() {
         }
         $labels = self::$driver->findElements(WebDriverBy::tagName('label'));
         $texts = array_map('innerText', $labels);
-        $this->assertContains('fit original image within x pixels (width x height)', $texts);
+        $this->assertContains('Resize orginal images larger than:', $texts);
         $paragraphs = self::$driver->findElements(WebDriverBy::tagName('p'));
         $texts = array_map('innerText', $paragraphs);
-        $this->assertContains('Resizing takes 1 additional compression per image larger than the specified resolution.', $texts);
         $this->assertNotContains('Enable the compression of the original image size to configure resizing.', $texts);
     }
 
@@ -139,10 +138,9 @@ public function testShouldNotShowResizingWhenOriginalDisabled() {
         }
         $labels = self::$driver->findElements(WebDriverBy::tagName('label'));
         $texts = array_map('innerText', $labels);
-        $this->assertNotContains('fit original image within x pixels (width x height)', $texts);
+        $this->assertNotContains('Resize orginal images larger than:', $texts);
         $paragraphs = self::$driver->findElements(WebDriverBy::tagName('p'));
         $texts = array_map('innerText', $paragraphs);
-        $this->assertNotContains('Resizing takes 1 additional compression per image larger than the specified resolution.', $texts);
         $this->assertContains('Enable the compression of the original image size to configure resizing.', $texts);
     }