Template:CSS image crop

Template documentation (view)

---

Usage

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

This template was 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:

• Image 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.
• bSize sets the base image width in pixels, on which the crop will be applied.
• cWidth sets the cropped image width in pixels.
• cHeight sets the cropped image height in pixels.
• oTop is an optional parameter that offsets from the top of the image by the specified number of pixels.
• oLeft is an optional parameter that offsets from the left of the image by the specified number of pixels.
• Location is an optional parameter that determines the image's placement on the page using one of the following positions:
  • left is the default used when description is left blank.
  • right is the default used when blank but a description is provided.
  • center
  • none
• Description is an optional parameter that converts the image to a thumbnail and uses the provided text as the thumbnail's caption.
• Link is an optional parameter that sets the page the image will link to when selected.
• Alt is an optional parameter that sets alt text for the image.
• magnify-link 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

{{CSS image crop
|Image         = Tom Nook NH.png
|bSize         = 150
|cWidth        = 150
|cHeight       = 123
|Location      = left
|Description   = Cropped Tom Nook
}}

Full-size Tom Nook

Tom Nook cropped to display only his head

{{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.
}}

Full-size icon. The image contains blank space on the left and right sides.

Cropped icon with blank space removed. Offsets have been used to position the image within the crop.