Skip navigation

Safari don't display some images of my website

5364 Views 17 Replies Latest reply: Oct 2, 2012 12:06 PM by thomas_r. RSS
1 2 Previous Next
Alksyntrs Calculating status...
Currently Being Moderated
Oct 1, 2012 5:53 AM

Hi, I would like to understand why my website (www.aprilus.com) does not display all the images on Safari when it works well with Firefox. Instead, I see a blue rectangle with a question mark. I observe the same problem with Safari regarding my site on other computers.

 

Thank you for your help.

Safari, Mac OS X (10.5.8)
  • ~Bee Level 7 Level 7 (30,580 points)
    Currently Being Moderated
    Oct 1, 2012 8:17 AM (in response to Alksyntrs)

    I'm looking at the site you posted, and I see incredible illustrations!  No blue boxes anywhere.

     

    Are you running 10.5.8 still?

    What version of Safari are you using?

  • ~Bee Level 7 Level 7 (30,580 points)
    Currently Being Moderated
    Oct 1, 2012 10:14 AM (in response to Alksyntrs)

    Thanks for that.  You're right.  Blue boxes on those four.

    What do those four have in common?  There's got to be a reason.

  • Frank Caggiano Level 7 Level 7 (22,760 points)
    Currently Being Moderated
    Oct 1, 2012 12:40 PM (in response to Alksyntrs)

    It appears that the images that aren't displaying in Safari have diacritics in the filenames while the images that do display don't.

     

    No idea why Safari is having problems while Chrome is not.

  • thomas_r. Level 7 Level 7 (26,935 points)
    Currently Being Moderated
    Oct 1, 2012 12:47 PM (in response to Alksyntrs)

    It looks like the problem is that the missing images have accented characters in the URLs. Only ASCII characters are allowed in URLs, and that does not include accented characters.

     

    It looks like you're using WordPress to host your blog, and I'm guessing that WordPress is not properly encoding those characters for a URL, in such a way that Safari is tripping over it and Firefox is not. What version of WordPress are you using? If it's not the most recent version, try updating. (You should update anyway, as outdated WordPress blogs are popular targets for attacks.)

  • Frank Caggiano Level 7 Level 7 (22,760 points)
    Currently Being Moderated
    Oct 1, 2012 1:13 PM (in response to thomas_r.)

    Only ASCII characters are allowed in URLs,

    Is that really true in this day and age? I tried searchig for a definitive answer but came uop short. I know I've been to sites with diacritics in the URL before.

  • etresoft Level 7 Level 7 (23,890 points)
    Currently Being Moderated
    Oct 1, 2012 1:16 PM (in response to Alksyntrs)

    How very odd. You have stumbled up on a very peculiar little detail about Unicode. The odd part is that you are the second person in as many days to do that. Are you hosting this on a Mac?

     

    What is going on is that you are using accented characters in your URLs and file names. There isn't anything wrong with that as long as you handle it properly. There are two ways to represent any accented character. The e with accent aigu, for example, can be represented as just the é character or as e´ with a combining mark in-between. If I use é to search for "Charest déchu", I will find it. But if I just search for "Charest dechu", I won't. Using the combining character (the decomposed form), allows either spelling to work. On a Mac, all files are stored using the decomposed form. On Linux, they seem to be stored differently.

     

    On your server, the uploads directory lists all of your files (which is a bad idea by the way - you should turn off directory listings) and you can see how they are encoded. The problem is that there seems to be a mix of precomposed and decompsed Unicode.

     

    For example,

    the file t%c3%aate-fourmi.png is precomposed Unicode while

    the file Charest-de%cc%81chu-polaroid.jpg is decomposed Unicode.

     

    %c3%aa is UTF-8 for just the ê character

    %cc%81 is UTF-8 for just the ´ combining character that modified the preceeding e.

     

    You can use either one, but your URL must match how the file is actually encoded in the file system. I suggest not using any accents in file names so that your files are easily portable and easily referenced.

  • etresoft Level 7 Level 7 (23,890 points)

    Frank Caggiano wrote:

     

     

    Only ASCII characters are allowed in URLs,

     

    Is that really true in this day and age? I tried searchig for a definitive answer but came uop short. I know I've been to sites with diacritics in the URL before.

    Yes. You can include any character as long as it is escaped with a % character. I believe the use of Unicode is still restricted in actual domain names because of the potential for abuse. Someone could construct Unicode that looks really close to "apple.com", but isn't.

  • turingtest2 Level 8 Level 8 (43,880 points)
    Currently Being Moderated
    Oct 1, 2012 1:28 PM (in response to Alksyntrs)

    I don't think Safari likes the way you've encoded the accented characters in the image URLs

     

    I've managed to find two alternate representations of the URL produced by copying and pasting links from source in different browsers.

     

    http://aprilus.com/website/wp-content/uploads/ME%CC%81ME%CC%81-AIGRIE-APRILUS-64 0x498.jpg

    http://aprilus.com/website/wp-content/uploads/MÉMÉ-AIGRIE-APRILUS-640x498.jpg

     

    Both seem to work in Chrome (& presumably Firefox) but Safari only likes the first one, or at least as part of the code of the <img> tag it appears to fail.

     

    I can't work out where the block E%CC%81 comes from but while it appears (sometimes) to produce É I suspect it should really be %C9.

     

    There are also errors on the page which are revealed by this service: http://validator.w3.org/

     

    tt2

     

    Looks like etresoft has a more complete explanation of how & why...

     

    Message was edited by: turingtest2

  • ~Bee Level 7 Level 7 (30,580 points)
    Currently Being Moderated
    Oct 1, 2012 2:00 PM (in response to turingtest2)

    Thank you guys for helping out our OP.  I knew you all would know . . .

  • Tuttle Level 7 Level 7 (28,960 points)
    Currently Being Moderated
    Oct 1, 2012 4:45 PM (in response to Alksyntrs)

    You can add some code to your theme's functions.php file that will sanitize any special characters in your image files:

     

     

    function sanitize_filename_on_upload($filename) {
    $ext = end(explode('.',$filename));
    // Replace all weird characters
    $sanitized = preg_replace('/[^a-zA-Z0-9-_.]/','', substr($filename, 0, -(strlen($ext)+1)));
    // Replace dots inside filename
    $sanitized = str_replace('.','-', $sanitized);
    return strtolower($sanitized.'.'.$ext);
    }

    add_filter('sanitize_file_name', 'sanitize_filename_on_upload', 10);

     

     

    See: http://wordpress.org/support/topic/uploaded-image-with-accents-in-name-image-don t-show-in-safari-6?replies=5

    OS X (10.8.x)
1 2 Previous Next

Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Legend

  • This solved my question - 10 points
  • This helped me - 5 points
This site contains user submitted content, comments and opinions and is for informational purposes only. Apple disclaims any and all liability for the acts, omissions and conduct of any third parties in connection with or related to your use of the site. All postings and use of the content on this site are subject to the Apple Support Communities Terms of Use.