- This topic is empty.
-
AuthorPosts
-
June 22, 2016 at 11:10 am #243063
kirsch1391
Participantpage 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%;
}June 23, 2016 at 2:05 am #243066Atelierbram
ParticipantThe 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
– andsizes
-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.June 23, 2016 at 9:39 am #243097kirsch1391
ParticipantAll of the images were working up until this week though.
June 23, 2016 at 10:06 am #243098Atelierbram
ParticipantSo what was the last thing that changed, could be a template or
functions.php
, if not a WordPress update?June 23, 2016 at 10:09 am #243099kirsch1391
ParticipantThat’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.
June 23, 2016 at 10:38 am #243101Atelierbram
ParticipantCould 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.
June 23, 2016 at 10:51 am #243102kirsch1391
ParticipantSo 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.
June 23, 2016 at 10:59 am #243103Atelierbram
ParticipantSo 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
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.