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 above line (or the contents of script.js) and execute it either in your URL bar, in the JavaScript console, or via a bookmarklet (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.

You can also populate field values by pasting existing {{CSS image crop}} templates into the import field.

Check

To make sure the generator works properly on your browser, copy the following into the import field 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
}}