Changeset 3716956

Timestamp:

09/28/2026 10:52:41 AM (3 weeks ago)

Author:

adityapatadia

Message:

Update to version 1.4.4 from GitHub

Location:

gumlet

Files:

• tags/1.4.4 (copied) (copied from gumlet/trunk )
• tags/1.4.4/changelog.txt (modified) (1 diff)
• tags/1.4.4/gumlet.php (modified) (1 diff)
• tags/1.4.4/includes/class-gumlet.php (modified) (4 diffs)
• tags/1.4.4/includes/options-page.php (modified) (1 diff)
• tags/1.4.4/readme.txt (modified) (1 diff)
• trunk/changelog.txt (modified) (1 diff)
• trunk/gumlet.php (modified) (1 diff)
• trunk/includes/class-gumlet.php (modified) (4 diffs)
• trunk/includes/options-page.php (modified) (1 diff)
• trunk/readme.txt (modified) (1 diff)

gumlet/tags/1.4.4/changelog.txt

@@ -1 +1 @@
 == Changelog ==
+
+= 1.4.4 =
+* Experimental things to enhance your user experience, checkout Plugin settings > Experimental
 
 = 1.4.3 =

gumlet/tags/1.4.4/gumlet.php

@@ -12 +12 @@
  * Plugin URI:  https://github.com/gumlet/wordpress-plugin
  * Description: A WordPress plugin to automatically load all your existing (and future) WordPress images via the <a href="http://www.gumlet.com" target="_blank">Gumlet</a> service for smaller, faster, and better looking images.
- * Version:     1.4.3
+ * Version:     1.4.4
  * Requires at least: 6.0
  * Requires PHP: 7.4

gumlet/tags/1.4.4/includes/class-gumlet.php

@@ -597 +597 @@
                 }
 
-                if (in_array($src, $excluded_urls) || strpos($imageTag->getAttribute('fetchpriority'), "high") !== false) {
+                // fetchpriority=high (LCP) images are rewritten server-side with a
+                // responsive srcset so they get resized without waiting for gumlet.js.
+                $is_priority = strpos($imageTag->getAttribute('fetchpriority'), "high") !== false;
+
+                if (in_array($src, $excluded_urls) || ($is_priority && !$this->get_option("optimize_priority_images"))) {
                     $imageTag->setAttribute("data-gumlet", 'false');
                     $new_img_tag = $doc->saveHTML($imageTag);
@@ -634 +638 @@
                     $auto_resize_on = $this->is_auto_resize_enabled();
 
+                    if ($is_priority) {
+                        $this->set_priority_image_attributes($imageTag, $gumlet_url);
+                        $new_img_tag = $doc->saveHTML($imageTag);
+                        $content = str_replace($unconverted_img_tag, $new_img_tag, $content);
+                        continue;
+                    }
+
                     if ($auto_resize_on) {
                         $imageTag->setAttribute("data-gmsrc", $gumlet_url);
-                        $imageTag->setAttribute("src", plugins_url('assets/images/pixel.png', __DIR__));
+                        $imageTag->setAttribute("src", $this->get_placeholder_src($imageTag));
                     } else {
                         $imageTag->setAttribute("src", $gumlet_url);
@@ -655 +666 @@
                     $content = str_replace($unconverted_img_tag, $new_img_tag, $content);
                 } else {
+                    if ($is_priority) {
+                        $imageTag->setAttribute("data-gumlet", 'false');
+                        $new_img_tag = $doc->saveHTML($imageTag);
+                        $content = str_replace($unconverted_img_tag, $new_img_tag, $content);
+                    }
                     $this->logger->log("Skipping due to mismatched host to be replaced.");
                 }
@@ -663 +679 @@
         }
         return $content;
+    }
+
+    /**
+     * Give a priority (LCP) image a real Gumlet src plus a width-based srcset,
+     * so the browser picks a right-sized image without waiting for gumlet.js.
+     *
+     * @param DOMElement $imageTag
+     * @param string     $gumlet_url
+     */
+    protected function set_priority_image_attributes($imageTag, $gumlet_url)
+    {
+        $max_width = (int) $imageTag->getAttribute('width');
+        $max_width = $max_width > 0 ? $max_width * 2 : 2560;
+
+        $srcset = [];
+        foreach ([320, 480, 640, 768, 1024, 1280, 1536, 1920, 2560] as $w) {
+            if ($w > $max_width) {
+                break;
+            }
+            $srcset[] = add_query_arg('w', $w, $gumlet_url) . ' ' . $w . 'w';
+        }
+
+        $imageTag->setAttribute("src", add_query_arg('w', min(1280, $max_width), $gumlet_url));
+        if ($srcset) {
+            $imageTag->setAttribute("srcset", implode(', ', $srcset));
+            if (!$imageTag->getAttribute('sizes')) {
+                $imageTag->setAttribute("sizes", '100vw');
+            }
+        }
+        $imageTag->setAttribute("data-gumlet", 'false');
+        $imageTag->removeAttribute("data-gmsrc");
+        $imageTag->removeAttribute("data-src");
+        $imageTag->removeAttribute("data-srcset");
+        $imageTag->removeAttribute("data-lazy-srcset");
+        $imageTag->removeAttribute("data-lazy-src");
+    }
+
+    /**
+     * Transparent SVG placeholder with the image's own aspect ratio, so layout
+     * (e.g. masonry grids) is correct before gumlet.js swaps in the real image.
+     * Falls back to the 1x1 pixel when the option is off or width/height are unknown.
+     *
+     * @param DOMElement $imageTag
+     * @return string
+     */
+    protected function get_placeholder_src($imageTag)
+    {
+        if (!$this->get_option("aspect_ratio_placeholder")) {
+            return plugins_url('assets/images/pixel.png', __DIR__);
+        }
+        $width = (int) $imageTag->getAttribute('width');
+        $height = (int) $imageTag->getAttribute('height');
+        if ($width > 0 && $height > 0) {
+            return "data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20" . $width . "%20" . $height . "'%3E%3C/svg%3E";
+        }
+        return plugins_url('assets/images/pixel.png', __DIR__);
     }
 

