Upload Module Image Resize and Crop

Register an Account
Reply
 
Thread Tools Display Modes
  #1 (permalink)  
Old 09-14-2009, 10:20 PM
Yankidank's Avatar
Pligg Founder/Coder/Designer
Pligg Version: SVN
Pligg Template: Wistie
 
Join Date: Dec 2005
Location: Ocala, FL
Posts: 4,934
Send a message via AIM to Yankidank
I recently rediscovered Smart Image Resizer (SIR), a PHP script for resizing images on the fly. It's useful if you want to shrink an image to a smaller dimension or crop it to a custom ration. I thought that some users might want to take advantage of this free script by using it in combination with the Upload Module for Pligg. This tutorial will provide some examples of how to take advantage of ths SIR script, and it only takes a couple minutes to do.

What will this do?
This mod will allow you to change the size of your images from the Upload Module without having to generate a new thumbnail size. It also allows you to crop images using a set ratio. This is useful if you want to generate cropped and squared versions of uploaded images. The script will cache a local copy of the resized image in your /cache directory.

Before (left) and after (right) 1:1 100px crop.



First, grab and upload the attached image.php file from this thread to your pligg base directory. It is a slightly customized version of the SIR file. The only thing changed is the cache directory.

Second, open up your Upload Module settings page. Find the input field for "Manual Thumbnail HTML format" and paste in the following code, changing the domain.com example with your own domain/subdirectory information.
Code:
<a href="{target}"><img src="http://www.YOURDOMAIN.COM/SUBDIRECTORY/image.php?width=200&height=200&cropratio=1:1&image=http://www.YOURDOMAIN.COM/SUBDIRECTORY{path}" /></a>
Note that if you are not using a subdirectory you should remove that part and make sure that there is no trailing slash after the second YOURDOMAIN.COM.

The previous example would crop the image to a square size (1:1 ratio). You can remove the cropratio expression from the line above (&cropratio=1:1) if you do not want to crop the image and change it's aspect ratio. The height and width values used (200 and 200) are used to determine the maximum height or width of the image. If an image is 600px wide by 150px tall it will use the wider side (600px) to shrink the image down to 200px by 50px, preserving the aspect ratio so that the image doesn't become distorted. The Upload Module will do pretty much the same thing, but it requires you to set a new thumbnail size for all of the images on your site. The module does not allow you to crop the image though, so that feature is unique to this method.
Attached Thumbnails
Upload Module Image Resize and Crop-original.jpg  
Attached Images
 
Attached Files
File Type: php image.php (13.0 KB, 433 views)

The Twitter Module for Pligg CMS!
Register, Login, and Submit Stories with Twitter. An absolute MUST HAVE for all Pligg sites!
Reply With Quote
  #2 (permalink)  
Old 09-15-2009, 04:59 AM
nellaitamil's Avatar
Constant Pligger/Designer
Pligg Version: 1.1.3
Pligg Template: ar...
 
Join Date: Dec 2008
Location: india
Posts: 208
Dear Sir Yankidank...
am trying crop in upload module. But not work...

Stop 1
My pligg dir in upload a image.php file.

stop 2
this code add my upload settings page. field for "Manual Thumbnail HTML"
<a href="{target}"><img src="http://www.tamilers.com/modules/upload/attachments/image.php?width=100&height=100&cropratio=1:1&image =http://www.tamilers.com/modules/upload/attachments{path}" /></a>

But Not work crop images...
Pls help...
.................................................. .................................................. .............................................
My site
http://tamilers.com
Reply With Quote
  #3 (permalink)  
Old 09-15-2009, 01:25 PM
Yankidank's Avatar
Pligg Founder/Coder/Designer
Pligg Version: SVN
Pligg Template: Wistie
 
Join Date: Dec 2005
Location: Ocala, FL
Posts: 4,934
Send a message via AIM to Yankidank
Quote:
Originally Posted by nellaitamil View Post
Dear Sir Yankidank...
am trying crop in upload module. But not work...

