Auto Image Orientation

[jcocking]

Problem:
Photos are appearing sideways and upside-down on the forums. Many of my users are taking pictures with phones and tablets and directly uploading the images to the forums.

phpbb does not check the EXIF data of the uploaded image and orient the image correctly. At a high level, the mod would review the EXIF data from the uploaded image. Based on the EXIF data, the mod would then rotate the image to the correct orientation.

Proposed Approach:
When a user uploads an attachment, the mod would do the following steps:

1. Determine if the exif extension has been compiled as part of the php install
2. Determine if the attachment is an image
3. Determine if EXIF data is present in the image
4. Retrieve the EXIF Orientation value from the image
5. Determine if the image needs to be adjusted based on the orientation value
6. Rotate the image and save the attachment.

Other Considerations:

• These steps should occur before the create_thumbnail function has occurred.
• This should be done at attachment upload versus display attachment to save server resources.

Here is an example of one persons program to accomplish this as a standalone app:
http://www.neilyoungcv.com/blog/code-sh ... ation-fix/

For a description of EXIF orientation values:
This is old, but simple description of values - http://sylvana.net/jpegcrop/exif_orientation.html
EXIF tag values - http://www.sno.phy.queensu.ca/~phil/exi ... /EXIF.html

[ViolaF]

Seems like a candidate for a paid job..

[jcocking]

Seems like a candidate for a paid job..

Can you explain why you think this is a candidate for a paid job?

[jcocking]

Here is a little more background info to explain why this will be a much desired mod versus a custom code job.

This has only become an issue in the last couple of weeks. When we looked at our viewers stats, 38% of our visitors were using phones or tablets to access our forums. For this reason we implemented a responsive theme.

If you are not familiar with responsive design, it is accomplished with HTML5 and CSS. The theme morphs based on the width of the device using the forum. It has been great. The forum rebuilds itself to the screen size so the user does not have to do the finger pinch and scroll to see it.

We have seen more users uploading photos directly from their phones and tablets. The downside, phones and tablets can be held in multiple ways.

As more and more tablets and phones becme the browser of choice, this mod will become a major demand.

I will alpha and beta test and assist in anyway possible to get this mod off the ground. If you have any questions please let me know.

Thank you.

Jeff

[Brf]

Have you ever looked at Facebook and seen the phone-uploaded images?
Those are typically rotated incorrectly too. Phone users need to learn to hold their phones correctly when they snap pictures.

[jcocking]

Have you ever looked at Facebook and seen the phone-uploaded images?
Those are typically rotated incorrectly too.

I did not use the excuse of other websites shortcomings to justify a poor experience on my website. If Facebook does not care for their user experience, does not mean my members need to put up with a poor experience on my site. I believe in treating my members better than that.

Phone users need to learn to hold their phones correctly when they snap pictures.

It is evident that we have different philosophies on how we treat people and members of our websites. It easier to have a simple mod using available technologies solve the problem, versus trying to educate my 3800 forum members.

Thank you for you input.

Jeff

[Brf]

PhpBB is mean to be a forums software, not a graphics editing software. It is assumed that the users can use their own software to edit their images before they upload them. Otherwise, you would have huge 6-15M images uploaded with today's digital cameras.

[jcocking]

PhpBB is mean to be a forums software, not a graphics editing software. It is assumed that the users can use their own software to edit their images before they upload them. Otherwise, you would have huge 6-15M images uploaded with today's digital cameras.

That argument lost its validity when the attachment mod became part of the base product. (yes, I have been around since attachments were a mod.)

phpbb creates thumbnails, determines if it should use imagemagick or GD, re sizes images, and other features that you find in graphics editing products.

I am not asking this to be part of base functionality. This is why I am in the mod request section.

There are many mods that allow phpbb to be extended for photo related items. For example, there are photo album mods and EXIF display mods to name a couple.

Can I understand why the pushpack for a image based mod? Do you personally disagree with the concept of the mod or is this an official function role to decline the mod?

curious?

jeff

[Brf]

phpbb creates thumbnails, determines if it should use imagemagick or GD, re sizes images, and other features that you find in graphics editing products.

PhpBB creates thumbnails using whichever software the admin has chosen. There is no resizing option. It is all very quick-and-dirty.

[jcocking]

phpbb creates thumbnails, determines if it should use imagemagick or GD, re sizes images, and other features that you find in graphics editing products.

PhpBB creates thumbnails using whichever software the admin has chosen. There is no resizing option. It is all very quick-and-dirty.

My question overlooked......

There are many mods that allow phpbb to be extended for photo related items. For example, there are photo album mods and EXIF display mods to name a couple.

Can I understand why the pushpack for a image based mod? Do you personally disagree with the concept of the mod or is this an official function role to decline the mod?

[Brf]

My point is that it is a simple matter for the user to fix the image before it is uploaded.

As for your request, there is no "rejection" of mods. The question is whether someone who understands the process you are proposing decides it is urgent enough to warrent writing a mod, or it is simpler to educate the uploading users to rotate their camera.

[jcocking]

My point is that it is a simple matter for the user to fix the image before it is uploaded.

That sounds like a really great concept. The challenge is the phone and tablet devices reads the EXIF orientation field and present the image correctly on the device. Digital cameras do the same thing. The user does not know the image is rotated until they post it to the forum.

Once a user uploads a post and sees it is tilted: The user then has to edit the post. Delete the image. Upload the image to a desktop. Adjust the image. Reload the image to the post.

No one does that. I just end up with a forum with pictures tilted sideways.

