lowethca

My apologies,

The line number – I’ve no idea why I said 78. I actually only added code:

Here’s the comparisons, as requested:

ORIGINAL

<?php
/**
 * Plugin Name: Specify Image Dimensions
 * Plugin URI: https://www.ads-software.com/plugins/specify-image-dimensions/
 * Description: Automatically specify image dimensions that are missing width and/or height attributes. Helps with website speed tools.
 * Version: 1.1.0
 * Author: Fact Maven
 * Author URI: https://www.factmaven.com
 * License: GPLv3
*/

# If accessed directly, exit
if ( ! defined( 'ABSPATH' ) ) exit;

class Fact_Maven_Specify_Image_Dimensions {

    public function __construct() {
        # Specify image dimensions
        add_action( 'wp_loaded', array( $this, 'image_dimensions' ), 10, 1 );
    }

    public function image_dimensions() {
        # Enable output buffering
        ob_start( function( $content ) {
            # If in the admin panel, return
            if ( is_admin() && ( ! defined( 'DOING_AJAX' ) || ! DOING_AJAX ) ) {
                return $content;
            }
            # Find all image tags
            preg_match_all( '/<img[^>]+>/i', $content, $images );
            # If there are no images, return
            if ( count( $images ) < 1 ) {
                return $content;
            }

            foreach ( $images[0] as $image ) {
                # Match all image attributes
                $attributes = 'src|srcset|longdesc|alt|class|id|usemap|align|border|hspace|vspace|crossorigin|ismap|sizes|width|height';
                preg_match_all( '/(' . $attributes . ')=("[^"]*")/i', $image, $img );
                # If image has a 'src', continue
                if ( ! in_array( 'src', $img[1] ) ) {
                    continue;
                }
                # If no 'width' or 'height' is available or blank, calculate dimensions
                if ( ! in_array( 'width', $img[1] ) || ! in_array( 'height', $img[1] ) || ( in_array( 'width', $img[1] ) && in_array( '""', $img[2] ) ) || ( in_array( 'height', $img[1] ) && in_array( '""', $img[2] ) ) ) {
                    # Split up string of attributes into variables
                    $attributes = explode( '|', $attributes );
                    foreach ( $attributes as $variable ) {
                        ${$variable} = in_array( $variable, $img[1] ) ? ' ' . $variable . '=' . $img[2][array_search( $variable, $img[1] )] : '';
                    }
                    $src = $img[2][array_search( 'src', $img[1] )];
                    # If image is an SVG/WebP with no dimensions, set specific dimensions
                    if ( preg_match( '/(.*).svg|.webp/i', $src ) ) {
                        if ( ! in_array( 'width', $img[1] ) || ! in_array( 'height', $img[1] ) || ( in_array( 'width', $img[1] ) && in_array( '""', $img[2] ) ) || ( in_array( 'height', $img[1] ) && in_array( '""', $img[2] ) ) ) {
                            $width = '100%';
                            $height = 'auto';
                        }
                    }
                    # Else, get accurate width and height attributes
                    else {
                        list( $width, $height ) = getimagesize( str_replace( "\"", "" , $src ) );
                    }
                    # Recreate the image tag with dimensions set
		$tag = sprintf( '<img src=%s%s%s%s%s%s%s%s%s%s%s%s%s%s width="%s" height="%s">', $src, $srcset, $longdesc, $alt, $class, $id, $usemap, $align, $border, $hspace, $vspace, $crossorigin, $ismap, $sizes, $width, $height );
	   
                    $content = str_replace( $image, $tag, $content );
                }
            }
            # Return all image with dimensions
            return $content;
        } );
    }
}
# Instantiate the class
new Fact_Maven_Specify_Image_Dimensions();

UPDATED

<?php
/**
 * Plugin Name: Specify Image Dimensions
 * Plugin URI: https://www.ads-software.com/plugins/specify-image-dimensions/
 * Description: Automatically specify image dimensions that are missing width and/or height attributes. Helps with website speed tools.
 * Version: 1.1.0
 * Author: Fact Maven
 * Author URI: https://www.factmaven.com
 * License: GPLv3
*/

