Jump to content

Rotation conflicts among Web browsers

spruce18b

By spruce18b
in PHP Coding Help

 Share

Recommended Posts

spruce18b Newbie

spruce18b

Posted
Posted

I have several images created with a Kodak electronic camera and my iPhone. All images are displayed with the correct orientation (portrait or landscape) in  the HTML code. The HTML code is wrapped inside a brief PHP code to enable password entry, and the PHP code is uploaded to my Web site along with the images.

I have examined the images on my Web site using Web browsers in Windows 10 and Apple MacBook Air. The orientation is incorrect for at least one of the images in each browser -- Internet Explorer, Firefox, Chrome and Safari. Although a majority of the images are oriented correctly, incorrect rotation occurs for some of the phone and Kodak images.

I shall provide more information to anyone who can  provide me with help and suggestions, which will be much appreciated.

Thank you

spruce18b

 

Link to comment
https://forums.phpfreaks.com/topic/311032-rotation-conflicts-among-web-browsers/
Share on other sites
requinix Prolific Member

requinix

Posted
Posted

Unless you are somehow processing those images, PHP isn't doing anything. In fact if you're linking to the images directly then PHP really isn't doing anything. The fact that the images are displayed using HTML that was outputted through PHP is completely irrelevant.

The orientation is controlled by EXIF data. It acts as a suggestion to things displaying the image, informing them of how the image is intended to be displayed. When you see the image oriented incorrectly, that's the actual image.

So my advice is to not use EXIF data. Before you upload those images, load them into some image editor and have it fix the orientation for you. Most editors are capable of this - some even prompt you about it when you first open the image.

  • 4 weeks later...
spruce18b Newbie

spruce18b

Posted
  • Author
Posted

The images are rotated with IrfanView for Windows, Version 4.53. I save them with "Keep  original EXIF data (if JPD to JPG)" unchecked.

I upload the images with Ipswitch WS_FTP Professional. The thumbnail view of the images show their correct orientation on both the local hard drive on my Windows 10 laptop  and their destinationon my Web site.

I appreciate your comment that PHP delivers exactly what it is given to deliver. However, that doesn't explain why some of the images are incorrectly rotated on some of the browsers (Internet Explorer, Firefox, Safari and Chrome).

Is there no code that can be inserted into the PHP code to force the correct rotation? I am a novice PHPer, so I don't know what to  do. I encountered a problem uploading the PHP code for your advice, but here is a chunk from it.

Thanks for your help

