Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Issue with images on a website

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #243063
    kirsch1391
    Participant

    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%;
    }

    #243066
    Atelierbram
    Participant

    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.

    #243097
    kirsch1391
    Participant

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

    #243098
    Atelierbram
    Participant

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

    #243099
    kirsch1391
    Participant

    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.

    #243101
    Atelierbram
    Participant

    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.

    #243102
    kirsch1391
    Participant

    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.

    #243103
    Atelierbram
    Participant

    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
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.