JCropthumb: Advanced thumbnail cropping for CouchCMS


 If you're not already familiar with editable types 'image' and 'thumbnail' please read up on them.

Extract the folder into your couch install addons folder. Then place the following into your /addons/kfunctions.php file:

PHP

require_once( K_COUCH_DIR.'addons/jcropthumb/jcropthumb.php' );

The native thumbnail works fine, but it doesn't leave much room for customisation, it allows 6 positions to choose from to select the crop and that's it. This is okay, I mean it does work - but it's not very friendly to users, especially when the portion of an image you wish to be in the thumbnail doesn't fit within the pre-defined cropping regions, also it doesn't allow for resizing the image into the thumbnail (If you wish to do that).

 

So I am here to present my solution to you all: JCropthumb

 

This addon creates a new editable type 'jcropthumb' it works similarly to the native 'thumbnail' region but has a few advantages and parameters that I will explain below, but first lets show you JCrop in action so you can see exactly what I'm talking about.

 

Firstly, lets take an image (We will show an extra feature here: The example image is actually 1000px wide however JCrop will proportionately fit the image into its popup container of 700px wide) it will maintain the true coordinates and height/widths for the final crop, however.
So, our example image:

 

 JCrop in action demo

 

This was uploaded through the editable image type:

 

HTML

<cms:editable
name='image_1'
label='Header Image'
desc='Upload image for your post here'
type='image'
width='1000'
height='1000'
/>

 

 

All normal so far, now we want a thumbnail but instead of using the native couch thumbnail region, we use editable type jcropthumb instead. An example usage is:

 

 

HTML

<cms:editable
name='my_imagethumb'
type='jcropthumb'
assoc_field='image_1'
desc='will be created automatically'
show_preview='1'
/>

 

Notice that we have not specified a width or height - this will mean the thumbnail will be the size of JCrops selection, so if we select a 500x200 area for the thumbnail, the thumbnail will be 500x200 in size.

 

If no width or height paramaters are set, there will be no aspect ratio for the thumbnail and so your selection will be free form. Also, there will be no minimum size of selection.

 

Here's a screenshot of the admin panel using JCrop:

 

There are a few ways to determine the aspect ratio for your thumbnails - you may define width or height OR both parameters. Each definition tells JCrop to behave in different ways. If you define ONLY width OR height Jcrop will take the defined dimension and calculate the ratio of the second unspecified dimension in proportion to the image.


So if we have a image of 1000x1000px dimensions and our jcropthumb editable ONLY has the width parameter set at width='200' JCrop will calculate the height to be proportionate to the width, meaning it will maintain a square (or rectangle, if the dimensions are different).

 

Enforce_min: by default this is set to 1 IF any combination of the width or height parameters are present. This enforces a minimum size for the selection box, which stops users select a 1px size thumbnail to fit into a thumbnail with a defined width of 200px (this would create a pixel-ated thumbnail). You can override this by setting enforce_min='0' on your thumbnail.


enforce_min will default to 0 IF there are no width or height parameters present on the thumbnail.

 

show_preview: this parameter behaves exactly as it does in the native thumbnail region. If set to '1' there will be a preview of thumbnail on the admin page next to the link to create a new thumbnail. This also supports preview height and width like the native thumbnail region.

 

I will post a few iterations of how JCrop can be used to further help illustrate it, I will also provide a screenshot for each one using our test image so that you can see how it affects the aspect ratio of the image.

 

HTML

<cms:editable name='my_imagethumb' type='jcropthumb' assoc_field='image_1' desc='will be created automatically' width='200' height='500' show_preview='1' />

 

HTML

<cms:editable name='my_imagethumb' type='jcropthumb' assoc_field='image_1' desc='will be created automatically' width='500' height='200' show_preview='1' />

 

HTML

<cms:editable name='my_imagethumb' type='jcropthumb' assoc_field='image_1' desc='will be created automatically' width='200' show_preview='1' />

 

HTML

<cms:editable name='my_imagethumb' type='jcropthumb' assoc_field='image_1' desc='will be created automatically' height='200' show_preview='1' />

 

 

These are some basic examples of usages to show how flexible it allows your thumbnails to become, compared to the native thumbnail region.

 

This addon was started by me but most of the credit goes to KK for helping and finishing it with me. So thanks should go to KK for the addon. 

 

Please let us know if there's any problems with thumbnail behaviour etc. 

 

 

 

Share this post

No comments.

Leave a comment


You can use the following HTML tags: <a><br><strong><b><em><i><blockquote><pre><code><ul><ol><li><del>