use srcset for retina support

release as 3.2.0
sunchaserinfo · Jan 13, 2016 · 95ec945 · 95ec945
1 parent 1d628ae
commit 95ec945
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 57 deletions.
diff --git a/README.md b/README.md
@@ -1,10 +1,10 @@
 # Libravatar Replace #
-**Contributors:** sunchaserinfo
-**Tags:** libravatar, avatar, email, picture, image, buddypress, retina
-**Requires at least:** 2.8
-**Tested up to:** 4.4
-**Stable tag:** trunk
-**License:** ISC
+**Contributors:** sunchaserinfo  
+**Tags:** libravatar, avatar, email, picture, image, buddypress, retina  
+**Requires at least:** 2.8  
+**Tested up to:** 4.4  
+**Stable tag:** trunk  
+**License:** ISC  
 
 Replaces Gravatars with Libravatars in your WordPress installation.
 
@@ -24,19 +24,19 @@ Just extract the plugin directory into your *wp-content/plugins* directory.
 
 (available since 2.0.3.1)
 
-If you are using Composer to manage your plugins, require sunchaser/libravatar package.
+If you are using Composer to manage your plugins, require sunchaser/wp-libravatar-replace package.
 You should use composer/installers to ensure that the plugin will be installed to the correct path.
 
     {
         "require": {
-            "sunchaser/libravatar": "dev-master",
+            "sunchaser/wp-libravatar-replace": "dev-master",
             "composer/installers": "~1.0"
         }
     }
 
 ## Frequently Asked Questions ##
 ### What are the requirements of this plugin? ###
-PHP 5.2.4, WordPress 3.8.
+PHP 5.2.4, WordPress 4.3.
 
 The plugin is tested down to WordPress 2.8 but I will not support anything but current and prevoius releases.
 The plugin will not work under WordPress 2.7 and earlier.
@@ -130,6 +130,11 @@ The major component of the plugin is Services_Libravatar PHP library
 
 ## Changelog ##
 
+### 3.2.0 ###
+* We are now on GitHub!
+* Retina support moved from crazy styles to srcset
+* Retina support is now a core function, option removed
+
 ### 3.1.2 ###
 * Fix smooth images in Twenty Thirteen
 

diff --git a/classes/LibravatarReplace.class.php b/classes/LibravatarReplace.class.php
@@ -21,9 +21,6 @@ class LibravatarReplace
     const OPTION_LOCAL_CACHE_ENABLED = 'libravatar_replace_cache_enabled';
     const OPTION_LOCAL_CACHE_ENABLED_DEFAULT = 0;
 
