Issue with images on a website

[kirsch1391]

page is http://www.ottersoccer.com/sponsors/

Some of the widgets have fine resizing of the images, others it seems like the image continues outside the box.

Was originally using this coding to get the images to work and they have been for awhile.

.sponsorslogotitle img{
object-fit: contain;
width: 250px;
height: auto;
}

.wpcm-sponsor-widget img{
width: 250px;
height: auto;
position: relative;
left: -125px;
margin-left: 50%;
}

[Atelierbram]

The problem isn’t coming necessarily from the CSS, but from the inconsistencies in the HTML-markup. That is to say, some images (also known as “responsive images”) have values for srcset– and sizes-attributes, others have not; making them behave differently on different brower-window-widths.

Probably since WordPress implemented reponsive images in core last year on images which are uploaded with the admin image uploader, and/or with are “featured”.

Responsive images is a background feature, meaning everything happens automatically whenever a user uploads an image in WordPress through the media uploader. When an image appears on a page, it will have `srcset` and `sizes` attributes as a result of that background process.

First thing I try solving this issue would be either not to use the image-uploader for these images thumbnails in this image gallery, because these small images don’t need the different sizes responsive images anyway. Instead, just find the correct absolute paths, and then hard-code the images in.

Or use the image-uploader on all the images (or use the wp-get-attachment-image function): at least then one can expect a consistent output.

[kirsch1391]

All of the images were working up until this week though.

[Atelierbram]

So what was the last thing that changed, could be a template or functions.php, if not a WordPress update?

[kirsch1391]

That’s where I am confused. I haven’t done any recent updates or changed anything. I just went to add another sponsor image and when I went to the page after publishing it the image was not changing to fit the box. I tried changing the “object-fit: contain” to “fill” and a few other options and it didn’t change anything.

[Atelierbram]

Could also be a nesting error in the HTML. Whatever the reason is, right now what I would do is start over marking this gallery up, would be faster then trying to debug this. Am also not convinced the mark-up of those (Bootstrap?)grids is overall correct like it is now, some clearfixes in strange places ….

Also this:

.wpcm-sponsor-widget img {
  width: 250px;
  height: auto;
  position: relative;
  left: -125px;
  margin-left: 50%;
  object-fit: scale-down;
}

Seems heavy handed to me.

[kirsch1391]

So when inspecting the page if I go to one of the messed up images, and delete this phrase from it, the image looks fine.

srcset=”http://i2.wp.com/www.ottersoccer.com/wp-content/uploads/2016/01/SignFactory-e1453924046332.jpg?zoom=2&resize=720%2C380 1440w, http://i2.wp.com/www.ottersoccer.com/wp-content/uploads/2016/01/SignFactory-e1453924046332.jpg?zoom=3&resize=720%2C380 2160w”

I can’t find where/how to remove this outside of the inspect element feature or where to edit it in the php files.

[Atelierbram]

So there it is, the responsive images markup that is automatically inserted with the newest WordPress.

I can’t find where/how to remove this outside of the inspect element feature or where to edit it in the php files.

What you could do is:

• copy the absolute path to those images (view source)
• remove those affected images from the page (or post) in WordPress admin
• hardcode them back in; don’t use the image-uploader in the admin

[Author]

Posts