CSS

Tips(Edit)

Manage image rotation EXIF(Edit)

As I was trying to find out how to automatically handle picture rotation in order to display them, I came across this blog article, that made me laugh.

And then, as I was thinking "ok, let's just do that using PHP or something, I thought differently, what if the client could do it by itself?

It's exactly the topic discussed here, and

image-orientation
made my day. (specs)

A simple

 style="image-orientation: from-image" 
and it is done!...

However, as you can see from [http://caniuse.com/#feat=css-image-orientation], it is not glory, Firefox is pretty much the only one to support it.

In order to provide a stable solution, I personaly chose to use the:

 
extension=php_mbstring.dll
extension=php_exif.dll      ; Must be after mbstring as it depends on it
 

and the

 array exif_read_data ( string $filename [, string $sections = NULL [, bool $arrays = false [, bool $thumbnail = false ]]] ) 
function (doc).

This function gives us an array, that we can check for useful values, the index we want to use for image rotation is

['Orientation']
:

$exif['Orientation'];

Then I just test if it exists, and if it is equals to 8, 6, or 3, main values we want to deal with, in order to add one of the following CSS class to the picture:


  	.exif_8 {
	    -ms-transform: rotate(-90deg);
	    -webkit-transform: rotate(-90deg);
	    transform: rotate(-90deg);
  	}
  	.exif_3 {
	    -ms-transform: rotate(180deg);
	    -webkit-transform: rotate(180deg);
	    transform: rotate(180deg);
  	}
  	.exif_6 {
	    -ms-transform: rotate(90deg);
	    -webkit-transform: rotate(90deg);
	    transform: rotate(90deg);
  	}

Raw CSS highlight animation(Edit)

Illuminates a container for a short period of time and fade away, no jquery or any Javascript required [1]:

  	@keyframes highlight {
   	 0% {
   	   background: red
   	 }
   	 100% {
   	   background: none;
  	  }
  	}

  	#highlight:target {
  	  animation: highlight 1s;
  	}

Conclusion(Edit)

In conclusion, CSS tries to come with solutions, but they are not wide spread enough to provide a 100% working trick for now, let's hope in the futur more browser will implement it. Using alternative solutions can provide a working and efficient way of dealing with it, but it does not manage edge cases or you need more than that..