WordPress.org
Get WordPress

Plugin Directory

Changeset 1542304


Ignore:
Timestamp:
11/28/2016 10:07:22 PM (9 years ago)
Author:
factmaven
Message:

Update to v1.0.4

Location:
specify-image-dimensions
Files:
4 added
2 edited

Legend:

Unmodified
Added
Removed

  • specify-image-dimensions/trunk/readme.txt

    r1488522 r1542304  
    33Tags: specify image dimensions, image, img, dimensions, width, height, gtmetrix, yslow, pagespeed, page speed, optimization, performance
    44Requires at least: 1.5.1
    5 Tested up to: 4.6
    6 Stable tag: 1.0.3
     5Tested up to: 4.6.1
     6Stable tag: 1.0.4
    77License: GPLv3
    88License URI: http://www.gnu.org/licenses/gpl-3.0.html
    99
    10 Automatically specify image dimensions that are missing width and/or height attributes. Helps with website speed tools such as GTmetrix.
     10Automatically specify image dimensions that are missing width and/or height attributes. Helps load faster and better ranking on website speed tools such as GTmetrix.
    1111
    1212== Description ==
    13 A simple and lightweight plugin that scans your website and automatically sets the appropriate image dimensions that are missing a `width` and/or `height` attributes in your `<img>` tags.
     13> **Specify Image Dimensions** is a plugin that scans and inserts missing `width` and `height` in all `<img>` tags. Specifying the dimension allows for faster rendering by eliminating the need for unnecessary re-flows and repaints. This is particularly helpful with website speed tools such as [GTmetrix](https://gtmetrix.com) and [Google's PageSpeed](https://developers.google.com/speed/pagespeed).
    1414
    15 For example, here are some images with no dimensions set:
     15= Before =
    1616`
    17 <img src="http://link.to/some/img1.jpg" id="123" alt="Some Alt" />
    18 <img class="some-class" src="http://link.to/some/img2.jpg" alt="Another Alt" />
    19 <img class="another-class" src="http://link.to/some/img2.jpg" width="500" />
     17<img src="http://example.com/some/image.jpg" title="Some Title" />
     18<img src="http://example.com/some/vector.svg" class="svg" />
     19<img src="http://example.com/some/another-vector.webp" />
    2020`
    21 The plugin will get the actual image dimension and insert the width and height:
     21
     22= After =
    2223`
    23 <img src="http://link.to/some/img1.jpg" alt="Some Alt" id="123" width="500" height="350" />
    24 <img src="http://link.to/some/img1.jpg" alt="Another Alt" class="some-class" width="500" height="350" />
    25 <img src="http://link.to/some/img1.jpg" class="another-class" width="500" height="350" />
     24<img src="http://example.com/some/image.jpg" title"Some Title" width="100" height="25" />
     25<img src="http://example.com/some/vector.svg" class="svg" width="100%" height="auto" />
     26<img src="http://example.com/some/another-vector.webp" width="100%" height="auto" />
    2627`
    27 = Why is this important? =
    28 Specifying a `width` and `height` for all images allows for faster rendering by eliminating the need for unnecessary re-flows and repaints. This is particularly helpful with website speed tools such as [GTmetrix](https://gtmetrix.com) and [Google's PageSpeed](https://developers.google.com/speed/pagespeed).
    29 
    30 > **More details from Google**
    31 >
    32 > When the browser lays out the page, it needs to be able to flow around replaceable elements such as images. It can begin to render a page even before images are downloaded, provided that it knows the dimensions to wrap non-replaceable elements around. If no dimensions are specified in the containing document, or if the dimensions specified don't match those of the actual images, the browser will require a reflow and repaint once the images are downloaded. To prevent reflows, specify the width and height of all images, either in the HTML <img> tag, or in CSS.
    33 >
    34 > **Reference**: [GTmetrix](https://gtmetrix.com/specify-image-dimensions.html)
    3528
    3629= Contribute on GitHub =
    37 [View this plugin on GitHub](https://github.com/factmaven/specify-image-dimensions)
    38 
    39 We're always looking for suggestions to improve our plugin!
     30Want to help improve this plugin? Head over to our [GitHub page](https://github.com/factmaven/specify-image-dimensions)
    4031
    4132== Installation ==
    … …  
    6051
    6152== Changelog ==
    62 = 1.0.3 (09/01/16) =
     53=1.0.4 =
     54*2016-11-28*
     55* **Fix**: SVG and webP images were given `0` width and height
     56* Various code improvements
     57
     58= 1.0.3 =
     59* *2016-09-01*
    6360* **Fix**: Thumbnail weren't showing up in *Pages*
    6461* Renamed plugin file from `index.php` to `specify-image-dimensions.php`
    6562
    66 = 1.0.2 (08/25/16) =
     63= 1.0.2 =
     64* *2016-08-25*
    6765* **Fix**: Thumbnails weren't showing in the *Media* library (thanks [ramonjosegn](https://wordpress.org/support/topic/bug-in-last-udpate))
    6866
    69 = 1.0.1 (08/24/16) =
     67= 1.0.1 =
     68* *2016-08-24*
    7069* **Fix**: Image dimensions were not being set
    7170
    72 = 1.0.0 (08/21/16) =
     71= 1.0.0 =
     72* *2016-08-21*
    7373* Initial release, huzzah!
    7474
    7575== Upgrade Notice ==
    76 = 1.0.2 =
    77 **Problem**: Image thumbnails in Pages were not showing
    78 **Solution**: Added exception to not apply changes anywhere in the `wp-admin`
     76= 1.0.4 =
     77Fixed issue with SVG and webP images set to "0" for width and height
    7978
    8079= 1.0.2 =
    81 **Problem**: Image thumbnails in Media gallery were not showing
    82 **Solution**: Added exception to not apply changes on the Media page
     80Image thumbnails in Media gallery were not showing
    8381
    8482= 1.0.1 =
    85 **Problem**: Both width/height attributes weren't being inserted for some websites.
    86 **Solution**: Enabled output buffering (`ob_start`) and hook the `plugins_loaded` tag instead.
     83Both width/height attributes weren't being inserted for some websites.

  • specify-image-dimensions/trunk/specify-image-dimensions.php

    r1488517 r1542304  
    11<?php
    22/**
    3     Plugin Name: Specify Image Dimensions
    4     Plugin URI: https://wordpress.org/plugins/specify-image-dimensions/
    5     Description: Automatically specify image dimensions that are missing width and/or height attributes. Helps with website speed tools.
    6     Version: 1.0.3
    7     Author: <a href="https://www.factmaven.com/">Fact Maven</a>
    8     License: GPLv3
     3 * Plugin Name: Specify Image Dimensions
     4 * Plugin URI: https://wordpress.org/plugins/specify-image-dimensions/
     5 * Description: Automatically specify image dimensions that are missing width and/or height attributes. Helps with website speed tools.
     6 * Version: 1.0.4
     7 * Author: Fact Maven
     8 * Author URI: https://www.factmaven.com
     9 * License: GPLv3
    910*/
    1011
    11 if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly
     12# If accessed directly, exit
     13if ( ! defined( 'ABSPATH' ) ) exit;
    1214
    13 add_action( 'plugins_loaded', 'factmaven_spcimg_buffer', 10, 1 );
     15class Fact_Maven_SID {
    1416
    15 function factmaven_spcimg_buffer() { // Enable output buffering for our function
    16     ob_start( 'factmaven_spcimg_specify_image_dimensions' );
    17 }
    18 
    19 function factmaven_spcimg_specify_image_dimensions( $content ) { // Automatically insert width and height attributes
    20     if ( is_admin() && ( ! defined( 'DOING_AJAX' ) || ! DOING_AJAX ) ) { // Don't run the function in the admin panel
    21         return $content;
     17    public function __construct() {
     18        # Specify image dimensions
     19        add_action( 'wp_loaded', array( $this, 'image_dimensions' ), 10, 1 );
    2220    }
    2321
    24     preg_match_all( '/<img[^>]+>/i', $content, $images );
    25     if ( count( $images ) < 1 ) { // Don't change content if there are no images
    26         return $content;
     22    public function image_dimensions() {
     23        # Enable output buffering
     24        ob_start( function( $content ) {
     25            # If in the admin panel, return
     26            if ( is_admin() && ( ! defined( 'DOING_AJAX' ) || ! DOING_AJAX ) ) {
     27                return $content;
     28            }
     29
     30            preg_match_all( '/<img[^>]+>/i', $content, $images );
     31            # If there are no images, return
     32            if ( count( $images ) < 1 ) {
     33                return $content;
     34            }
     35
     36            foreach ( $images[0] as $image ) {
     37                preg_match_all( '/(src|alt|title|class|id|width|height)=("[^"]*")/i', $image, $img );
     38                # If image has a 'src', continue
     39                if ( ! in_array( 'src', $img[1] ) ) {
     40                    continue;
     41                }
     42                # If no 'width' or 'height' is available, calculate dimensions
     43                if ( ! in_array( 'width', $img[1] ) || ! in_array( 'height', $img[1] ) ) {
     44                    $src = $img[2][array_search( 'src', $img[1] )];
     45                    $alt = in_array( 'alt', $img[1] ) ? 'alt=' . $img[2][array_search( 'alt', $img[1] )] : '';
     46                    $title = in_array( 'title', $img[1] ) ? 'title=' . $img[2][array_search( 'title', $img[1] )] : '';
     47                    $class = in_array( 'class', $img[1] ) ? 'class=' . $img[2][array_search( 'class', $img[1] )] : '';
     48                    $id = in_array( 'id', $img[1] ) ? 'id=' . $img[2][array_search( 'id', $img[1] )] : '';
     49                    if ( preg_match( '/(.*).svg|.webp/i', $src ) ) {
     50                        $width = '100%';
     51                        $height = 'auto';
     52                    }
     53                    else {
     54                        list( $width, $height, $type, $attr ) = getimagesize( str_replace( "\"", "" , $src ) );
     55                    }
     56
     57                    $image_tag = sprintf( '<img src=%s %s %s %s %s width="%s" height="%s" />', $src, $alt, $title, $class, $id, $width, $height );
     58                    $content = str_replace( $image, $image_tag, $content );
     59                }
     60            }
     61            # Return all image with dimensions set
     62            return $content;
     63        } );
    2764    }
    28 
    29     foreach ( $images[0] as $image ) {
    30         preg_match_all( '/(src|alt|title|class|id|width|height)=("[^"]*")/i', $image, $img );
    31         if ( !in_array( 'src', $img[1] ) ) {
    32             continue;
    33         }
    34         if ( !in_array( 'width', $img[1] ) || !in_array( 'height', $img[1] ) ) {
    35             $src = $img[2][array_search( 'src', $img[1] )];
    36             $alt = in_array( 'alt', $img[1] ) ? ' alt=' . $img[2][array_search( 'alt', $img[1] )] : '';
    37             $title = in_array( 'title', $img[1] ) ? ' title=' . $img[2][array_search( 'title', $img[1] )] : '';
    38             $class = in_array( 'class', $img[1] ) ? ' class=' . $img[2][array_search( 'class', $img[1] )] : '';
    39             $id = in_array( 'id', $img[1] ) ? ' id=' . $img[2][array_search( 'id', $img[1] )] : '';
    40             list( $width, $height, $type, $attr ) = getimagesize( str_replace( "\"", "" , $src ) );
    41 
    42             $image_tag = sprintf( '<img src=%s%s%s%s%s width="%d" height="%d" />', $src, $alt, $title, $class, $id, $width, $height );
    43             $content = str_replace( $image, $image_tag, $content );
    44         }
    45     }
    46     return $content;
    4765}
     66# Instantiate the class
     67new Fact_Maven_SID();
Note: See TracChangeset for help on using the changeset viewer.