-    const OPTION_RETINA_ENABLED = 'libravatar_retina_enabled';
-    const OPTION_RETINA_ENABLED_DEFAULT = 0;
-
     public function __construct($plugin_file)
     {
         $this->plugin_file = $plugin_file;
@@ -141,32 +138,31 @@ private function getAvatarCode($libravatar, $email, $alt, $options, $size)
 
         $url = $libravatar->getUrl($email, $options); // get normal size avatar
 
-        if ($this->isRetinaEnabled()) {
-            $id = uniqid('libravatar-');
-
-            $options['size'] = $size * 2;
-
-            $url_large = $libravatar->getUrl($email, $options); // get double size avatar
-
-            return <<<HTML
-                <style>
-                    #{$id} {
-                        background-image: url({$url}) !important;
-                        background-size: 100% !important;
-                        padding: 0 !important;
-                        width: {$size}px;
-                        height: {$size}px;
-                    }
-                </style>
-                <style media="(min-resolution: 1.5dppx)">
-                    #{$id} { background-image: url({$url_large}) !important; }
-                </style>
-                <img id="$id" alt="{$alt}" class="avatar avatar-{$size} photo" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
-HTML;
+        $srcset = array();
 
-        } else {
-            return "<img alt='{$alt}' src='{$url}' class='avatar avatar-{$size} photo' height='{$size}' width='{$size}' />";
+        $size_last = false;
+        foreach (array(1, '1.5', 2, 3, 4) as $mul) { // use 1.5 as string to avoid regional conversions
+            $src_size = intval($size * $mul);
+
+            if ($src_size >= 512) {
+                $src_size   = 512;
+                $size_last  = true;
+            }
+
+            $options['size'] = $src_size;
+
+            $src_url = $libravatar->getUrl($email, $options);
+
+            $srcset []= "{$src_url} {$mul}x";
+
+            if ($size_last) {
+                break;
+            }
         }
+
+        $set_urls = implode(',', $srcset);
+
+        return "<img alt='{$alt}' class='avatar avatar-{$size} photo' height='{$size}' width='{$size}' src='{$url}' srcset='{$set_urls}' />";
     }
 
     /**
@@ -192,7 +188,7 @@ public function filterBPCoreGravatarEmail($email)
      */
     public function filterBPGravatarUrl()
     {
-        $default_host = $this->isSsl() ? 'https://seccdn.libravatar.org/avatar/' : 'http://cdn.libravatar.org/avatar/';
+        $default_host = 'https://seccdn.libravatar.org/avatar/';
 
         if (empty($this->bp_catched_last_email)) {
             return $default_host;
@@ -244,7 +240,6 @@ public function registerAdminMenu()
     public function registerSettings()
     {
         register_setting(self::MODULE_NAME, self::OPTION_LOCAL_CACHE_ENABLED);
-        register_setting(self::MODULE_NAME, self::OPTION_RETINA_ENABLED);
     }
 
     public function registerActions($links, $file)
@@ -273,14 +268,4 @@ private function isLocalCacheEnabled()
     {
         return get_option(self::OPTION_LOCAL_CACHE_ENABLED, self::OPTION_LOCAL_CACHE_ENABLED_DEFAULT) ? true : false;
     }
-
-    /**
-     * Get retina support enabled option
-     *
-     * @return bool
-     */
-    private function isRetinaEnabled()
-    {
-        return get_option(self::OPTION_RETINA_ENABLED, self::OPTION_RETINA_ENABLED_DEFAULT) ? true : false;
-    }
 }
diff --git a/readme.txt b/readme.txt
@@ -24,19 +24,19 @@ Just extract the plugin directory into your *wp-content/plugins* directory.
 
 (available since 2.0.3.1)
 
-If you are using Composer to manage your plugins, require sunchaser/libravatar package.
+If you are using Composer to manage your plugins, require sunchaser/wp-libravatar-replace package.
 You should use composer/installers to ensure that the plugin will be installed to the correct path.
 
     {
         "require": {
-            "sunchaser/libravatar": "dev-master",
+            "sunchaser/wp-libravatar-replace": "dev-master",
             "composer/installers": "~1.0"
         }
     }
 
 == Frequently Asked Questions ==
 = What are the requirements of this plugin? =
-PHP 5.2.4, WordPress 3.8.
+PHP 5.2.4, WordPress 4.3.
 
 The plugin is tested down to WordPress 2.8 but I will not support anything but current and prevoius releases.
 The plugin will not work under WordPress 2.7 and earlier.
@@ -124,6 +124,11 @@ The major component of the plugin is Services_Libravatar PHP library
 
 == Changelog ==
 
+= 3.2.0 =
+* We are now on GitHub!
+* Retina support moved from crazy styles to srcset
+* Retina support is now a core function, option removed
+
 = 3.1.2 =
 * Fix smooth images in Twenty Thirteen
 

diff --git a/views/admin.php b/views/admin.php
@@ -15,12 +15,6 @@
             <label for="cache-enabled"><?php _e('Use local cache for images', 'libravatar-replace') ?> <?php _e('(experimental)', 'libravatar-replace') ?></label>
         </p>
 
-        <p>
-            <input type="checkbox" name="<?php echo LibravatarReplace::OPTION_RETINA_ENABLED ?>" id="retina-enabled" value="1"
-                <?php if(get_option(LibravatarReplace::OPTION_RETINA_ENABLED, LibravatarReplace::OPTION_RETINA_ENABLED_DEFAULT)): ?>checked="checked"<?php endif ?>/>
-            <label for="retina-enabled"><?php _e('Use double-sized avatars on Retina screen', 'libravatar-replace') ?> <?php _e('(experimental)', 'libravatar-replace') ?></label>
-        </p>
-
         <p class="submit">
             <input type="submit" class="button-primary" value="<?php _e('Save Changes', 'libravatar-replace') ?>" />
         </p>