CODEWITHSUNDEEP
wordpress
Sakshale
Sakshale

Reputation: 5

Wordpress Images not resizing correctly

Recently, some of the images on one of my wordpress sites stopped being display correctly or consistently. For example, Bombardier Battery Range. Basically this text magically appears after an image.

 600w" sizes="(max-width: 300px) 100vw, 300px" />

When I google this error, I find tons of other websites with the same problem, making it hard to find a discussion of the issue.

I can cure this specific instance by resizing the first of the two pictures to make it below 600x300. However, going back and shrinking dozens of images doesn't seem to be a wise decision.

This started with some upgrade during the past two weeks. Unfortunately, from a troubleshooting perspective, I have the same plugins on other sites that haven't started to manifest this issue -- yet.

Upvotes: 0

Views: 583

Answers (1)

Kirk Beard
Kirk Beard

Reputation: 9843

If you view the full HTML source of your page, you will see the <img> tags are shown as:

<a href="http://vta-sprinter.org/wp-content/uploads/2015/11/Track-Pedestals-02.jpg"><img class="alignleft wp-image-590" 
src="http://vta-sprinter.org/wp-content/uploads/2015/11/Track-Pedestals-02-300x200.jpg" alt="Track-Pedestals-02" 
width="338" height="225" srcset="http://vta-sprinter.org/wp-content/uploads/2015/11/Track-Pedestals-02-300x200.jpg 
300w, http://vta-sprinter.org/wp-content/uploads/2015/11/Track-Pedestals-02.jpg 650w, 
http://vta-sprinter.org/wp-content/uploads/2015/11/<span id=" eeb-443657"=""><script 
type="text/javascript">(function(){var ml="pkfs-4ro3cPtAECge.Fda%jT0lxDnh2im",mi="E8>DENHM6@2E8KENNPDOI;7E8<G6D914:@C@3;DI34HN48HHJNHHE5HNJAF0?ENNENHENH9ID33E8KENNPDOI;74IOL1ENNE8=G6D914:@C@3;DI34HN48HHJNHHE5HNJAF0?E8>ENBDE8=",
o="";for(var j=0,l=mi.length;j<l;j++){o+=ml.charAt(mi.charCodeAt(j)-48);}document.getElementById("eeb-443657").innerHTML
 = decodeURIComponent(o);}());</script><noscript>*protected email*</noscript> 600w" sizes="(max-width: 338px) 100vw, 338px" /&gt;</a>

In the middle of that mess, you will see <span> and <script> tags that appear to be obfuscating all email addresses in the code.

You have two options to fix the issue:

  1. Disable the email encoding plugin that you're using (such as something like Email Address Encoder plugin); OR
  2. Install the Disable Responsive Images plugin (or something similar), which will disable the responsive images

Edit: It's possible the WP-Retina-2x plugin you're running on the site might be generating the @2x images, so it might help to disable that plugin also.

Additional Details

The email address encoding plugin is incorrectly assuming that any @ mentioned in the code is an email address. In this case however, it's a Retina image, which has the @2x suffix:

[email protected]
                  ^ -- The confused @ symbol

You would have only just started noticing this issue recently, as WordPress 4.4 introduced the new responsive images support.

Upvotes: 1

Related Questions