Template:Easy CSS image crop
 | This template uses Lua: |
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.
<syntaxhighlight lang="wikitext">
<div class="thumbinner" style="width: Expression error: Unrecognized word "how".px;"> <div class="thumbimage" style="width: How wide the image should be after cropping. Defaults to 220.px; height: Expression error: Unexpected < operator.px; overflow: hidden;">
<div style="position: relative; top: -Expression error: Unexpected < operator.px; left: -Expression error: Unexpected < operator.px; width: Expression error: Unrecognized word "how".px">Do not include File: at the start. Just the base page name.|Expression error: Unrecognized word "how".px|alt=The alt text for the image.|link=Name of an article to be linked by clicking on the image (omit unless there is agood reason to link to an article instead of the image).|page=The page of the file, if there are multiple pages (such as pdf files).]]
</syntaxhighlight>
Basic parameters
<syntaxhighlight lang="wikitext">
<div style="width: How wide the image should be after cropping. Defaults to 220.px; height: Expression error: Unexpected < operator.px; overflow: hidden;">
<div style="position: relative; top: -Expression error: Unexpected < operator.px; left: -Expression error: Unexpected < operator.px; width: Expression error: Unrecognized word "how".px">
</syntaxhighlight>
desired_width 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. alt is optional, but best practice is to include it.
In infoboxes, add the line:
<syntaxhighlight lang="wikitext"> |align = center </syntaxhighlight>
This causes it to behave as expected in an infobox.
For an image that renders as a thumbnail
<syntaxhighlight lang="wikitext">
<div class="thumbinner" style="width: Expression error: Unrecognized word "how".px;"> <div class="thumbimage" style="width: How wide the image should be after cropping. Defaults to 220.px; height: Expression error: Unexpected < operator.px; overflow: hidden;">
<div style="position: relative; top: -Expression error: Unexpected < operator.px; left: -Expression error: Unexpected < operator.px; width: Expression error: Unrecognized word "how".px"></syntaxhighlight>
alt 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:
<syntaxhighlight lang="wikitext">
</syntaxhighlight>
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, crop_bottom_perc= could have been left out. We left out alt=; 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:
<syntaxhighlight lang="wikitext">
</syntaxhighlight>
Which renders as seen to the right. We could also have used |description = instead of |caption = for the same effect:
<syntaxhighlight lang="wikitext">
</syntaxhighlight>
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:
<syntaxhighlight lang="wikitext">
</syntaxhighlight>
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 |desired_width = can scale your crop however you want.
<syntaxhighlight lang="wikitext">
</syntaxhighlight>
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.)