CODEWITHSUNDEEP
phpjquerycsswordpress
J.Rob
J.Rob

Reputation: 436

Jquery wordpress post image add class by comparing image width

Problem:

On my WordPress site, I’ve applied some negative margin CSS to target img elements inside posts. My CSS works perfectly for all images with 655px+ width (fullwidth of .entry-content container).

Images with a width less than 655px, however, are unfortunately pulled toward the left of the .entry-content container, so they can’t center align.

To override this, I’ll need a jQuery script that will insert a custom class to all '.entry-content p img' elements below 655px wide.

Attached screenshot to help explain: please find attachment

Here's the post where you can see this problem: https://vegbyte.com/best-apples-for-juicing

So the jQuery logic is basically: "If image is less than 655px wide, insert this class: entry-img-small"

Tried

I have idea how to use jquery in wordpress. I am blank with jquery, thinking with such below code but no idea what to do.

 $(window).load(function () {
   var image = $('.each img');
   if (image.width() < 500) {
      $('.oldclass').addClass('newclass');
  }
 });

Please check screenshot

Upvotes: 0

Views: 56

Answers (1)

Shibi
Shibi

Reputation: 1383

Not sure if its a good idea but here you go better limit this for the content area too. .content img

jQuery(window).on('load', function() {
    jQuery('img').each(function() {
        if(jQuery(this).width() < 655) {
            jQuery(this).addClass('entry-img-small');
        }
    });
});

In jQuery I think better if you use it on document ready before the images load and check for the width attribute.

jQuery(document).ready(function($) {
    $('img').each(function() {
        if($(this).attr('width') < 655) {
            $(this).addClass('entry-img-small');
        }
    });
});

Upvotes: 0

Related Questions