Template:CSS image crop: Difference between revisions
From the Super Mario Wiki, the Mario encyclopedia
Jump to navigationJump to search
(Created page with "<includeonly>{{#ifeq:{{{Location|}}}|center|<div class="center">}}<div class="{{#if:{{{Description|}}}|thumb <!-- -->{{#switch:{{{Location|}}} | none | tnone | center = tnone | left | tleft = tleft | right | tright | #default = tright }}|<!-- if no description: -->{{#switch:{{{Location|}}} | none | center | #default = floatnone | left = floatleft | right = floatright}}}}"> {{#if:{{{Description|}}}|<div class="thumbinner" style="width: {{#expr:{{{cWidth}}}+2}}px;">}...") |
mNo edit summary |
||
| (6 intermediate revisions by the same user not shown) | |||
| Line 7: | Line 7: | ||
| none | center | #default = floatnone | | none | center | #default = floatnone | ||
| left = floatleft | | left = floatleft | ||
| right = floatright}}}}"> | | right = floatright}}}}" style="overflow:auto"> | ||
{{#if:{{{Description|}}}|<div class="thumbinner" style="width: {{#expr:{{{cWidth}}}+2}}px | {{#if:{{{Description|}}}|<div class="thumbinner" style="width:{{#expr:{{{cWidth}}}+2}}px">}} | ||
<div {{#if:{{{Description|}}}|class="thumbimage"}} style="width: {{{cWidth}}}px; height: {{{cHeight}}}px; overflow: hidden;"> | <div {{#if:{{{Description|}}}|class="thumbimage"}} style="width:{{{cWidth}}}px;height:{{{cHeight}}}px;overflow:hidden;max-width:none"> | ||
<div style="position: relative; top: -{{{oTop|0}}}px; left: -{{{oLeft|0}}}px; width: {{{bSize}}}px"><!-- | <div style="position:relative;top:-{{{oTop|0}}}px;left:-{{{oLeft|0}}}px;width:{{{bSize}}}px;max-width:none"><!-- | ||
-->{{#if:{{{ImageDiv|}}}|{{{ImageDiv|}}}|<div class="noresize">[[File:{{{Image}}}|{{{bSize}}}px|alt={{{Alt|{{{Description|{{{Image}}}}}}}}}{{#if:{{{Link|}}}|{{!}}link={{{Link}}}}}{{#if:{{{Page|}}}|{{!}}page={{{Page}}}}}]]</div>}}<!-- | -->{{#if:{{{ImageDiv|}}}|{{{ImageDiv|}}}|<div class="noresize">[[File:{{{Image}}}|{{{bSize}}}px|alt={{{Alt|{{{Description|{{{Image}}}}}}}}}{{#if:{{{Link|}}}|{{!}}link={{{Link}}}}}{{#if:{{{Page|}}}|{{!}}page={{{Page}}}}}]]</div>}}<!-- | ||
--></div> | --></div> | ||
| Line 19: | Line 19: | ||
</div> | </div> | ||
</div>{{#ifeq:{{{Location|}}}|center|</div>}}</includeonly><noinclude> | </div>{{#ifeq:{{{Location|}}}|center|</div>}}</includeonly><noinclude> | ||
This template allows images to be selectively cropped without altering the actual image file. | This template allows images to be selectively cropped without altering the actual image file. | ||
== About == | |||
This was created [[MarioWiki:Proposals/Archive/71#Create_a_template_to_crop_images_on-the-fly_without_having_to_tamper_with_the_base_file.27s_dimensions|per proposal]] and is based on the template of the same name from {{iw|tcrf|Template:CSS image crop|The Cutting Room Floor}} and {{iw|commons|Template:CSS image crop|Wikimedia Commons}}. | |||
== Usage == | == Usage == | ||
Latest revision as of 11:15, December 5, 2024
This template allows images to be selectively cropped without altering the actual image file.
About
This was created per proposal and is based on the template of the same name from The Cutting Room Floor and Wikimedia Commons.
Usage
{{CSS image crop
|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).
|magnify-link = The image to be linked by the magnify icon (Use if the Link parameter leads to
something other than the image).
}}
