Not a developer? Go to MovableType.com

Plugin and Theme Directory

Image Cropper v1.1.2

By Byrne Reese
Posted August 25, 2009, in Assets, Files, Uploading.

Details

The Image Cropper Plugin provides a simple user interface for managing and generating custom thumbnails from your image assets.

The plugin was specifically designed to addressed the case where publishers want the ability to produce different thumbnails designed specifically for certain different locations on a web site. Furthermore, for each of these locations it is not sufficient simply to scale the asset in question; rather the publisher would rather crop the asset in a custom manner for each thumbnail generated.

Finally, in order to properly annotate thumbnails to credit the photographer and preserve any required copyright notices, this plugin allows you place some text on the image accordingly.

This utility facilitates that process.

Features

  • Define a set of "prototypes" which in essence are a prescribed set of allowable thumbnail sizes.

  • Manage all related thumbnails from a single dashboard.

  • Create alternate thumbnails using a simple drag-and-drop cropping interface -- without ever leaving Movable Type.

  • Annotate thumbnails with a custom message.

  • Place annotations using the orientation and location you specify on the generated thumbnail.

  • Hooks for designers to define thumbnail prototypes for their themes and template sets so that their users don't have to.

Installation

To install this plugin follow the instructions found here:

http://tinyurl.com/easy-plugin-install

Usage

Managing "Prototypes"

To manage the list of allowable cropped thumbnails for your web site, select "Thumbnail Prototypes" from the Preferences menu from within Movable Type.

Then simply add and edit thumbnail prototypes by defining the following properties for each:

  • Max Width
  • Max Height
  • Label (used later for selecting and placing cropped images on your web site)

Managing Thumbnails

Once you have defined a list of prototypes you can begin creating thumbnails. To do that, navigate to the Edit Asset screen associated with the asset in question. In the sidebar you will see a link called "Generate Thumbnails." Clicking that link will take you to the cropping dashboard.

Adding Cropped Images to your Website

Once you have created a cropped thumbnail, you can display it on your web site using the following template code:

<mt:Asset id="136">
  <mt:CroppedAsset label="Square">
    <img src="<mt:AssetURL>" />
  </mt:CroppedAsset>
</mt:Asset>

It is quite possible however that you need to display the cropped version of an asset only if it is available and fall back to a simple scaled version of the thumbnail if a cropped version cannot be found. The following template code shows how you can use <mt:else> to do just that:

<mt:Asset id="136">
  <mt:CroppedAsset label="Square">
    <img src="<mt:AssetURL>" width="100" height="100" />
  <mt:Else>
    <img src="<mt:AssetThumbnailURL square="1" width="100">" />
  </mt:CroppedAsset>
</mt:Asset>

Config Directives

  • DefaultCroppedImageText - Determines the default text to be used when annotating images.

Template Tags

  • <mt:DefaultCroppedImageText> - Returns the default cropped image text as specified by the DefaultCroppedImageText config parameter.

  • <mt:CroppedAsset> - Places the desired cropped image asset into context. This tag must be called with an existing asset (the parent asset) already in context. See example above. Allowable arguments:

    • label - The label to filter by.

Designer Guide

The Image Cropper plugin exposes a simple set of hooks that can be embedded in a theme's config.yaml file so that designers can specify the exact dimensions of their fixed image prototypes. When prototypes are defined in this way, they will appear automatically on the Preferences > Thumbnail Prototypes screen for blogs using the corresponding theme.

To define thumbnail prototypes via config.yaml, consult this super simple example:

generic_blog_theme:
  label: 'Generic Blog Theme'
  thumbnail_prototypes:
    feature_thumb:
      label: 'Featured Thumbnail'
      max_width: 100
      max_height: 90
    feature_lrg:
      label: 'Homepage Feature'
      max_width: 350
      max_height: 300
  templates:
    index:
      etc...

As you can see you can define one or more prototypes easily for a theme. Designers can specify the label for the prototype as well as its dimensions.

Help, Bugs and Feature Requests

