User:Codehydro/Auto CSS image crop

This tool is designed to help editors use {{CSS image crop}} to crop images.

[If installed, template generator form should replace this text]

Installation

To implement this, add this to your common.js page (or any skin works fine): importScript('User:Codehydro/Auto CSS image crop/script.js'); Alternatively, you may simply copy the script from User:Codehydro/Auto CSS image crop/script.js and execute it either in your URL bar, in the JavaScript console, or via a bookmark (just Google it).

Usage

Enter the file name (e.g. Dew on grass Luc Viatour.jpg) and a bSize value. Once both of these are entered press tab or click outside of the form and a preview of your image will automatically appear. Adjust cWidth/cHeight in the form to change how the image is cropped. Change oTop/oLeft or use the scroll bars to position your image. You may change the bSize and the script will resize the image while preserving the crop position. The source code will automatically be generated below the input.

When in the cWidth, cHeight, oTop, and oLeft fields, you can press the up/down arrow keys to increase/decrease the field's value by 1% of bSize.

Check

To make sure the generator works properly on your browser, try entering the following values into the form and see if it looks just like the image pictured above:

{{CSS image crop
|Image = Dew on grass Luc Viatour.jpg
|bSize = 400
|cWidth = 100
|cHeight = 100
|oTop = 180
|oLeft = 60
}}