Support » Fixing WordPress » how to display .jpg in proper orientation on various browsers

  • I recently took over a website hosted by Go Daddy using template 2014. I managed to teach myself most of the features i need except that any .jpg files taken with my android phone always display in the media library sideways or upside down. When i insert them in a page they display the same way on the edit screen but display correctly in view page. When viewing the site in chrome or safari they display correctly but in EI (Edge) or Firefox they are sideways or upside down. So far i’m baffled, any assistance would be appreciated

Viewing 10 replies - 1 through 10 (of 10 total)
  • Have you tried to rotate the image using the media library edit tool?
    Go in the Media Library, then click on the Image you want to rotate, then in the media detail window click on the Edit Image button on the top.

    Here you can crop and rotate your image and when you have done press Save to save changes.

    Hope it will help you

    Yes i tried that but it still displays in the wrong orientation turned another 90 degrees. I’m sure it’s something i’m not doing right.
    Thanks for the response

    Does the image display correctly in the media gallery?
    If yes, and if the issue is only when you see the image in the public page/post, it might be a CSS issue.

    Can you share here a link of your blog where you see the problem?

    When Pics taken from my Android phone are uploaded to media library they display incorrectly. inserting them into a page shows them in the incorrect orientation but when view page they display correctly.If i rotate the pics in library they will show on edit page correctly but view page will be rotated another 90 degrees. If after rotating them to correct orientation and view them in Internet explorer or Firefox they are incorrect. this only happens with pics taken from my phone

    I understand but I need to see it, can you share here a link of your blog where you see the problem?

    Here is one example of the problem: http://sgbfarmersmarkets.com/vendors/carters-maple-syrup/
    When viewed in Chrome or Safari it displays correctly but not in Firefox or Internet Explorer. It seems to only happen with pics taken from my Galaxy S5

    Try adding this CSS rule:

    
    img{
       image-orientation: from-image;
    }
    

    according to this answer http://stackoverflow.com/questions/24658365/img-tag-displays-wrong-orientation.

    I suppose it is a problem with how the Galaxy S5 saves the photo, but I don’t have it so I can’t test it.
    Using Firefox I can see the problem in your site and adding that CSS rule all images displays correctly.

    Thank you for your answer. I can see from the stackoverflow article that there looks like a browser problem. However i have no idea how or where to insert the CSS rule you gave me. I scrolled through the files but it’s all foreign to me

    The best is if your theme provide you a way to add custom CSS rule from the back-end, because if you edit the style.css directly you’ll lose that rule when you will update the theme.
    However it’s only one rule, so it isn’t a big problem, and I suggest to do this way at the moment.
    You can append that rule at the end of the style.css.

    I just tried your suggestion but it didn’t make any difference. I have decided to retake all the pics i have in the library using a digital camera instead. that seemed to work when i tried it in all browsers. It must be a combination of they way the smartphone handles the pictures and the way different browsers see them. Thank you for all your help.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘how to display .jpg in proper orientation on various browsers’ is closed to new replies.