Thank you for your feedback. I would like to believe your perspective on human nature is accurate. Some will cleanup their photos, but the majority will not.

The mod is not a difficult mod. The issue I have is where to insert it into the flow of uploading images..

Jeff

[jcocking]

I got bored and wrote the modification myself. I have attached the code here for your use if you are looking for the same modification.

No Warranty. No Support. Use at your own Risk. Backup Everything.

This code snippets does the following.
1. It will resize large files. The code will look at the width/height and compare to default setting defined in the function ImageResizeAndOrient(). You can change the defaults within the code.
2. The resize will work on gif, jpg and png files. The resulting saved file is a jpg.
3. If the file is a jpg, the code will look at the exif data and change the orientation of the picture to be positioned correctly. The save removes the EXIF to keep the picture correctly.

Files to Edit:

• includes/functions_upload.php

Edits:

1. Find:

   Code: Select all

   	/**
   	* Performing additional checks

   Before Add:

   Code: Select all

     //Added new image functions
     /**
     *   ImageHandler - ImageResizeAndOrient()
   	*   Function will resize images and correct orientation
     *
     */
     function ImageResizeAndOrient()
     {
      	// Edit values to control functionality
       $max_width = 1200;
       $max_height = 1000;
       // No need to edit beyond this point
   		
     	//get the image size
   		$destinationImage = false;
     	$size = getimagesize($this->destination_file);
     	//determine dimensions
     	$width = $size[0];
     	$height = $size[1];
     	if ($width > $max_width || $height > $max_height) {
     		 ini_set("memory_limit","128M");
     		//determine what the file extension of the source
       	switch($this->extension)
       	{
       		case 'gif': case 'GIF':
       			$sourceImage = imagecreatefromgif($this->destination_file);
       			break;
       		case 'jpg': case 'JPG': case 'jpeg':
       			$sourceImage = imagecreatefromjpeg($this->destination_file);
       			break;
       		case 'png': case 'PNG':
       			$sourceImage = imagecreatefrompng($this->destination_file);
       			break;
       	}
       	// find the largest dimension of the image
       	// then calculate the resize perc based upon that dimension
       	$percentage = ( $width >= $height ) ? $max_width/$width : $max_height/$height;
       	// define new width / height
       	$newWidth = round($width * $percentage);
       	$newHeight = round($height * $percentage);
       	// create a new image
       	$destinationImage = imagecreatetruecolor($newWidth, $newHeight);
       	// copy resampled
       	imagecopyresampled($destinationImage, $sourceImage, 0, 0, 0, 0, $newWidth, $newHeight, $width, $height);
   		}
   		if ($this->extension == "jpg" || $this->extension == "jpeg") {
    			$flip=$rotate=false;
   			if (!$destinationImage) $destinationImage = imagecreatefromjpeg($this->destination_file);
         //evaluate exif data from photo
         $exif = exif_read_data($this->destination_file);
         //get the orientation
         $ort = $exif['Orientation'];
         //determine what oreientation the image was taken at
         switch($ort)
         {
             case 2: // horizontal flip
   							$flip = true; 
                 break;
             case 3: // 180 rotate left
   							$rotate = 180;
                 break;
             case 4: // vertical flip
   							$flip = true;
   							$rotate = 180;
                 break;
             case 5: // vertical flip + 90 rotate right
   							$flip = true;
   							$rotate = 90; 
                 break;
             case 6: // 90 rotate right
   							$rotate = -90;
                 break;
             case 7: // horizontal flip + 90 rotate right
   							$flip = true;
   							$rotate = -90;							 
                 break;
             case 8: // 90 rotate left
   							$rotate = 90;
                 break;
         }
         // create the jpegs
       	if ($flip) $this->ImageFlip($destinationImage);	 
       	if ($rotate) $destinationImage = imagerotate($destinationImage, $rotate, -1);
       }
     	if ($destinationImage) {
      		 imagejpeg($destinationImage, $this->destination_file, 100);
   			 $this->extension = "jpg";
   			 return;
     	} else {
     		return;
     	}		 
     }
     
     /**
     *   ImageHandler - ImageFlip()
     *
     */
     function ImageFlip(&$image, $x = 0, $y = 0, $width = null, $height = null)
     {
      
         if ($width  < 1) $width  = imagesx($image);
         if ($height < 1) $height = imagesy($image);
      
         // Truecolor provides better results, if possible.
         if (function_exists('imageistruecolor') && imageistruecolor($image))
         {
             $tmp = imagecreatetruecolor(1, $height);
         } else {
             $tmp = imagecreate(1, $height);
         }
     
         $x2 = $x + $width - 1;
     
         for ($i = (int)floor(($width - 1) / 2); $i >= 0; $i--)
         {
             // Backup right stripe.
             imagecopy($tmp, $image, 0, 0, $x2 - $i, $y, 1, $height);
     
             // Copy left stripe to the right.
             imagecopy($image, $image, $x2 - $i, $y, $x + $i, $y, 1, $height);
     
             // Copy backuped right stripe to the left.
             imagecopy($image, $tmp, $x + $i,  $y, 0, 0, 1, $height);
         }
     
         imagedestroy($tmp);
     
         return true;
     }
   

2. Find:

   Code: Select all

   phpbb_chmod($this->destination_file, $chmod);

   Before Add:

   Code: Select all

   			// Check image orientation
   			if ($this->is_image()) $this->ImageResizeAndOrient();

[ViolaF]

Perfect, thanks..

[Noxian]

Thanks for this fix/mod works great.