I'm currently using

jQuery(document).ready(function() {
    jQuery("img").each(function() {

        // Calculate aspect ratio and store it in HTML data- attribute
        var aspectRatio = jQuery(this).width()/jQuery(this).height();
        jQuery(this).data("aspect-ratio", aspectRatio);
               // Conditional statement

        if(aspectRatio > 1) {
            // Image is landscape

            jQuery( this ).addClass( "landscape" );

        } else if (aspectRatio < 1) {
            // Image is portrait
            jQuery( this ).addClass( "portrait" );;
        } else {
            // Image is square
            jQuery( this ).addClass( "square" );;            
        }
    });
});

but it's just returning landscape every time.

All I want to do is have a class for portrait images so I can use CSS to make them 50% width and side-by-side, whilst the landscape images are 100% width.

I'm currently using

jQuery(document).ready(function() {
    jQuery("img").each(function() {

        // Calculate aspect ratio and store it in HTML data- attribute
        var aspectRatio = jQuery(this).width()/jQuery(this).height();
        jQuery(this).data("aspect-ratio", aspectRatio);
               // Conditional statement

        if(aspectRatio > 1) {
            // Image is landscape

            jQuery( this ).addClass( "landscape" );

        } else if (aspectRatio < 1) {
            // Image is portrait
            jQuery( this ).addClass( "portrait" );;
        } else {
            // Image is square
            jQuery( this ).addClass( "square" );;            
        }
    });
});

but it's just returning landscape every time.

All I want to do is have a class for portrait images so I can use CSS to make them 50% width and side-by-side, whilst the landscape images are 100% width.

• javascript
• jquery
• css
• wordpress

• 3 You should console.log out the values of things like jQuery(this).width() and make sure they're what you expect. – ceejayoz Commented Jan 22, 2019 at 2:24
• 1 Could you provide your html? At first glance I don't see why it doesn't work. – NTR Commented Jan 22, 2019 at 2:24
• 1 Probaly cause the use of "this". Instead, use index,element on the each internal function, and then $(element).width() jQuery("img").each(function(index, element) {... var aspectRatio = $(element).width()/$(element).height(); – Merak Marey Commented Jan 22, 2019 at 2:26
• 1 @MerakMarey $(this) within an .each( ... ) refers to the current iteration element. – Tyler Roper Commented Jan 22, 2019 at 2:51
• 1 OP, please provide a minimal, plete, verifiable example. As it stands, your code works perfectly fine - here it is copy+pasted into JSFiddle. Consider ceejayoz's advice, and witheroux's answer - you may be trying to read the widths and heights of the images before they're loaded. – Tyler Roper Commented Jan 22, 2019 at 2:56

2 Answers 2

I can't ment because reputation is too low, but I think your error might e from the fact that you're doing your .each() on $(document).ready() instead of $(window).load()

$(document).ready() waits for DOM Manipulation to be safe but doesn't wait for all images and other content to be loaded.

$(window).load() waits for all content to be loaded before executing

They're most likely all ing out as landscape because they are short (only alt text height) but long (alt text width)

Here's a solution working based on my ment. Instead of $.ready I used $(window).load to wait for the images to plete load. Also, in the .each loop I used index and element to avoid the use of "this". the main reason to do it is because is non descriptive, so, in large segments of code or nested loops the use of this can carry undesired effects.

$(window).load(function() {
    jQuery("img").each(function(index, element) {

        // Calculate aspect ratio and store it in HTML data- attribute
        var aspectRatio = $(element).width()/$(element).height();
        $(element).data("aspect-ratio", aspectRatio);
               // Conditional statement

        if(aspectRatio > 1) {
            // Image is landscape

            $(element).addClass( "landscape" );

        } else if (aspectRatio < 1) {
            // Image is portrait
            $(element).addClass( "portrait" );;
        } else {
            // Image is square
            $(element).addClass( "square" );;            
        }
    })
});