Posted on Leave a comment

PHP: How to fix Image rotation issue in img tag because of EXIF

Photos captured by some smartphones especially iPhones are automatically rotated when we use it in <img> tag which is mostly not acceptable as we don’t need such unwanted rotation. This happens because of EXIF Data stored in that image. But we can easily fix it using PHP by following these steps:

function autorotate($src)
{
// check if extension exists or not
if(extension_loaded('imagick'))
{
    try
    {       
        $image= new Imagick($src);
        switch ($image->getImageOrientation()) {
        case Imagick::ORIENTATION_TOPLEFT:
            break;
        case Imagick::ORIENTATION_TOPRIGHT:
            $image->flopImage();
            break;
        case Imagick::ORIENTATION_BOTTOMRIGHT:
            $image->rotateImage("#000", 180);
            break;
        case Imagick::ORIENTATION_BOTTOMLEFT:
            $image->flopImage();
            $image->rotateImage("#000", 180);
            break;
        case Imagick::ORIENTATION_LEFTTOP:
            $image->flopImage();
            $image->rotateImage("#000", -90);
            break;
        case Imagick::ORIENTATION_RIGHTTOP:
            $image->rotateImage("#000", 90);
            break;
        case Imagick::ORIENTATION_RIGHTBOTTOM:
            $image->flopImage();
            $image->rotateImage("#000", 90);
            break;
        case Imagick::ORIENTATION_LEFTBOTTOM:
            $image->rotateImage("#000", -90);
            break;
        default: // Invalid orientation
            break;
      }
      $image->setImageOrientation(Imagick::ORIENTATION_TOPLEFT);

      $image->stripImage(); // if you want to get rid of all EXIF data
        $image->writeImage();
        $image->clear();
        $image->destroy();
      return $image;

    }
    catch(Exception $e) {
        return 'Exception caught: ',  $e->getMessage(), "\n";
    }  
  }
  else
  {
      return "Imagick extension is not installed.";
  }
}
  

// now run autorotate() function with source of file as parameter
autorotate('my_img.jpg');

Or you can also fix it with just one line if you have root access to your linux server. Just run following shell command:

convert image.jpg -auto-orient output.jpg

 

Posted on Leave a comment

Angular.js How to remove hash from url?

Configuration:

$locationProvider
  .html5Mode(true);

.htaccess file in root directory:

RewriteEngine On 
 # If an existing asset or directory is requested go to it as it is
 
 RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
 RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
 RewriteRule ^ - [L]

 # If the requested resource doesn't exist, use index.html
 RewriteRule ^ /index.html

In this mode you can use links without the # in HTML files

<a href="/path">link</a>

Link in Browser:

http://www.example.com/base/path

Source: http://stackoverflow.com/questions/16677528/location-switching-between-html5-and-hashbang-mode-link-rewriting

Posted on Leave a comment

How to Change Bootstrap Carousel Slide Speed

The speed cannot be controlled by the API. Though you can modify CSS that is in charge of that. find in the bootstrap.css file:

.carousel-inner > .item {
    position: relative;
    display: none;
    -webkit-transition: 0.6s ease-in-out left;
    -moz-transition: 0.6s ease-in-out left;
    -o-transition: 0.6s ease-in-out left;
    transition: 0.6s ease-in-out left;
}

and change 0.6s to the time you want. You also might want to edit time in the function call below:

.emulateTransitionEnd(2000)

at bootstrap.js in function Carousel.prototype.slide. That synchronize transition and prevent slide to disapear before transition ends.

Source: http://stackoverflow.com/questions/17332431/how-can-i-control-the-speed-that-bootstrap-carousel-slides-in-items/17332516#17332516