Stop 1
My pligg dir in upload a image.php file.

stop 2
this code add my upload settings page. field for "Manual Thumbnail HTML"
<a href="{target}"><img src="http://www.tamilers.com/modules/upload/attachments/image.php?width=100&height=100&cropratio=1:1&image =http://www.tamilers.com/modules/upload/attachments{path}" /></a>

But Not work crop images...
Pls help...
.................................................. .................................................. .............................................
My site
http://tamilers.com
Remove /modules/upload/attachments from the URL so that it points to where you uploaded the image.php file.

The Twitter Module for Pligg CMS!
Register, Login, and Submit Stories with Twitter. An absolute MUST HAVE for all Pligg sites!
Reply With Quote
  #4 (permalink)  
Old 09-16-2009, 10:55 AM
nellaitamil's Avatar
Constant Pligger/Designer
Pligg Version: 1.1.3
Pligg Template: ar...
 
Join Date: Dec 2008
Location: india
Posts: 208
Quote:
Originally Posted by Yankidank View Post
Remove /modules/upload/attachments from the URL so that it points to where you uploaded the image.php file.
Oh My God...

Realy Thanks Yankidank. It is worked...

yankidank.

Last edited by nellaitamil; 09-16-2009 at 11:06 AM.
Reply With Quote
  #5 (permalink)  
Old 11-26-2009, 02:57 PM
Constant Pligger
Pligg Version: 1.0.3
Pligg Template: tarthemia
 
Join Date: Mar 2009
Posts: 202
hai yanidank
how to implement this code in uploadthumb.tpl
Reply With Quote
  #6 (permalink)  
Old 11-26-2009, 08:00 PM
PliggTemplate's Avatar
New Pligger
Pligg Version: v1.0.3
Pligg Template: Custom
 
Join Date: Jul 2009
Posts: 18
We use timthumb by Tim McDaniels & Darren Hoyt for resizing images and avatars etc within out pligg themes. It will do the same job as the SIR plugin Yankidank offered up and is no better no worse alternative to it.

TimThumb PHP Script Released | Darren Hoyt Dot Com
Reply With Quote
  #7 (permalink)  
Old 01-29-2010, 12:05 AM
alexiel's Avatar
New Pligger
 
Join Date: Jan 2010
Posts: 8
Where can I find the upload module page?
Reply With Quote
  #8 (permalink)  
Old 08-07-2010, 03:36 AM
New Pligger
Pligg Version: 1.04
 
Join Date: Jul 2010
Posts: 5
I found something even more interesting. Users being able to crop the images they uploaded. Basically being able to choose which part of the image they want to leave on site to display.

I found these two sites which have the code but was wondering if these can be integrated with image upload module.

http://www.mikesdotnetting.com/Article/95/Upload-and-Crop-Images-with-jQuery-JCrop-and-ASP.NET
http://www.visual-blast.com/javascript/jcrop-jquery-image-crop-plugin/
Reply With Quote
  #9 (permalink)  
Old 08-08-2010, 06:22 AM
Yankidank's Avatar
Pligg Founder/Coder/Designer
Pligg Version: SVN
Pligg Template: Wistie
 
Join Date: Dec 2005
Location: Ocala, FL
Posts: 4,934
Send a message via AIM to Yankidank
Of course they COULD be integrated, but that would require a large amount of development time and we don't see it as a crucial feature worth developing for free. You could make a substantial donation to this task to help fund such a project. If you would like a quote on what we would require in order to develop it PM me. It would probably cost hundreds of USD.

The Twitter Module for Pligg CMS!
Register, Login, and Submit Stories with Twitter. An absolute MUST HAVE for all Pligg sites!
Reply With Quote
Reply

Thread Tools
Display Modes




Pligg Modules and Pligg Templates from Pligg Pro Find support on the Pligg CMS Forum - 24 hours a day! Make a donation to support Pligg CMS development