If you are having problems installing or using the plugin, please check out our general knowledge base and help ticket system at help.endevver.com.

If you know that you've encountered a bug in the plugin or you have a request for a feature you'd like to see, you can file a ticket in Github Issues.

Copyright

This plugin was created from the kind support of Talking Points Memo (http://www.talkingpointsmemo.com/), who supports and appreciates open source. We <3 TPM.

Copyright 2009, Endevver, LLC. All rights reserved.

About Endevver

We design and develop web sites, products and services with a focus on simplicity, sound design, ease of use and community. We specialize in Movable Type and offer numerous services and packages to help customers make the most of this powerful publishing platform.

http://www.endevver.com/

Compatibility

Movable Type versions: 4.35.15.2

License

GPL


Back

8 Comments

thelasian on August 30, 2009, 2:43 p.m. Reply

I get this in the plugin settings: Error in configuration template: Publish error in template ”: Unknown tag found: PluginConfigForm

Also not sure about installation: Where does the META.yml and the README.mardown file go?

thelasian on August 30, 2009, 2:55 p.m. Reply

Also, about installation: My MT-STATIC folder is outside of my CGI folder. I understand that the content of the MT-STATIC file from the plugin is to be copied into the MT-STATIC folder on my server. But that’s confusing me a bit.

THe content of the MT-Static folder of the plug in consists of the following file structure:

MT-STATIC - Plugins — Imagecropper —- CSS —— i —- JS

Do I simply drag and drop the whole “plugins” file from the plugin into my MT-STATIC folder?

360Fashion on September 19, 2009, 8:03 a.m. Reply

hi you do not say what version of mt it will work for. will it work for 4.21?

jdbeast00 on October 1, 2009, 11:22 p.m. Reply

i can’t get the tag mt:CroppedAsset to work. I use it as described in the documentation. The cropping part works fine.

mt:Asset id=”2” mt:CroppedAsset label=”Small” img src=”$mt:AssetURL$” / /mt:CroppedAsset /mt:Asset

Asset id 2 works, but the cropped asset displays nothing even though that cropped asset does exist!

Mihai Bocsaru on November 7, 2009, 8:17 a.m. Reply

The plugin works like a charm! Thanks for this gem, Byrne!

I could confirm that the plugins works very well with movable type v4.26 to v4.32 (latest version at the moment), but I guess it would work also with v4.21 (trying to answer thelasion question above).

Neezer on January 12, 2010, 8:58 a.m. Reply

Has anyone tried this with MT5? I get a javascript error when I try and create a prototype:

Error: uncaught exception: [Exception… “Security error” code: “1000” nsresult: “0x805303e8 (NSERRORDOMSECURITYERR)” location: “http://[xxremovedxx.xxx]/cgi-bin/mt/mt.cgi?_mode=listprototypes&blog_id=7 Line: 1”]

Could be a permissions thing on the server?

rover on March 10, 2010, 11:23 p.m. Reply

This plugin would make my life so much easier, but I too am having trouble getting it to work with MT5.

I can’t get past the “Create Thumbnail Prototype” on the Thumbnail Prototype page. Looks like javascript references are wonky as it’s pointing to void(0).

Can’t wait to get this working so it can be the icing on the cake of MT5.

Cheers, D

wnv on July 17, 2010, 8:29 p.m. Reply

Having the same problems as rover… I get to the “Create Thumbnail Prototype” page however, when I click on create nothing happens… I am getting the same javascript:void (0) error

Anyone have a clue?

Leave a Comment

Byrne Reese

Byrne Reese was previously the Product Manager of Movable Type at Six Apart, where he had also held positions as the Manager of Platform Technology and Product Manager for TypePad. Byrne is a huge supporter of the Movable Type user and developer community. He dedicates much of his time to promoting and educating people about Movable Type as well as building the tools and plugins for Movable Type that are showcased on Majordojo. He contributes regularly to open source; and he is an advocate for open protocols and standards like Atom and OpenID.

Website: http://profile.typekey.com/byrnereese