Template:Easy CSS image crop/doc

This is intended to be an easier way to prepare CSS image crop crops, making it more intuitive and easier to guess what you'll get. It also allows for more predictable scaling: Want to make the image bigger after setting up a crop? Just change desired_width and the rest will follow.

Basic parameters

can be left out if the default of 220 pixels wide is acceptable. Any of the crop percentage parameters can be left out if you don't want to crop from that side, but if you're not using at least one of them, why are you using this template? All crop parameters default to 0, which means nothing is cropped from that side. is optional, but best practice is to include it.

In infoboxes, add the line:

This causes it to behave as expected in an infobox.

For an image that renders as a thumbnail

is optional, but best practice.

Annotated image
Not currently supported here, due to Module:ImageRatio only accepting the base filename. Please continue using CSS image crop if you want to use it with an annotated image.

Examples
Base image:



Cropped, but at the same width:

Code for the crop:

This crops 10% from the left, 10% from the right, 5% from the top, and nothing from the bottom, and keeps the image 220 px wide. Since it's the same width, but bits have been cropped, this gives a "zoomed in" effect, which is generally what you want in articles. Note that, since it has no value,  could have been left out. We left out ; it is optional, but, as it's good practice, we'll use it in other examples.

If we want to have this as a standard in-article thumbnail (with a description and the box around it), we can use:

Which renders as seen to the right. We could also have used  instead of   for the same effect:

This is because CSS image crop was created with certain idiosyncratic names for the parameters that aren't standard, but it's also existed for over a decade. Also, for further backwards compatibility, note that the captitalised forms of the shared parameters (Image, Location, Description, Link, Alt, and Page) will all still work with this template.

Comparison with CSS image crop
One example used in the documentation for the old template (which is, in fact, called by this one after doing all the necessary calculations) is isolating a water drop from a photo. The original file:



Is cropped to this:

Easy CSS image crop can do this as well. Here's the code:

In practice, you might not care about it being quite that precise. However, the big advantage of Easy CSS image crop is that once you're happy with your crop, simply changing  can scale your crop however you want.

This is much, much harder with {{tl|CSS image crop: You have to calculate a scaling ratio and apply it to every parameter.

Admittedly, cropping a tiny bit out of a large image with any sort of CSS image crop is very inefficient: It still has to load a thumbnail big enough to crop that tiny bit from. In this case, it's loading a 400px wide image for the first, smaller example of the isolated water droplet, and a 900px wide image for the second. Not ideal, and probably a case where using CropTool would be much more sensible! However, for more sensible crops, this can be a major boon, as it allows MediaViewer to pull up the missing context when the image is clicked on, showing the viewer the whole image, as well as linking to a file that's arguably more useful to reusers of our content (They can crop images themselves, for their specific usage.)

{{Sandbox other|

}}