gumlet/tags/1.4.4/includes/options-page.php

@@ -260 +260 @@
                 </table>
             </div>
+            <input type="radio" id="tabexperimental" name="mytabs">
+            <label for="tabexperimental" class="mytablabel">Experimental</label>
+            <div class="tab">
+                <table class="form-table">
+                    <tbody>
+                        <tr>
+                            <th>
+                                <label class="description" for="gumlet_settings[optimize_priority_images]">
+                                    <?php esc_html_e('Optimize Priority Images', 'gumlet'); ?>
+                                </label>
+                            </th>
+                            <td>
+                                <input id="gumlet_settings[optimize_priority_images]" type="checkbox"
+                                    name="gumlet_settings[optimize_priority_images]" value="1" <?php
+                                    checked($this->get_option('optimize_priority_images')) ?> />
+                                <p style="color: #666">Serves your most important image (usually the hero or first
+                                    image) through Gumlet at the right size for each screen, without waiting for
+                                    Gumlet.js. WordPress and many themes mark this image with fetchpriority="high", and by
+                                    default Gumlet leaves it untouched, so it loads at its full original size.
+                                    <br>Turn this on to improve Largest Contentful Paint (LCP) and reduce mobile page
+                                    weight. Recommended if your theme uses large banner or slider images.</p>
+                            </td>
+                        </tr>
+                        <tr>
+                            <th>
+                                <label class="description" for="gumlet_settings[aspect_ratio_placeholder]">
+                                    <?php esc_html_e('Aspect-Ratio Placeholders', 'gumlet'); ?>
+                                </label>
+                            </th>
+                            <td>
+                                <input id="gumlet_settings[aspect_ratio_placeholder]" type="checkbox"
+                                    name="gumlet_settings[aspect_ratio_placeholder]" value="1" <?php
+                                    checked($this->get_option('aspect_ratio_placeholder')) ?> />
+                                <p style="color: #666">While an image is waiting to load, reserves space with the image's
+                                    exact shape (from its width and height attributes) instead of a 1x1 square. This stops
+                                    content from jumping as images load (better CLS) and fixes gaps in masonry grids,
+                                    galleries and sliders that measure images while loading. Images without width and
+                                    height use the default placeholder.
+                                    <br>Turn this on if you see large gaps or overlapping content that corrects itself
+                                    when the browser window is resized.</p>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
         </div>
         <input type="submit" class="button-primary" value="<?php esc_html_e('Save Options', 'gumlet'); ?>" />

