Difference between revisions of "Template:CSS image crop/doc"
Jump to navigation
Jump to search
imported>Edokter (Page =) |
imported>GoingBatty m (General fixes, typo(s) fixed: positon → position, etc → etc. using AWB (11376)) |
||
| Line 3: | Line 3: | ||
{{tl|{{BASEPAGENAME}}}} 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. | {{tl|{{BASEPAGENAME}}}} 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. | + | 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=== | ===Usage=== | ||
| Line 62: | Line 62: | ||
In addition, the cropped image can have a caption-text and be positioned on the page: | In addition, the cropped image can have a caption-text and be positioned on the page: | ||
| − | * <code>Location=</code> to | + | * <code>Location=</code> to position (''center, right, left, none'') |
* <code>Description=</code> to add a text to the caption | * <code>Description=</code> to add a text to the caption | ||
{{CSS image crop | {{CSS image crop | ||
| Line 88: | Line 88: | ||
* {{tl|Annotated image}} | * {{tl|Annotated image}} | ||
** [[Template:Annotated image/doc/Samples#Cropping an image|with empty "annotations" parameter]] | ** [[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>{{#ifeq:{{SUBPAGENAME}}|sandbox | | <includeonly>{{#ifeq:{{SUBPAGENAME}}|sandbox | | ||
Revision as of 20:22, 5 September 2015
| 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 file, or may accept {{Annotated 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)
|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).
|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).
}}
Examples
Create a cropped image of a single water drop:
- Offset:
oTopandoLeftdefine the upper left corner of the cropped image - Crop:
cWidthandcHeightdefine the size of the cropped image - Base Size: Offset and Crop are calculated as if the original file had the width
bSize
{{CSS image crop
|Image = Dew on grass Luc Viatour.jpg
|bSize = 400
|cWidth = 100
|cHeight = 100
|oTop = 180
|oLeft = 60
}}
In addition, the cropped image can have a caption-text and be positioned on the page:
Location=to position (center, right, left, none)Description=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)
}}
See also
- {{Annotated image}}
- with empty "annotations" parameter
- {{IrinotecanPathway WP229}} (as used in article Multidrug resistance-associated protein 2), an example of how CSS Image Crop can combine with Annotated Image.
