Responsive images

Could you give more detail on *how* they’re breaking?

Well the image path is fine, if I inspect the element with firebug and hover over the image path the image pops up. But in my browser (firefox) the images don’t display. If I again go in to the image element with firebug there is a long string in <img srcset = “…”> on the image, and if i delete that string temporarily in firebug the image pops in to view in the browser.

So it’s not displaying as, say the “BOS” image on the right side of the forum thread here or the avatsr for our posts, but you are able to see the images when you use your dev tools to check on the url?

Trying to determine if it is actually from us or from the theme itself. Because I am able to see an achievement image just fine on my dev install, though perhaps a little smaller. Tested this on all of the Twenty* themes.

Yes it is strange, the image path is fine but in both the backend edit badge featured image and in the front end where in one of my templates I call:

echo do_shortcode ('[badgeos_achievements_list type="maths-badges" limit=5]'

The image is replaced by a link that reads the name of the badge. The src for the image is correct. But in the srcset value of the image element is this code:

https://www.mydomain.co.uk/wordpress/wp-content/uploads/2015/01/rookie-maths-150x150.png 150w, https://www.mydomain.co.uk/wordpress/wp-content/uploads/2015/01/rookie-maths-100x100.png 100w, https://www.mydomain.co.uk/wordpress/wp-content/uploads/2015/01/rookie-maths.png 280w

If I delete this code ‘on the fly’ the image becomes visible. It may well be an issue to do with my particular setup, I just wanted to mention it incase it is a wider issue. It does seem strange if it is a theme issue that the images in the backend are just rendering as a text link as well.

Best,

Jim

After a bit more experimenting – the images are actually rendering fine in Edge but not in Firefox or Chrome on my site.

Is there a publicly accessible link to one of your examples at all? Visuals can often help with this type of issue.

Hi, if you go to:

https://www.theopenschool.co.uk/courses/11-plus-maths/

you will see a very messy page – because a different header is loaded for logged in users so the template is all over the place if youre not logged in! But under the sidebar heading ‘course awards’ you will see the badgeos badges load. In my firefox browser they just show as text links not the images… I’m beginning to think it might be an ssl issue..

Edit: It shouldn’t be such a mess anymore – promted me to change the layout a bit so it looks ok for non logged in users!

Still not managing to recreate locally, but I am seeing it on your site for sure.

Curious if the mix of http vs https is playing a factor in it.

Images should be using WP core functionality to fetch the featured image and everything.

Yes maybe it’s something to do with the srcset values being http while the src is https. When I moved my site to https a month ago I had to install a plugin called really simple SSL for the sole purpose of getting the badge images to be generated in https. This plugin isn’t causing the problem btw, if i switch it off the problem remains, but without that plugin there was something on my pages creating an insecure connection and i’m pretty sure it was the badgeos images – not the actual image, but the values in the srcset that dont seem to want to come in https.

For what it’s worth, I’ve checked and all the BadgeOS functions that help with image display don’t specifically set anything to just http. We stick with the WP core functions which should be determining the protocol. Curious if something was missed with the srcset for this topic.

Also possible: filters and whatnot used in the plugin you mention aren’t taking it into account and returning the http version only. So many possibilities.

Ok cool, thanks for taking a look, yes lots of possibilities and probably not a badgeos issue, i’ll investigate it further!