⚠ In case you've missed it, we have migrated to our new website, with a brand new forum. For more details about the migration you can read our blog post for website migration. This is an archived forum. ⚠

  •     

profile picture

Image Crud - Rotate image from Thumbnail view



jrowe

jrowe
  • profile picture
  • Member

Posted 14 May 2013 - 13:15 PM

A simple implementation I did so that I can rotate images after they upload. It rotates both the thumbnail and full sized image.

 

In my controller that renders the image crud

function rotateimage($pkey){
$this->load->library('image_moo');

$basepath='assets/uploads/';
$images = $this->db->get_where('pictures', array('id'=>$pkey))->result();
 

    if(!empty($images))
    {
    
       foreach($images as $row){
             $filestring = $basepath.$row->url;
             $filestringthumb=$basepath.'thumb__'.$row->url;
             $this->image_moo->set_jpeg_quality('60');
           $this->image_moo->load($filestring)->rotate('90')->save($filestring,true);
               $this->image_moo->load($filestringthumb)->rotate('90')->save($filestringthumb,true);
                $this->image_moo->set_jpeg_quality('60');

        
        }

    }
    else{
    //primary key not found

 }
 
} 

Then , under assets/image_crud/views/list.php I added this javascript:

<script type='text/javascript'>
		$(function(){
			$('.rotate-anchor').click(function(){
				
					$.ajax({
						url:$(this).attr('href'),
						beforeSend: function()
						{
			
						//can show "wait" screen here
						},
						success: function(){
							loadPhotoGallery();
					}
					});
				
				return false;
			});
				
		});
	</script>

Also, under assets/image_crud/views/list.php I also added this link to the thumbnails (under the foreach of ul showing the images:

<a href="<?php echo 'http://localhost/controller/rotateimage/'. $photo->$primary_key; ?>" class="rotate-anchor"> Rotate </a>

Finally.. I found out that after the rotating the thumbnails were not refreshing with the new rotated version so to force the refreshing of the thumbnail I added a random value to prevent it from being cached:

I switched this:
<img src='<?php echo $photo->thumbnail_url?>' width='90' height='60' class='basic-image' />


to this: (to get it to refresh after being rotated)


<img src='<?php echo $photo->thumbnail_url.'?timestamp='.rand(1,3000); ?>' width='90' height='60' class='basic-image' />

Also had to change this:

<a href='<?php echo $photo->image_url;?>' <?php if (isset($photo->title)) {echo 'title="'.str_replace('"',"&quot;",$photo->title).'" ';}?>target='_blank' class="color-box" rel="color-box" tabindex="-1"><img src='<?php echo $photo->thumbnail_url.'?timestamp='.rand(1,3000); ?>' width='90' height='60' class='basic-image' /></a>

To this:

<a href='<?php echo $photo->image_url.'?timestamp='.rand(1,3000);?>' <?php if (isset($photo->title)) {echo 'title="'.str_replace('"',"&quot;",$photo->title).'" ';}?>target='_blank' class="color-box" rel="color-box" tabindex="-1"><img src='<?php echo $photo->thumbnail_url.'?timestamp='.rand(1,3000); ?>' width='90' height='60' class='basic-image' /></a> 

This will prevent caching of the normal size image incase they rotate it and they click the thumbnail to show the full size image

 

This will rotate both the thumbnail and the normal sized image by 90 degrees... 

 

One problem I am having is that the thumbnails quality degrades if you rotate it alot, the normal sized image seems to not..


Donna111

Donna111
  • profile picture
  • Member

Posted 16 October 2013 - 03:06 AM

HI there

The code is a little bit difficult for me.i am not so good at computer.However,i usually rotate the image using an image processing program.They are easy and powerful.

You can just add one of them to help you.They also have detailed tutorial.So it's easy to manipulate.


aclink

aclink
  • profile picture
  • Member

Posted 25 March 2014 - 06:43 AM

good work, i have never though of rotating image thumbnail before, all i can do i rotate image. this is really being helpful. thank you for sharing your accomplishments.

if the quality can be improved, that would be marvelous.