I was using the WordPress plugin Force Regenerate Thumbnails to change the dimensions of product images on an ecommerce website. After making the changes, I noticed that none of my images displayed. I checked the code using Chrome’s Inspector and discovered that the images had styling added to them:
element.style{
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
background-position: 300px 600px;
}
This was weird. I initially blamed the plugin for doing it. No. After some Googling, it was my browser’s extension AdBlock doing it. I thought AdBlock only blocked ads. So why was it blocking my images? Because the images shared common ad dimensions. In this case: 300 pixels in width.
The solution was to change the thumbnail dimensions. Instead of 300px, use 301px. After that, run Force Regenerate Thumbnails again and the problem was solved. AdBlock has blocked other unsuspected images too. I’m considering disabling it, but I really hate ads.