# If accessed directly, exit
if ( ! defined( 'ABSPATH' ) ) exit;

class Fact_Maven_Specify_Image_Dimensions {

    public function __construct() {
        # Specify image dimensions
        add_action( 'wp_loaded', array( $this, 'image_dimensions' ), 10, 1 );
    }

    public function image_dimensions() {
        # Enable output buffering
        ob_start( function( $content ) {
            # If in the admin panel, return
            if ( is_admin() && ( ! defined( 'DOING_AJAX' ) || ! DOING_AJAX ) ) {
                return $content;
            }
            # Find all image tags
            preg_match_all( '/<img[^>]+>/i', $content, $images );
            # If there are no images, return
            if ( count( $images ) < 1 ) {
                return $content;
            }	

            foreach ( $images[0] as $image ) {
                # Match all image attributes
                $attributes = 'src|srcset|longdesc|alt|class|id|usemap|align|border|hspace|vspace|crossorigin|ismap|sizes|width|height';
                preg_match_all( '/(' . $attributes . ')=("[^"]*")/i', $image, $img );
                # If image has a 'src', continue
                if ( ! in_array( 'src', $img[1] ) ) {
                    continue;
                }
                # If no 'width' or 'height' is available or blank, calculate dimensions
                if ( ! in_array( 'width', $img[1] ) || ! in_array( 'height', $img[1] ) || ( in_array( 'width', $img[1] ) && in_array( '""', $img[2] ) ) || ( in_array( 'height', $img[1] ) && in_array( '""', $img[2] ) ) ) {
                    # Split up string of attributes into variables
                    $attributes = explode( '|', $attributes );
                    foreach ( $attributes as $variable ) {
                        ${$variable} = in_array( $variable, $img[1] ) ? ' ' . $variable . '=' . $img[2][array_search( $variable, $img[1] )] : '';
                    }
                    $src = $img[2][array_search( 'src', $img[1] )];
                    # If image is an SVG/WebP with no dimensions, set specific dimensions
                    if ( preg_match( '/(.*).svg|.webp/i', $src ) ) {
                        if ( ! in_array( 'width', $img[1] ) || ! in_array( 'height', $img[1] ) || ( in_array( 'width', $img[1] ) && in_array( '""', $img[2] ) ) || ( in_array( 'height', $img[1] ) && in_array( '""', $img[2] ) ) ) {
                            $width = '100%';
                            $height = 'auto';
                        }
                    }
                    # Else, get accurate width and height attributes
                    else {
                        list( $width, $height ) = getimagesize( str_replace( "\"", "" , $src ) );
                    }
                    # Recreate the image tag with dimensions set
		    $tmp_id = '';
		    if (preg_match('/"([^"]+)"/', $id, $m)) {$tmp_id = $m[1];}
		    if ( $tmp_id == 'logo' ) {
                    	$tag = sprintf( '<img src=%s%s%s%s%s%s%s%s%s%s%s%s%s%s>', $src, $srcset, $longdesc, $alt, $class, $id, $usemap, $align, $border, $hspace, $vspace, $crossorigin, $ismap, $sizes );
                    } else {
                    	$tag = sprintf( '<img src=%s%s%s%s%s%s%s%s%s%s%s%s%s%s width="%s" height="%s">', $src, $srcset, $longdesc, $alt, $class, $id, $usemap, $align, $border, $hspace, $vspace, $crossorigin, $ismap, $sizes, $width, $height );
		    }
                    $content = str_replace( $image, $tag, $content );
                }
            }
            # Return all image with dimensions
            return $content;
        } );
    }
}
# Instantiate the class
new Fact_Maven_Specify_Image_Dimensions();

My changes are under # Recreate the image tag with dimensions set.

