w>Jonesey95: rm old note; left and right work fine

2026-05-27T13:37:29Z

rm old note; left and right work fine

New page

{{Documentation subpage}}
{{High-use|demo={{ROOTPAGENAME}}}}

{{hatnote|See also [[Template:Easy CSS image crop]], which simplifies the interface for this template a bit.}}

{{tl|{{BASEPAGENAME}}}} creates a crop of an image inline for previewing the look and feel of a page, or for linking to full images when a slight crop is preferred in an article, but the full image is more encyclopaedic in general. Where only a small section of the image is used after the crop, it's best to upload the crop as a new file, to avoid sending the extra image data to users.

==Usage==
<syntaxhighlight lang="wikitext">
{{CSS image crop
|Image = The Name of the image file, or may accept {{Annotated image}}.
|bSize = The Base Image width in pixels (the image we are cropping on)
|cWidth = Crop Image Width in pixels
|cHeight = Crop image Height in pixels
|oTop = Offset Top in pixels, optional and defaults to 0 when omitted
|oLeft = Offset Left in pixels, optional and defaults to 0 when omitted
|Location = 'right', 'left', 'center' or 'none'. Determines placement of the image on the page
Defaults to 'right' when description is provided (as is default for thumb images)
When description is blank, location on left (as is default for non-thumbs)
|Description = Description (will render out using thumbnail class)
|Link = Name of an article to be linked by clicking on the image (omit unless there is a
good reason to link to an article instead of the image).
|Alt = The alt text for the image.
|Page = The page of the file, if there are multiple pages (such as pdf files).
|Class = The MediaWiki class, if needed. Useful for adding skin-invert for dark mode.
|magnify-link = The image to be linked by the magnify icon (Use if the Image parameter is set to
{{Annotated image}} or the Link parameter leads to something other than the image).
}}
</syntaxhighlight>

==Examples==
Create a cropped image of a single water drop:

[[File:Dew on grass Luc Viatour.jpg|thumb|400px|left|Thumbnail of the '''original file''']]

<div style="float: left; width: 120px; margin: 180px 0 0 30px;">
{{CSS image crop
|Image = Dew on grass Luc Viatour.jpg
|bSize = 400
|cWidth = 100
|cHeight = 100
|oTop = 180
|oLeft = 60
}}
</div>

<div style="float: left; width: 300px; margin-top: 150px; font-size: 0.95em;">
*'''Offset''': <code>oTop</code> and <code>oLeft</code> define the upper left corner of the cropped image
*'''Crop''': <code>cWidth</code> and <code>cHeight</code> define the size of the cropped image
*'''Base Size''': Offset and Crop are calculated as if the original file had the width <code>bSize</code>
</div>

{{clear}}

<syntaxhighlight lang="wikitext">{{CSS image crop
|Image = Dew on grass Luc Viatour.jpg
|bSize = 400
|cWidth = 100
|cHeight = 100
|oTop = 180
|oLeft = 60
}}</syntaxhighlight>

In addition, the cropped image can have a caption-text and be positioned on the page:
* <code>Location=</code> to position (''center, right, left, none'')
* <code>Description=</code> to add a text to the caption
{{CSS image crop
|Image = Dew on grass Luc Viatour.jpg
|bSize = 400
|cWidth = 100
|cHeight = 100
|oTop = 180
|oLeft = 60
|Location = center
|Description = A drop of dew on grass (focus on the drop)
}}
<syntaxhighlight lang="wikitext">{{CSS image crop
|Image = Dew on grass Luc Viatour.jpg
|bSize = 400
|cWidth = 100
|cHeight = 100
|oTop = 180
|oLeft = 60
|Location = center
|Description = A drop of dew on grass (focus on the drop)
}}</syntaxhighlight>

Groups of cropped images can be arranged in an [[Template:Image frame|image frame]]:
{{Image frame|align=center|border=no|caption=Cropped images in a frame|content=
{{stack
|{{CSS image crop
|Image = Aaron_Burden_2017-05-03_(Unsplash).jpg
|bSize = 400
|cWidth = 100
|cHeight = 100
|oTop = 180
|oLeft = 60
}}
|{{CSS image crop
|Image = Dew on Lemon Grass - Shola Gardens - Kotagiri.jpg
|bSize = 400
|cWidth = 100
|cHeight = 100
|oTop = 180
|oLeft = 60
}}
}}
{{stack
|{{CSS image crop
|Image = Dew on grass Luc Viatour.jpg
|bSize = 400
|cWidth = 100
|cHeight = 100
|oTop = 180
|oLeft = 60
}}
|{{CSS image crop
|Image = Dew and grass - Flickr - Stiller Beobachter.jpg
|bSize = 400
|cWidth = 100
|cHeight = 100
|oTop = 180
|oLeft = 60
}}
}}
}}
<syntaxhighlight lang="wikitext">
{{Image frame|align=center|border=no|caption=Cropped images in a frame|content=
{{stack
|{{CSS image crop
|Image = Aaron_Burden_2017-05-03_(Unsplash).jpg
|bSize = 400
|cWidth = 100
|cHeight = 100
|oTop = 180
|oLeft = 60
}}
|{{CSS image crop
|Image = Dew on Lemon Grass - Shola Gardens - Kotagiri.jpg
|bSize = 400
|cWidth = 100
|cHeight = 100
|oTop = 180
|oLeft = 60
}}
}}
{{stack
|{{CSS image crop
|Image = Dew on grass Luc Viatour.jpg
|bSize = 400
|cWidth = 100
|cHeight = 100
|oTop = 180
|oLeft = 60
}}
|{{CSS image crop
|Image = Dew and grass - Flickr - Stiller Beobachter.jpg
|bSize = 400
|cWidth = 100
|cHeight = 100
|oTop = 180
|oLeft = 60
}}
}}
}}
</syntaxhighlight>

==Tracking categories==
* {{Category link with count|CSS image crop using invalid parameters}} - Uses of this template with invalid parameters

==Scripts==
The user script [[User:BrandonXLF/CSSImageCrop]] can be used to generate code to use this template with an interactive UI.

==See also==
* {{tl|Easy CSS image crop}}, which simplifies the interface for this template a bit
* {{tl|Show SVG}}, which display SVG files from source, including animations
* {{tl|Annotated image}}
** [[Template:Annotated image/doc/Samples#Cropping an image|with empty "annotations" parameter]]
** {{tl|IrinotecanPathway WP229}} (as used in article [[Multidrug resistance-associated protein 2]]), an example of how CSS Image Crop can combine with Annotated Image.

<includeonly>{{Sandbox other|
| 
[[Category:Image formatting and function templates]]
}}</includeonly>

Template:CSS image crop/doc - Revision history

w>Jonesey95: rm old note; left and right work fine