Featured images only showing in Firefox and Safari

  • Resolved Kondwani

    (@kondwani)


    13 years, 11 months ago

    I am displaying featured images on the homepage of my site
    https://kondwani.com/stamp/ (see images listed under ‘News’ & ‘Blog’).

    The featured images are displaying fine on the homepage in Firefox and Safari, but in Opera, Chrome and IE the featured images are not visible.

    I have set up the Featured Images by adding the following to the functions.php.

    // Add support for Featured Images
if (function_exists('add_theme_support')) {
add_theme_support('post-thumbnails');
add_image_size('blog', 590, 125, true);

    Thumbnails for blog category are 590px by 125px, the thumbnails for news category I’ve set in Media Settings > Thumbnail size (225px by 150px).

    Any ideas why they are not visible in Opera, Chrome and IE?

    Thanks for any feedback,
    Martin White

Viewing 7 replies - 1 through 7 (of 7 total)

  • Hi,
    That was an intriguing one, so I took a look. It was not obvious on first glance.

    Take a look at this code example:

    <a href="#"><img src="https://kondwani.com/stamp/wp-content/themes/stamp/images/slides_sinisha.jpg" alt="<h2>Sinisha</h2> <h3>Vogue Japan</h3>"/></a>

    The HTML definitely does not validate, and I wonder if a couple browsers forgive and re-interpret, and others do not. To me the smoking gun is most likely having those heading tags in the “alt” spot. The browser probably just throws up its hands. Further investigation needed to confirm, but that gives you a place to start.

    Thread Starter Kondwani

    (@kondwani)

    Hi Flamenco,
    I’ve stripped out the alt heading tags from the slideshow but unfortunately hasn’t made any difference to the featured images in Opera or Chrome.

    Thanks for the suggestion though. Any other feedback appreciated.
    Martin White

    I think I found it. ?? I just upgraded to FF 4, and that borked the photos, too.

    Quickie quiz, if you pass, you can fix the problem. Your task, find the difference between the 2 code blocks. ??

    <a href="https://kondwani.com/stamp/news/sinisha-gucci-glamour/" <img width="225" height="150" src="https://kondwani.com/stamp/wp-content/uploads/2011/02/news-large-sinisha-gucci-boat-225x150.jpg" class="alignleft post_thumbnail wp-post-image" alt="news-large-sinisha-gucci-boat" title="news-large-sinisha-gucci-boat" /></a>

    <a href="https://kondwani.com/stamp/news/sinisha-gucci-glamour/"> <img width="225" height="150" src="https://kondwani.com/stamp/wp-content/uploads/2011/02/news-large-sinisha-gucci-boat-225x150.jpg" class="alignleft post_thumbnail wp-post-image" alt="news-large-sinisha-gucci-boat" title="news-large-sinisha-gucci-boat" /></a>

    A “a” tag staying open and the pictures were still loading before ? MARVELS ! ??

    Thread Starter Kondwani

    (@kondwani)

    Thanks Flamenco!

    Glad to help. Yes, web browsers think they’re doing you a favor by “auto-completing” tags for you. And that’s sort of true.

    But it leads to a false sense of security, and it snags the newbie web developer who does no cross-browser testing. Where you see this a whole lot is in freebie WordPress themes or other HTML/CSS templates – it becomes clear very quickly that some whiz-kid had a nice design idea, but only stuck to his/her favorite browser when making it, so it’s totally trashed when you try another browser. Anecdotally, there seems to be less of this occurring these days than it used to, but I could be wrong.

    It was also interesting to see how it displayed in Firebug. That plugin does its own reinterpretation of funky tags, so in this case only reading the bare source led me to see the problem. And a bonus from looking at this problem was that I see that Chrome’s code analyzer has really come a very long way from where it was a few months ago!

    hi guys you seem to know what your talking about.

    am having a similar problem but my images in my sliding door theme are ok, its the header image and images in content which are not 100 percent visible.

    all images are visible in safari, header image visible in safari and IE but not firefox.
    image in content is only visible in safari?
    have changed image formats and deleted cache on browers

    thanks in advance

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Featured images only showing in Firefox and Safari’ is closed to new replies.