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

From CWCki
Jump to navigation Jump to search
m
 
(5 intermediate revisions by the same user not shown)
Line 1: Line 1:
{{tl|{{BASEPAGENAME}}}} creates a crop of an image inline for previewing the look and feel of a page, or for linking to full images when a slight crop is preferred in an article, but the full image is more encyclopaedic in general. Where only a small section of the image is used after the crop, it's best to upload the crop as a new file, to avoid sending the extra image data to users.  
{{Documentation subpage}}
{{tl|{{BASEPAGENAME}}}} creates a crop of an image inline for previewing the look and feel of a page, or for linking to full images when a slight crop is preferred in an article, but the full image is more encyclopedic in general. Where only a small section of the image is used after the crop, it's best to upload the crop as a new file, to avoid sending the extra image data to users.  


===Usage===
===Usage===
Line 20: Line 21:
}}
}}
</pre>
</pre>
<div style="float: left; width: 300px;">
 
*'''Offset''': <code>oTop</code> and <code>oLeft</code> define the upper left corner of the cropped image
*'''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
*'''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>
*'''Base Size''': Offset and Crop are calculated as if the original file had the width <code>bSize</code>
</div>


===Examples===
===Examples===
Line 30: Line 30:
Create a cropped image of only Sonic from the Sonic Vs Sonichu cover.
Create a cropped image of only Sonic from the Sonic Vs Sonichu cover.


[[File:SonicVsSonichu.jpg|thumb|250px|left|Thumbnail of the '''original file''']]
[[File:SonicVsSonichu.jpg|thumb|250px|left|Thumbnail of the original file.]]


<div style="float: left; width: 120px; margin: 180px 0 0 30px;">
<div style="float: left; width: 150px; margin: 0 0 0 20px;">
{{CSS image crop
{{CSS image crop
|Image = SonicVsSonichu.jpg
|Image = SonicVsSonichu.jpg
|bSize = 400
|bSize = 400
|cWidth = 110
|cWidth = 150
|cHeight = 180
|cHeight = 170
|oTop = 220
|oTop = 230
|oLeft = 180
|oLeft = 180
|Description = One of Chris's earliest drawings of Sonic.
|Description = One of Chris's earliest drawings of Sonic.
Line 45: Line 45:


{{clear}}
{{clear}}
In addition, the cropped image can have a caption-text and be positioned on the page:
* <code>Location=</code> to position (''center, right, left, none'')
* <code>Description=</code> to add a text to the caption

Latest revision as of 12:40, 30 September 2021

{{CSS image crop}} (Usage) creates a crop of an image inline for previewing the look and feel of a page, or for linking to full images when a slight crop is preferred in an article, but the full image is more encyclopedic in general. Where only a small section of the image is used after the crop, it's best to upload the crop as a new file, to avoid sending the extra image data to users.

Usage

{{CSS image crop
|Image         = The name of the image file. Don't include the 'File:' part.
|bSize         = The Base Image width in pixels (the image we are cropping on)
|cWidth        = Crop Image Width in pixels
|cHeight       = Crop image Height in pixels
|oTop          = Offset Top in pixels, optional and defaults to 0 when omitted
|oLeft         = Offset Left in pixels, optional and defaults to 0 when omitted
|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).
}}
  • 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

Examples

Create a cropped image of only Sonic from the Sonic Vs Sonichu cover.

Thumbnail of the original file.
One of Chris's earliest drawings of Sonic.
One of Chris's earliest drawings of Sonic.