Moved original message to the checkbox label, and made the number of images stick out a bit more.

Author: mattijsvandruenen

src/class-tiny-settings.php

@@ -59,12 +59,12 @@ public function admin_init() {
         register_setting('media', $field);
         add_settings_field($field, self::translate('Connection status'), $this->get_method('render_pending_status'), 'media', $section);
 
-        add_action('wp_ajax_tiny_image_sizes_notices', $this->get_method('image_sizes_notices'));
+        add_action('wp_ajax_tiny_image_sizes_notice', $this->get_method('image_sizes_notice'));
         add_action('wp_ajax_tiny_compress_status', $this->get_method('connection_status'));
     }
 
-    public function image_sizes_notices() {
-        $this->render_image_sizes_notices($_GET["image_sizes_selected"], $_GET["original_selected"]);
+    public function image_sizes_notice() {
+        $this->render_image_sizes_notice($_GET["image_sizes_selected"]);
         exit();
     }
 
@@ -179,28 +179,23 @@ public function render_api_key() {
     }
 
     public function render_sizes() {
-        echo '<p>' . self::translate_escape('You can choose to compress different image sizes created by WordPress here') . '.<br/>';
-        echo self::translate_escape('Remember each additional image size will affect your TinyPNG monthly usage') . "!";?>
+        echo '<p>' . self::translate_escape('Choose sizes to compress') . ':';?>
 <input type="hidden" name="<?php echo self::get_prefixed_name('sizes[' . self::DUMMY_SIZE .']'); ?>" value="on"/></p>
 <?php
-        $original_enabled = false;
         foreach ($this->get_sizes() as $size => $option) {
-            if ($size === Tiny_Metadata::ORIGINAL) {
-                $original_enabled = $option['tinify'];
-            }
             $this->render_size_checkbox($size, $option);
         }
 
-        echo '<div id="tiny-image-sizes-notices">';
-        $this->render_image_sizes_notices(count(self::get_active_tinify_sizes()), $original_enabled);
+        echo '<div id="tiny-image-sizes-notice">';
+        $this->render_image_sizes_notice(count(self::get_active_tinify_sizes()));
         echo '</div>';
     }
 
     private function render_size_checkbox($size, $option) {
         $id = self::get_prefixed_name("sizes_$size");
         $field = self::get_prefixed_name("sizes[$size]");
         if ($size === Tiny_Metadata::ORIGINAL) {
-            $label = self::translate_escape("original");
+            $label = self::translate_escape("original") . ' (' . self::translate_escape('overwritten by compressed image') . ')';
         } else {
             $label = $size . " - ${option['width']}x${option['height']}";
         }?>
@@ -209,7 +204,7 @@ private function render_size_checkbox($size, $option) {
 <?php
     }
 
-    public function render_image_sizes_notices($active_image_sizes_count, $original_selected) {
+    public function render_image_sizes_notice($active_image_sizes_count) {
         echo '<br/>';
         if ($active_image_sizes_count < 1) {
             echo '<p>' . self::translate_escape('With these settings no images will be compressed') . '.</p>';
@@ -218,11 +213,12 @@ public function render_image_sizes_notices($active_image_sizes_count, $original_
             $free_images_per_month = floor(self::MONTHLY_FREE_COMPRESSIONS / $active_image_sizes_count);
 
             echo '<p>';
-            printf(self::translate_escape('With these settings you can compress %s images for free each month') . '.', $free_images_per_month);
+            echo self::translate_escape('With these settings you can compress');
+            echo ' <strong>';
+            printf(self::translate_escape('%s images'), $free_images_per_month);
+            echo '</strong> ';
+            echo self::translate_escape('for free each month') . '.';
             echo '</p>';
-            if ($original_selected) {
-                echo '<p>' . self::translate_escape('Note: your original images will be overwritten with the compressed versions') . '!</p>';
-            }
         }
     }
 

src/languages/tiny-compress-images-nl_NL.po

@@ -19,8 +19,8 @@ msgstr "Bestandscompressie"
 msgid "original"
 msgstr "origineel"
 
-msgid "You can choose to compress different image sizes created by WordPress here"
-msgstr "Je kunt hier kiezen welke afmetingen je wilt comprimeren van de afbeeldingen"
+msgid "Choose sizes to compress"
+msgstr "Kies afmetingen om te comprimeren"
 
 msgid "Remember each additional image size will affect your TinyPNG monthly usage"
 msgstr "Elke afmetingen zal apart worden gecomprimeerd en telt mee voor je verbruik"
@@ -133,14 +133,20 @@ msgstr "Als je meer afbeeldingen wilt comprimeren kun je je %s aanpassen"
 msgid "Upgrade your %s if you like to compress more images"
 msgstr "Upgrade je %s als je meer afbeeldingen wilt comprimeren"
 
-msgid "With these settings you can compress %s images for free each month"
-msgstr "Met deze instellingen kun je elke maand %s afbeeldingen gratis comprimeren"
+msgid "With these settings you can compress"
+msgstr "Met deze instellingen kun je elke maand"
+
+msgid "%s images"
+msgstr "%s afbeeldingen"
+
+msgid "for free each month"
+msgstr "gratis comprimeren"
 
 msgid "With these settings no images will be compressed"
 msgstr "Met deze instellingen worden geen afbeeldingen gecomprimeerd"
 
-msgid "Note: your original images will be overwritten with the compressed versions"
-msgstr "Belangrijk: je originele afbeeldingen worden overschreven met de gecomprimeerde afbeeldingen"
+msgid "overwritten by compressed image"
+msgstr "overschreven door gecomprimeerde afbeelding"
 
 msgid "Please fill in an API key to start compressing images"
 msgstr "Vul een API-sleutel in om te starten met comprimeren"

src/scripts/admin.js

@@ -157,10 +157,9 @@
     jQuery('#tiny-compress-status').load(ajaxurl + '?action=tiny_compress_status')
 
     jQuery('input[name*="tinypng_sizes"]').on("click", function() {
-      // Unfortunately, we need some additional information to display the correct notices.
-      originalSelected = jQuery('input[name="tinypng_sizes[0]"]:checked').length
+      // Unfortunately, we need some additional information to display the correct notice.
       totalSelectedSizes = jQuery('input[name*="tinypng_sizes"]:checked').length
-      jQuery('#tiny-image-sizes-notices').load(ajaxurl + '?action=tiny_image_sizes_notices&image_sizes_selected=' + totalSelectedSizes + '&original_selected=' + originalSelected)
+      jQuery('#tiny-image-sizes-notice').load(ajaxurl + '?action=tiny_image_sizes_notice&image_sizes_selected=' + totalSelectedSizes)
     })
   }
 

test/integration/SettingsIntegrationTest.php

@@ -86,25 +86,8 @@ public function testShouldPersistNoSizes() {
         $this->assertEquals(0, count(array_map('elementName', $elements)));
     }
 
-    public function testShouldShowOriginalsMessageWhenChecked() {
-        $elements = self::$driver->findElement(WebDriverBy::id('tiny-image-sizes-notices'))->findElements(WebDriverBy::tagName('p'));
-        $statuses = array_map('innerText', $elements);
-        $this->assertContains('Note: your original images will be overwritten with the compressed versions!', $statuses);
-    }
-
-    public function testShouldHideOriginalsMessageWhenUnchecked() {
-        $element = self::$driver->findElement(
-            WebDriverBy::xpath('//input[@type="checkbox" and @name="tinypng_sizes[0]" and @checked="checked"]'));
-        $element->click();
-        self::$driver->findElement(WebDriverBy::tagName('form'))->submit();
-
-        $elements = self::$driver->findElement(WebDriverBy::id('tiny-image-sizes-notices'))->findElements(WebDriverBy::tagName('p'));
-        $statuses = array_map('innerText', $elements);
-        $this->assertNotContains('Note: your original images will be overwritten with the compressed versions!', $statuses);
-    }
-
     public function testShouldShowTotalImagesInfo() {
-        $elements = self::$driver->findElement(WebDriverBy::id('tiny-image-sizes-notices'))->findElements(WebDriverBy::tagName('p'));
+        $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);
     }
@@ -114,9 +97,9 @@ public function testShouldUpdateTotalImagesInfo() {
             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-notices'), 'With these settings you can compress 125 images for free each month.'));
+            WebDriverBy::cssSelector('#tiny-image-sizes-notice'), 'With these settings you can compress 125 images for free each month.'));
         // Not really necessary anymore to assert this.
-        $elements = self::$driver->findElement(WebDriverBy::id('tiny-image-sizes-notices'))->findElements(WebDriverBy::tagName('p'));
+        $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);
     }
@@ -128,9 +111,9 @@ public function testShouldShowCorrectNoImageSizesInfo() {
             $element->click();
         }
         self::$driver->wait(2)->until(WebDriverExpectedCondition::textToBePresentInElement(
-            WebDriverBy::cssSelector('#tiny-image-sizes-notices'), 'With these settings no images will be compressed.'));
+            WebDriverBy::cssSelector('#tiny-image-sizes-notice'), 'With these settings no images will be compressed.'));
         // Not really necessary anymore to assert this.
-        $elements = self::$driver->findElement(WebDriverBy::id('tiny-image-sizes-notices'))->findElements(WebDriverBy::tagName('p'));
+        $elements = self::$driver->findElement(WebDriverBy::id('tiny-image-sizes-notice'))->findElements(WebDriverBy::tagName('p'));
         $statuses = array_map('innerText', $elements);
         $this->assertContains('With these settings no images will be compressed.', $statuses);
     }