Rosie: Created page with "==Usage==

 {{CSS image crop |Image         =  |bSize         =  |cWidth        =  |cHeight       =  |oTop          =  |oLeft         =  |Location      =  |Description   =  |Link          =  |Alt           =  |Page          =  |magnify-link  =  }}

This template was {{wp|Template:CSS image crop|adapted from Wikipedia}} and is intended to be used when it is desired to display a cropped version of an image file. This reduces the need to upload cropped versions o..."

2025-09-08T11:53:32Z

Created page with "==Usage== <pre> {{CSS image crop |Image = |bSize = |cWidth = |cHeight = |oTop = |oLeft = |Location = |Description = |Link = |Alt = |Page = |magnify-link = }} </pre> This template was {{wp|Template:CSS image crop|adapted from Wikipedia}} and is intended to be used when it is desired to display a cropped version of an image file. This reduces the need to upload cropped versions o..."

New page

==Usage==
<pre>
{{CSS image crop
|Image =
|bSize =
|cWidth =
|cHeight =
|oTop =
|oLeft =
|Location =
|Description =
|Link =
|Alt =
|Page =
|magnify-link =
}}
</pre>

This template was {{wp|Template:CSS image crop|adapted from Wikipedia}} and is intended to be used when it is desired to display a cropped version of an image file. This reduces the need to upload cropped versions of existing images, as the cropped display can be achieved using CSS through this template.

The following parameters control the functionality of this template:
* <code>Image</code> sets the image to appear in the template. This should be the filename with extension suffix, but omitting the "File:" prefix, e.g. ''Example.jpg''.
* <code>bSize</code> sets the base image width in pixels, on which the crop will be applied.
* <code>cWidth</code> sets the cropped image width in pixels.
* <code>cHeight</code> sets the cropped image height in pixels.
* <code>oTop</code> is an optional parameter that offsets from the top of the image by the specified number of pixels.
* <code>oLeft</code> is an optional parameter that offsets from the left of the image by the specified number of pixels.
* <code>Location</code> is an optional parameter that determines the image's placement on the page using one of the following positions:
**<code>left</code> is the default used when description is left blank.
**<code>right</code> is the default used when blank but a description is provided.
**<code>center</code>
**<code>none</code>
* <code>Description</code> is an optional parameter that converts the image to a thumbnail and uses the provided text as the thumbnail's caption.
* <code>Link</code> is an optional parameter that sets the page the image will link to when selected.
* <code>Alt</code> is an optional parameter that sets alt text for the image.
* <code>magnify-link</code> is an optional parameter that sets the image file the magnify icon will link to when selected.

Note that you may need to use offsets for the crop to display properly if the image you are using has significant empty space.

===Example===
<pre>
{{CSS image crop
|Image = Tom Nook NH.png
|bSize = 150
|cWidth = 150
|cHeight = 123
|Location = left
|Description = Cropped Tom Nook
}}
</pre>
[[File:Tom Nook NH.png|thumb|left|150px|Full-size Tom Nook]]

{{CSS image crop
|Image = Tom Nook NH.png
|bSize = 150
|cWidth = 150
|cHeight = 123
|Location = left
|Description = Tom Nook cropped to display only his head
}}

{{clear}}

<pre>
{{CSS image crop
|Image = Emotion Surprise NH Icon.png
|bSize = 128
|cWidth = 45
|cHeight = 120
|oLeft = 40
|Location = left
|Description = Cropped icon with blank space removed. Offsets have been used to position the image within the crop.
}}
</pre>

[[File:Emotion Surprise NH Icon.png|thumb|left|128px|Full-size icon. The image contains blank space on the left and right sides.]]

{{CSS image crop
|Image = Emotion Surprise NH Icon.png
|bSize = 128
|cWidth = 45
|cHeight = 120
|oLeft = 40
|Location = left
|Description = Cropped icon with blank space removed. Offsets have been used to position the image within the crop.
}}

Template:CSS image crop/doc - Revision history