Difference between revisions of "Template:CSS image crop/doc"

From blackwiki
Jump to navigation Jump to search
imported>Codehydro
(clarify purpose of Link/magnify-link; note about using Annotated image)
imported>Rfassbind
(amended the example - previous version was not easy to grasp without knowing how the original image looks like.)
Line 25: Line 25:
  
 
===Examples===
 
===Examples===
Dew image with center formatting:  
+
 
 +
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
 
{{CSS image crop
 
|Image = Dew on grass Luc Viatour.jpg
 
|Image = Dew on grass Luc Viatour.jpg
Line 33: Line 38:
 
|oTop = 180
 
|oTop = 180
 
|oLeft = 60
 
|oLeft = 60
|Location = center
 
|Description = A drop of dew on grass (focus on the drop)
 
 
}}
 
}}
 +
</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}}
  
 
<pre>{{CSS image crop
 
<pre>{{CSS image crop
Line 44: Line 56:
 
|oTop = 180
 
|oTop = 180
 
|oLeft = 60
 
|oLeft = 60
|Location = center
 
|Description = A drop of dew on grass (focus on the drop)
 
 
}}</pre>
 
}}</pre>
  
You may also omit the Location and Description parameters to get:
+
In addition, the cropped image can have a caption-text and be positioned on the page:
 +
* <code>Location=</code> to positon (''center, right, left, none'')
 +
* <code>Description=</code> to add an caption text
 
{{CSS image crop
 
{{CSS image crop
 
|Image = Dew on grass Luc Viatour.jpg
 
|Image = Dew on grass Luc Viatour.jpg
Line 56: Line 68:
 
|oTop = 180
 
|oTop = 180
 
|oLeft = 60
 
|oLeft = 60
 +
|Location = center
 +
|Description = A drop of dew on grass (focus on the drop)
 
}}
 
}}
 
<pre>{{CSS image crop
 
<pre>{{CSS image crop
Line 64: Line 78:
 
|oTop = 180
 
|oTop = 180
 
|oLeft = 60
 
|oLeft = 60
 +
|Location = center
 +
|Description = A drop of dew on grass (focus on the drop)
 
}}</pre>
 
}}</pre>
  

Revision as of 23:26, 23 December 2014

{{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).
|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).
|Alt           = The alt text for the image
}}

Examples

Create a cropped image of a single water drop:

Thumbnail of the original file
Dew on grass Luc Viatour.jpg
  • Offset: oTop and oLeft define the upper left corner of the cropped image
  • Crop: cWidth and cHeight define 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 positon (center, right, left, none)
  • Description= to add an caption text
A drop of dew on grass (focus on the drop)
A drop of dew on grass (focus on the drop)
{{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