I only made this change to target my “logo” ID, but a modification could be made to use an array (given a comma separated list defined in the admin interface, for example) and a simple “in_array” to identify the correct output.

+1. I, too, would like to have the ability to either be able to have the complexity requirements displayed and/or have the ability to configure the complexity requirements in the backend…

Ahhhhhh! it was already set to top but I changed it to “Bottom” -> Saved -> Changed it back to “Top” -> Saved -> Deleted my cookies and caches -> Reloaded and now it works!

Tip for the future/FAQs.

Thank you!

https://www.chris-loweth.co.uk

I upgraded to 1.8.2 and, still, the content is not pushed down. I have cleared browser caches etc. I have also tried on other computers where my site has never been accessed… Is there supposed to be an option that needs to be set in the settings panel?

Thank you!

Hi anoriell,

It should work in all browsers… I’ve tested it in as many as I could find that people widely use (IE11, FF, Chrome, Safari and Opera) and it works as expected…

Have you tried clearing your browser caches to see if something has gone awry with the existing plugin code?

The plugin displays the names you have used for the fields created in CF7.

I.e. if you have created a CF7 text field and not changed its name then you will see the same textbox name (a random number by default) in the CFDB column.

You need to change the name of the textbox in CF7 before it will reflect in CFDB.

Be careful, however, when you change the name of a field it doesn’t get “renamed” from CFDB. CFDB will create a new column. This has been my experience anyway!

It looks like you have nested columns which is one of the starter problems you’re experiencing…

From the URL you have given you don’t need to nest your footer columns…

Clean up your structure and things should start to work…

An old post but an answer nonetheless:

All column shortcodes does (from what I have experienced over the many months of using it!) is create divs with fluid widths (using percent) and if you stipulate additional padding it creates a child div with inline padding to the values you set.

The plugin does nothing to other styles – unless your CSS has child selectors… but you would need to investigate.

* the last [one_half][/one_half] should have been [one_half_last][/one_half_last]

You should create a div inside one of the column shortcodes and style that. Don’t style the shortcode divs because any additional padding (or even borders!) mess with the width of the columns and will cause “pushing” of the div to the block below -> you will then be back here saying your divs don’t stay on the same line as they should!

Example:

[one_half]
<div style="border-right: 1px solid #000;"><p>Text here with black border to the right.</p></div>
[/one_half][one_half]
<p>Text here with no border</p>
[/one_half]

Obviously you need to work out which div needs the border… what you’re trying to do may involve a bit more coding with CSS media queries so that your border gets removed when a mobile browser is used and your divs “stack”… the example above will display a black border to the right even when the columns have gone “full width”.

LluisAzm2:

Your structure seems fine… do you have a link to view the problem?

Have you added any additional margin or padding to the left or right (using the column shortcodes panel in WP)? Be careful using left or right padding or margin as these interrupt the resultant width of the columns and cause “pushing” of the div that doesn’t fit to the space below…

Tobias:

I would like to suggest a fix for columns that have been given padding but the padding doesn’t get removed when the columns “stack” through the media query (I.e. when someone uses a mobile browser):

.full_width > div[style],
	.one_half > div[style],
	.one_third > div[style],
	.two_third > div[style],
	.one_fourth > div[style],
	.three_fourth > div[style],
	.one_fifth > div[style],
	.two_fifth > div[style],
	.three_fifth > div[style],
	.four_fifth > div[style],
	.one_sixth > div[style] {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

You’ve already put the changes in your response to corbeja in the release version of column shortcodes so this would be a small addition.

Due to the way you’ve had to code column shortcodes (to allow people to enter any value of padding) it gets added “inline”. This is difficult to remedy but (depending on browser) the above fix should help columns become 100% the width of the container when the media query is run…

column shortcodes works fine in mobile -> they use media queries to become “responsive”

Old post but the answer is due to WordPress’s “autop” filter.

In your functions.php file add:

remove_filter('the_content', 'wpautop');