Difference between revisions of "Template:CSS image crop"
m (Can we just copy in the docs like that?) |
(Removed many things that mean nothing on *this* Wiki, that had been copied from (presumably) big-mama Wikipedia itself. Unless implementing image frames/etc, no reason to mention them. The "Hatnote" could be emulated by another infobox/notice, if needed.) |
||
| Line 23: | Line 23: | ||
</div>{{#switch:{{{Location|{{{Align|}}}}}} | </div>{{#switch:{{{Location|{{{Align|}}}}}} | ||
| center | centre = </div>}}{{#ifeq:1|{{ifnumber|{{{cWidth|}}}{{{cHeight|}}}{{{oTop|}}}{{{oLeft|}}}{{{bSize|}}}}}||[[Category:CSS image crop using invalid parameters]]}}}}<noinclude> | | center | centre = </div>}}{{#ifeq:1|{{ifnumber|{{{cWidth|}}}{{{cHeight|}}}{{{oTop|}}}{{{oLeft|}}}{{{bSize|}}}}}||[[Category:CSS image crop using invalid parameters]]}}}}<noinclude> | ||
| − | + | <!-- THIS PROBABLY NOT NEEDED, BUT CHANGE TO HATNOTE-EQUIVALENT IF STILL WANTED {{hatnote|See also [[Template:Easy CSS image crop]], which simplifies the interface for this template a bit.}} --> | |
| − | |||
| − | |||
| − | {{hatnote|See also [[Template:Easy CSS image crop]], which simplifies the interface for this template a bit.}} | ||
{{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. | {{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. | ||
| Line 33: | Line 30: | ||
==Usage== | ==Usage== | ||
| − | + | Can be given the following named parameters: | |
| − | + | *Image = The Name of the image file<!--, or may accept {{Annotated image}}-->. | |
| − | + | *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). | |
| − | + | *Class = The MediaWiki class, if needed. Useful for adding skin-invert for dark mode. | |
| − | + | *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). | |
| − | + | ||
| − | |||
| − | |||
| − | {{Annotated image}} or the Link parameter leads to something other than the image). | ||
| − | |||
| − | |||
==Examples== | ==Examples== | ||
| Line 79: | Line 71: | ||
{{clear}} | {{clear}} | ||
| − | + | {{CSS image crop | |
|Image = Dew on grass Luc Viatour.jpg | |Image = Dew on grass Luc Viatour.jpg | ||
|bSize = 400 | |bSize = 400 | ||
| Line 86: | Line 78: | ||
|oTop = 180 | |oTop = 180 | ||
|oLeft = 60 | |oLeft = 60 | ||
| − | }} | + | }} |
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: | ||
| Line 101: | Line 93: | ||
|Description = A drop of dew on grass (focus on the drop) | |Description = A drop of dew on grass (focus on the drop) | ||
}} | }} | ||
| − | + | {{CSS image crop | |
|Image = Dew on grass Luc Viatour.jpg | |Image = Dew on grass Luc Viatour.jpg | ||
|bSize = 400 | |bSize = 400 | ||
| Line 110: | Line 102: | ||
|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) | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
}} | }} | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
</noinclude> | </noinclude> | ||
Latest revision as of 19:49, 13 January 2026
{{CSS image crop}} 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.
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[edit]
Can be given the following named parameters:
- Image = The Name of the image file.
- 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).
- Class = The MediaWiki class, if needed. Useful for adding skin-invert for dark mode.
- magnify-link = The image to be linked by the magnify icon (Use if the Link parameter leads to something other than the image).
Examples[edit]
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
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