<?php
##########################################################################
$password = "hello";  // Modify Password to suit for access, Max 10 Char.
##########################################################################
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Israel and Jordan 2019</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
P { FONT-SIZE: 8pt; COLOR: #000000; FONT-FAMILY: Verdana, Tahoma, Arial}
TD { FONT-SIZE: 8pt; COLOR: #000000; FONT-FAMILY: Verdana, Tahoma, Arial}
-->
</style>
</head>
<body>
<?php
  print "<h2 align=\"center\">Israel and Jordan 2019</h2>";
// If password is valid let the user get access
if (isset($_POST["password"]) && ($_POST["password"]=="$password")) {
?>
<!-- START OF HIDDEN HTML - PLACE YOUR CONTENT HERE -->
<html>
<head>
<title>Israel and Jordan 2019</title>  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--                     
.style4 {                
     font-size: 36px;        
     color: #0033FF;         
}                            
-->                          
</style>                     
<style type="text/css">
<!--                     
.style2 {                
     font-size: 20px;        
     color: #0033FF;         
}                            
-->                          
</style>                     
</head>                      
<body>
<p class="style4">Israel and Jordan 2019</p>
<p class="style2"></p>
<table width="600" border="0"cellpadding="0" cellspacing="0">


   <tr><td>
<img src=DSC05859.JPG  width="450 " height="600 "></td></tr><tr>
<td width="450 " style="color:blue">Jaffa, November 16, 2019  <br/><br/></td><td width="450 "allign="right"> 1 <br/><br/></td></tr>

   <tr><td>
<img src=DSC05865.JPG  width="600 " height="450 "></td></tr><tr>
<td width="450 " style="color:blue">Tel Aviv, Shuk Ha'Carmel<br/><br/></td><td width="450 "allign="right"> 2 <br/><br/></td></tr>

   <tr><td>
<img src=DSC05867.JPG  width="600 " height="450 "></td></tr><tr>
<td width="450 " style="color:blue">Tel Aviv, Shuk Ha'Carmel<br/><br/></td><td width="450 "allign="right"> 3 <br/><br/></td></tr>

   <tr><td>
<img src=DSC05870.JPG  width="600 " height="450 "></td></tr><tr>
<td width="450 " style="color:blue">Tel Aviv, Shuk Ha'Carmel <br/><br/></td><td width="450 "allign="right"> 4 <br/><br/></td></tr>

   <tr><td>
<img src=DSC05871.JPG  width="450 " height="600 "></td></tr><tr>
<td width="450 " style="color:blue">Tel Aviv, Shuk Ha'Carmel <br/><br/></td><td width="450 "allign="right"> 5 <br/><br/></td></tr>

   <tr><td>
<img src=DSC05874.JPG  width="450 " height="600 "></td></tr><tr>
<td width="450 " style="color:blue">Tel Aviv, Shuk Ha'Carmel <br/><br/></td><td width="450 "allign="right"> 6 <br/><br/></td></tr>

   <tr><td>
<img src=DSC05884.JPG  width="600 " height="450 "></td></tr><tr>
<td width="450 " style="color:blue">Tel Aviv, Shuk Ha'Carmel <br/><br/></td><td width="450 "allign="right"> 7 <br/><br/></td></tr>

   <tr><td>
<img src=DSC05876.JPG  width="600 " height="450 "></td></tr><tr>
<td width="450 " style="color:blue">Street in Tel Aviv, Rehov Neve Tsedek <br/><br/></td><td width="450 "allign="right"> 8 <br/><br/></td></tr>

   <tr><td>
<img src=DSC05881.JPG  width="450 " height="600 "></td></tr><tr>
<td width="450 " style="color:blue">Door in Tel Aviv, Rehov Neve Tsedek <br/><br/></td><td width="450 "allign="right"> 9<br/><br/></td></tr>

   <tr><td>
<img src=DSC05886.JPG  width="600 " height="450 "></td></tr><tr>
<td width="450 " style="color:blue">The Wailing Wall <br/><br/></td><td width="450 "allign="right"> 10 <br/><br/></td></tr>

   <tr><td>
       <p style="font-family:Courier blue,  Serif;font-size:25pt;">Petra</p>
<font size="5"  color="black"  style = "font-family:courier,arial,helvetica;">
Petra was the capital of the Nabataean Kingdom stretching from modern Labanon to the Gulf of Aqaba. It flourished
for five centuries until it was annexed into the Roman empire in 200 AD.
Now its greatness lies in ruins, the remains of earth quakes, war and pillage.
</font>
</p>


<img src=DSC05889.JPG  width="600 " height="450 "></td></tr><tr>
<td width="450 " style="color:blue">Petra entrance, now an attraction for millions visitors <br/><br/></td><td width="450 "allign="right"> 11 <br/><br/></td></tr>

   <tr><td>
<img src=DSC05892.JPG  width="450 " height="600 "></td></tr><tr>
<td width="450 " style="color:blue">The city is approached through a long crevice, a caravan path called the Siq.  <br/><br/></td><td width="450 "allign="right"> 12 <br/><br/></td></tr>
450 " style="color:blue">The Siq ends with a view of the Treasury<br/><br/></td><td width="450 "allign="right"> 16 <br/><br/></td></tr>


MANY LINES DELETED


</table>
</body>
</html>


<!-- END OF HIDDEN HTML -->
<?php
}
else
{
// Wrong password or no password entered display this message
if (isset($_POST['password']) || $password == "") {
  print "<p align=\"center\"><font color=\"red\"><b>Incorrect Password</b><br>Please enter the correct password</font></p>";}
  print "<form method=\"post\"><p align=\"center\">Please enter your password for access<br>";
  print "<input name=\"password\" type=\"password\" size=\"25\" maxlength=\"10\"><input value=\"Login\" type=\"submit\"></p></form>";
}
  print "<br><br>";
?>
<BR>
</body>
</html>

 

 

requinix Prolific Member

requinix

Posted
Posted
3 hours ago, spruce18b said:

The images are rotated with IrfanView for Windows, Version 4.53. I save them with "Keep  original EXIF data (if JPD to JPG)" unchecked.

I upload the images with Ipswitch WS_FTP Professional. The thumbnail view of the images show their correct orientation on both the local hard drive on my Windows 10 laptop  and their destinationon my Web site.

I appreciate your comment that PHP delivers exactly what it is given to deliver. However, that doesn't explain why some of the images are incorrectly rotated on some of the browsers (Internet Explorer, Firefox, Safari and Chrome).

Is there no code that can be inserted into the PHP code to force the correct rotation? I am a novice PHPer, so I don't know what to  do. I encountered a problem uploading the PHP code for your advice, but here is a chunk from it.

Thanks for your help

Browsers do not decide to rotate images for no reason, but they may decide to not rotate an image. If you see an image rotated in one place and not another then that's because of what I said earlier:

On 7/4/2020 at 10:51 PM, requinix said:

The orientation is controlled by EXIF data. It acts as a suggestion to things displaying the image, informing them of how the image is intended to be displayed. When you see the image oriented incorrectly, that's the actual image.

 

Can you upload here one of the problematic images?

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.