gumlet/tags/1.4.4/readme.txt

@@ -9 +9 @@
 Requires PHP: 7.4
 Tested up to: 7.1
-Stable tag: 1.4.3
+Stable tag: 1.4.4
 License: BSD-2
 License URI: http://opensource.org/licenses/BSD-2-Clause

gumlet/trunk/changelog.txt

@@ -1 +1 @@
 == Changelog ==
+
+= 1.4.4 =
+* Experimental things to enhance your user experience, checkout Plugin settings > Experimental
 
 = 1.4.3 =

gumlet/trunk/gumlet.php

@@ -12 +12 @@
  * Plugin URI:  https://github.com/gumlet/wordpress-plugin
  * Description: A WordPress plugin to automatically load all your existing (and future) WordPress images via the <a href="http://www.gumlet.com" target="_blank">Gumlet</a> service for smaller, faster, and better looking images.
- * Version:     1.4.3
+ * Version:     1.4.4
  * Requires at least: 6.0
  * Requires PHP: 7.4

gumlet/trunk/includes/class-gumlet.php

@@ -597 +597 @@
                 }
 
-                if (in_array($src, $excluded_urls) || strpos($imageTag->getAttribute('fetchpriority'), "high") !== false) {
+                // fetchpriority=high (LCP) images are rewritten server-side with a
+                // responsive srcset so they get resized without waiting for gumlet.js.
+                $is_priority = strpos($imageTag->getAttribute('fetchpriority'), "high") !== false;
+
+                if (in_array($src, $excluded_urls) || ($is_priority && !$this->get_option("optimize_priority_images"))) {
                     $imageTag->setAttribute("data-gumlet", 'false');
                     $new_img_tag = $doc->saveHTML($imageTag);
@@ -634 +638 @@
                     $auto_resize_on = $this->is_auto_resize_enabled();
 
+                    if ($is_priority) {
+                        $this->set_priority_image_attributes($imageTag, $gumlet_url);
+                        $new_img_tag = $doc->saveHTML($imageTag);
+                        $content = str_replace($unconverted_img_tag, $new_img_tag, $content);
+                        continue;
+                    }
+
                     if ($auto_resize_on) {
                         $imageTag->setAttribute("data-gmsrc", $gumlet_url);
-                        $imageTag->setAttribute("src", plugins_url('assets/images/pixel.png', __DIR__));
+                        $imageTag->setAttribute("src", $this->get_placeholder_src($imageTag));
                     } else {
                         $imageTag->setAttribute("src", $gumlet_url);
@@ -655 +666 @@
                     $content = str_replace($unconverted_img_tag, $new_img_tag, $content);
                 } else {
+                    if ($is_priority) {
+                        $imageTag->setAttribute("data-gumlet", 'false');
+                        $new_img_tag = $doc->saveHTML($imageTag);
+                        $content = str_replace($unconverted_img_tag, $new_img_tag, $content);
+                    }
                     $this->logger->log("Skipping due to mismatched host to be replaced.");
                 }
@@ -663 +679 @@
         }
         return $content;
+    }
+
+    /**
+     * Give a priority (LCP) image a real Gumlet src plus a width-based srcset,
+     * so the browser picks a right-sized image without waiting for gumlet.js.
+     *
+     * @param DOMElement $imageTag
+     * @param string     $gumlet_url
+     */
+    protected function set_priority_image_attributes($imageTag, $gumlet_url)
+    {
+        $max_width = (int) $imageTag->getAttribute('width');
+        $max_width = $max_width > 0 ? $max_width * 2 : 2560;
+
+        $srcset = [];
+        foreach ([320, 480, 640, 768, 1024, 1280, 1536, 1920, 2560] as $w) {
+            if ($w > $max_width) {
+                break;
+            }
+            $srcset[] = add_query_arg('w', $w, $gumlet_url) . ' ' . $w . 'w';
+        }
+
+        $imageTag->setAttribute("src", add_query_arg('w', min(1280, $max_width), $gumlet_url));
+        if ($srcset) {
+            $imageTag->setAttribute("srcset", implode(', ', $srcset));
+            if (!$imageTag->getAttribute('sizes')) {
+                $imageTag->setAttribute("sizes", '100vw');
+            }
+        }
+        $imageTag->setAttribute("data-gumlet", 'false');
+        $imageTag->removeAttribute("data-gmsrc");
+        $imageTag->removeAttribute("data-src");
+        $imageTag->removeAttribute("data-srcset");
+        $imageTag->removeAttribute("data-lazy-srcset");
+        $imageTag->removeAttribute("data-lazy-src");
+    }
+
+    /**
+     * Transparent SVG placeholder with the image's own aspect ratio, so layout
+     * (e.g. masonry grids) is correct before gumlet.js swaps in the real image.
+     * Falls back to the 1x1 pixel when the option is off or width/height are unknown.
+     *
+     * @param DOMElement $imageTag
+     * @return string
+     */
+    protected function get_placeholder_src($imageTag)
+    {
+        if (!$this->get_option("aspect_ratio_placeholder")) {
+            return plugins_url('assets/images/pixel.png', __DIR__);
+        }
+        $width = (int) $imageTag->getAttribute('width');
+        $height = (int) $imageTag->getAttribute('height');
+        if ($width > 0 && $height > 0) {
+            return "data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20" . $width . "%20" . $height . "'%3E%3C/svg%3E";
+        }
+        return plugins_url('assets/images/pixel.png', __DIR__);
     }
 

