1 2 Previous Next 17 Replies Latest reply: Oct 2, 2012 12:06 PM by thomas_r.
Alksyntrs Level 1 Level 1 (0 points)

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)
  • 1. Re: Safari don't display some images of my website
    ~Bee Level 7 Level 7 (30,775 points)

    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?

  • 2. Re: Safari don't display some images of my website
    Alksyntrs Level 1 Level 1 (0 points)

    Thank you for answering.

    Yes, I'm still on 10.5.8.

    But my wife's Mac is 10.7.4 and it's not working there too.

    Try there : http://aprilus.com/category/blog/ - with Safari 4 images are missing.

     

    Everything is fine with Firefox. The problem is that the people who might be interested by my services are mostly using Mac and Safari...

  • 3. Re: Safari don't display some images of my website
    ~Bee Level 7 Level 7 (30,775 points)

    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.

  • 4. Re: Safari don't display some images of my website
    Alksyntrs Level 1 Level 1 (0 points)

    1 -jpeg - 2,3Mo

    2 -png - 636Ko

    3 -jpeg - 1,5 Mo

    4 -png - 5,8 Mo

     

    Like this I can't see.

  • 5. Re: Safari don't display some images of my website
    Frank Caggiano Level 7 Level 7 (23,830 points)

    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.

  • 6. Re: Safari don't display some images of my website
    thomas_r. Level 7 Level 7 (27,960 points)

    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.)

  • 7. Re: Safari don't display some images of my website
    Alksyntrs Level 1 Level 1 (0 points)

    As soon as I have time I'll try to get off the accented (lots of work) characters and let you know.

     

    The vesion of WordPress I'm using is 3.4.2. It's the most recent version. thank you again both of you.

  • 8. Re: Safari don't display some images of my website
    Frank Caggiano Level 7 Level 7 (23,830 points)

    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.

  • 9. Re: Safari don't display some images of my website
    etresoft Level 7 Level 7 (24,270 points)

    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.

  • 10. Re: Safari don't display some images of my website
    etresoft Level 7 Level 7 (24,270 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.

  • 11. Re: Safari don't display some images of my website
    turingtest2 Level 8 Level 8 (46,590 points)

    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

  • 12. Re: Safari don't display some images of my website
    Alksyntrs Level 1 Level 1 (0 points)

    I took off the "Charest déchu", renamed it "Charest dechu", loaded it again on my Wordpress, and... it's now working! A lot of images to change now. Too bad I cant' write in french...

     

    Merci!

  • 13. Re: Safari don't display some images of my website
    ~Bee Level 7 Level 7 (30,775 points)

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

     

  • 14. Re: Safari don't display some images of my website
    Tuttle Level 7 Level 7 (29,035 points)

    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

1 2 Previous Next