[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 631
  • Last Modified:

How to prevent Image rotation Html5

Portrait pictures get rotated?

http://www.housecarers.com/photo_view2.cfm?mem=2145674015&slide=6

Please how do I Prevent this? - display without rotation. I just want the picture to display as is.

When I look at the original it is OK see below - it is portrait - see here:
http://housecarers.com/pics/2145674015_6.jpg?ref=%227842%22

<IMG ID="DataField40" SRC="/pics/2145674015_6.jpg?ref=4096"  
ALT="House Sitters Pictures from YouthfulRetiree">

Open in new window




Thanks
Ian
0
Ian White
Asked:
Ian White
  • 5
  • 3
1 Solution
 
Kyle HamiltonData ScientistCommented:
it has to do with the meta data in the image which was put there by the camera it was taken with. If you only have a few images the easiest way to 'fix' it is to open the images in phoshop and resave.

if these are client images and you have no control over them, you can manipulate the rotation server side.

as far as i remember there is no way to have html5 ignore the rotation, but u could be wrong.
0
 
Kyle HamiltonData ScientistCommented:
oops, i meant, "i could be wrong"
0
 
COBOLdinosaurCommented:
You might be able to fix it with a CSS transform. Try changing the CSS for the images to include:

-webkit-transform:rotate(90deg); 
transform:rotate(90deg);

Open in new window


If it does not work when applied directly to the images, you can try rotating the container for the images instead.

Cd&
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Ian WhiteAuthor Commented:
They are client posted images dynamically loaded.  So the logic would apply to thousands of pictures, loaded by clients  for the same page .

I am not sure why the meta data of the image would cause it to flip unnaturally? so the picture cant be seen as taken?

I thought maybe it was the css for the page?  Maybe it couldnt fit so it rotated? Not an expert on CSS
0
 
Ian WhiteAuthor Commented:
It does not happen for most images posted by clients  - just some
0
 
Ian WhiteAuthor Commented:
So this is an example of the same page where the image is ok - for another client

http://www.housecarers.com/photo_view2.cfm?mem=2145661960&slide=4
0
 
Kyle HamiltonData ScientistCommented:
you will need a server solution. the reason only some images appear flipped is becuase the cameras are different. this is meta data set by the camera - nothing to do with CSS.

i could give you a php solution, but it looks like you are using cold fusion, so that would probably be no use to you.

while you can do rotation client side, you would need to wait until the image is loaded to get the exif_data to determine whether to rotate or not. imo, lots of unnecessary work that's better left to the server
0
 
Ian WhiteAuthor Commented:
I dont seem to be able to add coldfusion as topic  Should I close this and reopen in coldfusion?
0
 
Ian WhiteAuthor Commented:
Thanks for your help. I will repost as a cold fusion problem
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now