gumlet/trunk/includes/options-page.php

@@ -260 +260 @@
                 </table>
             </div>
+            <input type="radio" id="tabexperimental" name="mytabs">
+            <label for="tabexperimental" class="mytablabel">Experimental</label>
+            <div class="tab">
+                <table class="form-table">
+                    <tbody>
+                        <tr>
+                            <th>
+                                <label class="description" for="gumlet_settings[optimize_priority_images]">
+                                    <?php esc_html_e('Optimize Priority Images', 'gumlet'); ?>
+                                </label>
+                            </th>
+                            <td>
+                                <input id="gumlet_settings[optimize_priority_images]" type="checkbox"
+                                    name="gumlet_settings[optimize_priority_images]" value="1" <?php
+                                    checked($this->get_option('optimize_priority_images')) ?> />
+                                <p style="color: #666">Serves your most important image (usually the hero or first
+                                    image) through Gumlet at the right size for each screen, without waiting for
+                                    Gumlet.js. WordPress and many themes mark this image with fetchpriority="high", and by
+                                    default Gumlet leaves it untouched, so it loads at its full original size.
+                                    <br>Turn this on to improve Largest Contentful Paint (LCP) and reduce mobile page
+                                    weight. Recommended if your theme uses large banner or slider images.</p>
+                            </td>
+                        </tr>
+                        <tr>
+                            <th>
+                                <label class="description" for="gumlet_settings[aspect_ratio_placeholder]">
+                                    <?php esc_html_e('Aspect-Ratio Placeholders', 'gumlet'); ?>
+                                </label>
+                            </th>
+                            <td>
+                                <input id="gumlet_settings[aspect_ratio_placeholder]" type="checkbox"
+                                    name="gumlet_settings[aspect_ratio_placeholder]" value="1" <?php
+                                    checked($this->get_option('aspect_ratio_placeholder')) ?> />
+                                <p style="color: #666">While an image is waiting to load, reserves space with the image's
+                                    exact shape (from its width and height attributes) instead of a 1x1 square. This stops
+                                    content from jumping as images load (better CLS) and fixes gaps in masonry grids,
+                                    galleries and sliders that measure images while loading. Images without width and
+                                    height use the default placeholder.
+                                    <br>Turn this on if you see large gaps or overlapping content that corrects itself
+                                    when the browser window is resized.</p>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
         </div>
         <input type="submit" class="button-primary" value="<?php esc_html_e('Save Options', 'gumlet'); ?>" />

gumlet/trunk/readme.txt

@@ -9 +9 @@
 Requires PHP: 7.4
 Tested up to: 7.1
-Stable tag: 1.4.3
+Stable tag: 1.4.4
 License: BSD-2
 License URI: http://opensource.org/licenses/BSD-2-Clause