Difference between revisions of "Template:CSS image crop/doc"
imported>Edokter m (→Examples) |
imported>Edokter m |
||
| Line 8: | Line 8: | ||
<pre> | <pre> | ||
{{CSS image crop | {{CSS image crop | ||
| − | |Image = The Name of the image | + | |Image = The Name of the image |
| − | |bSize = The Base Image size (the image we are cropping on) | + | |bSize = The Base Image size (the image we are cropping on) |
|cWidth = Crop Image Width in pixels | |cWidth = Crop Image Width in pixels | ||
|cHeight = Crop image Height in pixels | |cHeight = Crop image Height in pixels | ||
|oTop = Offset Top in pixels | |oTop = Offset Top in pixels | ||
|oLeft = Offset Left in pixels | |oLeft = Offset Left in pixels | ||
| − | |Location = 'right', 'left', 'center' or 'none'. Determines placement of the image on the page | + | |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) | + | 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) | + | When description is blank, location on left (as is default for non-thumbs) |
| − | |Description = Description (will render out using thumbnail class) | + | |Description = Description (will render out using thumbnail class) |
}} | }} | ||
</pre> | </pre> | ||
| Line 33: | Line 33: | ||
|oLeft = 60 | |oLeft = 60 | ||
|Location = center | |Location = center | ||
| − | |Description = A drop of dew on grass (focus on the drop) | + | |Description = A drop of dew on grass (focus on the drop) |
}} | }} | ||
| Line 44: | Line 44: | ||
|oLeft = 60 | |oLeft = 60 | ||
|Location = center | |Location = center | ||
| − | |Description = A drop of dew on grass (focus on the drop) | + | |Description = A drop of dew on grass (focus on the drop) |
}}</pre> | }}</pre> | ||
Revision as of 11:53, 6 December 2014
| This is a documentation subpage for Template:CSS image crop. It contains usage information, categories and other content that is not part of the original template page. |
{{CSS image crop}} creates a crop of an image inline for previewing the look and feel of a page. If the edit is committed these crops should be replaced with server side cropped images to avoid sending extra image data to people.
Note: There was a previous glitch for which some people had to use "tleft" "tright" etc as a workaround because "left" and "right" did not work. As a result, to avoid having to fix all those pages that used the workaround, the template has been designed to function properly regardless of whether tright or right is used. See template talk for details.
Usage
{{CSS image crop
|Image = The Name of the image
|bSize = The Base Image size (the image we are cropping on)
|cWidth = Crop Image Width in pixels
|cHeight = Crop image Height in pixels
|oTop = Offset Top in pixels
|oLeft = Offset Left in pixels
|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)
}}
By default the magnify icon will lead to the image file. To override this choice, use |magnify-link=pagename.
Examples
Dew image with center formatting:
{{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)
}}
You may also omit the Location and Description parameters to get:
{{CSS image crop
|Image = Dew on grass Luc Viatour.jpg
|bSize = 400
|cWidth = 100
|cHeight = 100
|oTop = 180
|oLeft = 60
}}
See also
