Hello fellow couch enthusiasts

Today I'm here to release an addon that will provide some 'advanced' functionality to a native couch feature. If you're not already familiar with editable types 'image' and 'thumbnail' please read up on them.

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:



This was uploaded through the editable image type:

Code: Select all

   <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:

Code: Select all

    <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.

Code: Select all

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

Code: Select all

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

Code: Select all

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

Code: Select all

<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.

Extract the attached ZIP to your couch addons folder, once extracted place the following inside of /addons/kfunctions.php

Code: Select all

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

You will then be able to use editable type 'jcropthumb' in your templates.

P.S. This addon requires Couch version 1.4.5RC1 or higher - currently available here:
viewtopic.php?f=5&t=8581
or
viewtopic.php?f=5&t=8981

[cheesypoof]

Thanks for helping with this @Bartonsweb. It looks great

This is awesome!

You are a lifesaver @Bartonsweb

This is a great addon ... thanks for your hard work on this @Bartonsweb and @KK. I've tried it out and it is exactly what my previous client wanted for the auto-thumbnails - so I will implement it for them. I will be using this all the time - brilliant!

When the cropping is free form (with no measurement specified) - would it be possible to display the width and height of the cropped area as the borders are dragged in and out, say next to the crop button?

Thanks for the feedback @Potato

I've updated the original post with a new download link as per your suggestion. Width and height shall be shown beneath the image when no width/height parameters are present, to show the output size of the thumbnail (The values will be rounded when cropped, so we can ignore the precise decimal places somewhat).

Just reinstalled your addon - love it! Thank you. The freeform option with measurements is the icing on the cake ... folks you're going to love this!

p.s. I did make a small change so that the link 'Recreate Thumbnail' is styled as a button rather than text link (so now it looks the same as the 'Recreate' button for the editable type of thumbnail) ...

in jcropthumb.php I replaced class="recreate_tb" with class="button"

$html .='</div><a id="' .$input_id. '_pop_button" class="button"><span>Recreate Thumbnail</span></a>';

Hehe, that was a change KK made so I left it as is but yes you can change it easily as you said I'm glad you enjoy it!

great, thank you very much!!!

ps: I have a problem implementing a thumbnail in connection with cms:get_custom _field. It outputs the file like this: <img src=":img_9560-130x130.jpg">

Code: Select all

 <cms:get_custom_field "teaser_thumb_1<cms:show k_count />" masterpage="<cms:show k_template_name />" />

when using the standard <cms:show teaser_thumb_1/> it's working fine. Also with the standard thumbnail tag.

Else it is perfect

great, thank you very much!!!

ps: I have a problem implementing a thumbnail in connection with cms:get_custom _field. It outputs the file like this: <img src=":img_9560-130x130.jpg">

Code: Select all

 <cms:get_custom_field "teaser_thumb_1<cms:show k_count />" masterpage="<cms:show k_template_name />" />

when using the standard <cms:show teaser_thumb_1/> it's working fine. Also with the standard thumbnail tag.

Else it is perfect

Hi cl,

I'm glad you like the addon!

Unfortunately the problem you've listed is known and unfortunately right now not fixable, the cms:get_custom_field tag is not meant to be used with custom addons and does not work with several of them (See: Repeatable, relation, securefile etc.)

AFAIK This will be fixed in later releases of couch by KK, but until then we will just have to wait!

To clarify: You cannot use cms:get_custom_field with the addon (or a lot of other addons).

Thanks for the feedback

thank you for the explanation, I was not aware of that.