|
This template was originally from page Template:Image in Chinese Moegirlpedia, and the license might be different from English Moegirlpedia. The contents might differ after being modified by different users on both sides. For more information, see Moegirlpedia:Copyrights.
|
This template for using and formatting images.
The orange part is the whole image (in the img tag), the sky blue part (in the outer div tag) is the actual display and occupied space.
Well, the inner one is called the outer frame, the outer one is called the inner frame. Because of cropping, the inner frame become larger than the outer frame. Most values of the template parameters can be negative.
Outer frame
Original design codeOriginal design code
<div style="position:relative;display:inline-block;">
<div style="position:absolute;top:0;left0;max-width:1000px !important;width:260px;height:430px;overflow:hidden;">
<img src="{{filepath: 千恋万花_从雨A01_害羞.png}}" width="480px" style="position:absolute;left:-130px;top:-130px;"/>
</div>
</div>
Parameters descriptionParameters description
- The Chinese in parentheses is the alias of names of parameters.
- display (显示类型): Determines the display type of the outermost div, block as default. The display CSS property
- type (种类): Template invocation type, none as default. Valid values include tall, wide, box, outer and div. tall and wide can add scrollbars to prevent overflow of images that are too wide or high. They can be used together with cropping-related parameters. outer supports external images. box is just for letting you add captions (basically useless). div allows the use of HTML tags in parameter pic / img to construct images or other elements, which is more customizable.
- phase (段落): none as default, and valid value is div. It can be compatible with textboxes, so that large pieces of text can show with scrollbars.
- desc: Add texts, caption as default. It can add a border in 1px, solid line, grey (#ccc) at the outermost div. It only works when type is box, outer, tall or wide.
- capht: Determines the position and height of the text in desc, the text is below the image when it's positive, above when negative. The unit is pixels (px). The default is a 25px height text paragraph below the image. It only works when type is box, outer, tall or wide. NOTE: Do NOT use with parameter v.
- caplink: Adds an internal link in the caption which links to the image URL, external links are not supported. It only determines the text it displays, the link will be automatically complemented.
- link: Adds an internal link, external links are not supported.
- pic / img (图片): Name of the image, null as default. type should be outer when the image is external. Strange default value.
- img-css: Directly declares styles of the image. Not recommend to use unless under special circumstances.
- pos: Declares the positioning behaviour of the entire element, absolute as default.
- When the value is not absolute, the size of the image will be set automatically, but it will lose all positioning behaviour, sizes of extra declared elements and overflow behaviour patterns.
- The overflow behaviour will inherit the behaviour of parent element, or, the outermost container. You can use parameter style to set overflow behaviour of the outermost container.
- thumb: Changes image source, uses compressed images. This can make large images to load faster. no as default, valid value is yes.
- rads: Simplified border-radius CSS property, 0 as default with no unit. It has the highest priority and overrides all child parameters.
- rad1: Equivalent to border-top-left-radius CSS property, 0 as default with unit px. You can specify other units (e.g.: %) by using rad-dt or rad1-dt.
- rad2: Equivalent to border-top-right-radius CSS property, 0 as default with unit px. You can specify other units (e.g.: %) by using rad-dt or rad2-dt.
- rad3: Equivalent to border-bottom-right-radius CSS property, 0 as default with unit px. You can specify other units (e.g.: %) by using rad-dt or rad3-dt.
- rad4: Equivalent to border-bottom-left-radius CSS property, 0 as default with unit px. You can specify other units (e.g.: %) by using rad-dt or rad4-dt.
- radius: Default of border-radius CSS property, 0 as default with unit px. 4 corners have the same value. It can be overidden by more detailed parameters rad1~rad4.
- rad-dt：Declares the unit of border-radius CSS property, px as default, which is also the default unit of parameters rad1~4 and radius. It can be overidden by more detailed parameters rad1-dt~rad4-dt.
- shadow: Simplified box-shadow CSS property.
- 阴影粗细: Specifies the offset of shadow, 0 as default with unit px. It can be overidden by more detailed parameters 左阴影粗细, 上阴影粗细, 右阴影粗细 and 下阴影粗细.
- 模糊: Specifies the blur of shadow, 0 as default with unit px. It can be overidden by more detailed parameters 左模糊, 上模糊, 右模糊 and 下模糊.
- 阴影色: Specifies the color of shadow, no default value. It can be overriden by more detailed parameters 左阴影色, 上阴影色, 右阴影色 and 下阴影色.
- 阴影模式: Specifies the mode of shadow, inset as default.
- NOTE: The unit of the following paramters is pixels (px), no extra declaration is required, the use of percentages is not supported.
- wd (宽): Determines the width of image, 0 as default. It directly determined the scaling of image and initial widths of inner and outer frames. The effect of the value on the outer frame width will be cropped by parameter clip-l and clip-r.
- ht (高): Determines the height of image, 0 as default. It determines initial height of outer frame. The effect of the value on the inner frame height will be cropped by parameter clip-t and clip-b.
- k (宽高比): Determines the aspect ratio of outer frame, 0 as default. It only works when ht is 0. ht = wd * k. Feels weird.
- width: Determines the width of outer frame, 0 as default. Sprites compatibility mode.
- height: Determines the height of outer frame, 0 as default. Sprites compatibility mode.
- x: Determines the x-axis offset of inner frame, 0 as default. Sprites compatibility mode.
- y: Determines the y-axis offset of inner frame, 0 as default. Sprites compatibility mode.
- resize (缩放): Sets the actual scaling of image. It overrides the present scaling of image specified by parameter wd. Sprites compatibility mode.
- When using x-axis scrollbar, you should use resize to set the actual scaling of image. This is important.
- clip-l (左): Determines the distance of cropping from the left side of outer frame to the left side of inner frame, 0 as default.
- clip-t (上): Determines the distance of cropping from the upper side of outer frame to the upper side of inner frame, 0 as default.
- clip-r (右): Determines the distance of cropping from the right side of outer frame to the right side of inner frame, 0 as default.
- clip-b (下): Determines the distance of cropping from the lower side of outer frame to the lower side of inner frame, 0 as default.
- h (横): Determines the x-axis offset of outer frame, 0 as default.
- v (纵): Determines the y-axis offset of outer frame, 0 as default.
- style (样式): Adds styles to the outermost div. Default styles are:
display:inline-block; width:wd; height:ht; position:relative;. Do NOT override these value unless under special circumstances. - NOTE: The following parameters are for special effects and simplification.
- iflink: Detects specific effects on specific pages. Currently only supports offsets, crop size resetting is not supported. Valid value is existing pages on Moegirlpedia. Note that pages with same name but in different namespaces are regarded as the same page. Meanwhile, it will add link to the page, and the link can be overriden by parameter link, when link is set to
null, disable the link.- iflink-x: Determines the specific value of parameter x on the page iflink declared.
- iflink-y: Determines the specific value of parameter y on the page iflink declared.
- iflink-h: Determines the specific value of parameter h on the page iflink declared.
- iflink-v: Determines the specific value of parameter v on the page iflink declared.
- iflink+x: Determines the offset value of parameter x on the page iflink declared.
- iflink+y: Determines the offset value of parameter y on the page iflink declared.
- iflink+h: Determines the offset value of parameter h on the page iflink declared.
- iflink+v: Determines the offset value of parameter v on the page iflink declared.
TipsTips
- When you don't know the size of an image, you can use parameter resize to forcedly set its size. Then the value of wd or width is a relative one to the value of resize. You can use parameter x or y to set the offset but not division calculation when using sprite images.
- E.g.: …|resize=100|wd=100|ht=100|x={{#expr:100*0}}|y={{#expr:120*3}}…
- This means for a large image, scale the width to 100px and height proportionally. The actual display space is a grid of 100x100px (wd * ht) size. Divide the image into 100x120px (x * y) grids. Then shows the grid in line 1 (100 * 0), column 4 (120 * 3).
ExamplesExamples
{{image|display=inline-block|pic=Wynn_the_Wind_Charmer.jpg|wd=250|ht=250|type=box|capht=25|desc=Wynn the Wind Charmer|link=Wynn the Wind Charmer}}
{{image|display=inline-block|pic=Wynn_the_Wind_Charmer.jpg|wd=250|ht=250|x=20|y=-100|v=20}}
{{image|display=inline-block|pic=Wynn_the_Wind_Charmer.jpg|wd=250|ht=250|clip-t=20|clip-l=50|clip-b=30|clip-r=85}}
{{image|display=inline-block|pic=Wynn_the_Wind_Charmer.jpg|wd=500|ht=250|radius=30|rad1-dt=%|rad3-dt=%|clip-l=125|clip-r=125|clip-t=150|clip-b=-150}}
{{image|display=inline-block|pic=Wynn_the_Wind_Charmer.jpg|width=200|height=200|resize=250|x=80|y=80|clip-b=30|clip-r=30|type=box|capht=-25|desc=Wynn the Wind Charmer}}
Wynn the Wind Charmer
Wynn the Wind Charmer
Notes:
- When the image is external, type must be set as outer.
- This is the usage of scaling an original image, width and height are needed to be specified because of not automatically adjusted. So it is not so much advanced.
- This is the basic usage of offset. The part on the right is blank. This is because the space occupies the width of 250px, the image has the width of 250px. And x specifies an offset of 20px to left, the remaining space is the part with no image, which is blank. While parameters h and v are overall offset regardless of the size of space. But note that h and v may cover other texts.
- This is the basic usage of cropping. Simply specify the distance from upper, lower, left and right to crop the size, without calculating the space size.
- This is the mixed usage of scaling and cropping. Scaling is completed by specifying wd. Note that the original is width 500px, height 250px, but by cropping left 125px, right 125px, 250px in total, the final width is 250px. While cropping upper 150px, lower -150px, 0px in total, the height does not change, which is equivalent to y=150. When two values are opposite, the sum value of left and right is equivalent to the value of x, the sum value of upper and lower is equivalent to the value of y. Of course, these parameters can be used at the same time.
radius crops the corners of the container, then a rounded rectangle will be formed. When the sprite image used has a background colour, you can justify this parameter according to the shape of the internal small image to cut out the background, or set radius of a square container to half of the length to make a circle. Of course it is better to do all of these when making a sprite image, rather than relying on parameter radius. - This is Sprites compatibility mode. You can directly specify the occupied space size, then specify the offsets of the image. This is space first, offset second. The reason is the same. However, width with wd, height with ht are conflicted, they cannot be used at the same time. Remember to use resize to specify the scaling of the image.
{{image|display=inline-block|pic=Wynn_the_Wind_Charmer.jpg|wd=250|ht=250|阴影色=rgb(33,123,255,0.33)|阴影粗细=18|模糊=5}}
{{image|display=inline-block|pic=Wynn_the_Wind_Charmer.jpg|wd=250|ht=250
|bgk=linear-gradient(15deg,rgba(255,255,255,0.3) 8%,rgba(255,0,0,0.3) 10%,rgba(255,255,255,0.3) 12%,rgba(255,255,255,0.3) 36%,rgba(255,0,0,0.3) 38%,rgba(255,255,255,0.3) 40%,rgba(255,255,255,0.3) 61%,rgba(255,0,0,0.3) 63%,rgba(255,255,255,0.3) 65%,rgba(255,255,255,0.3) 88%,rgba(255,0,0,0.3) 90%,rgba(255,255,255,0.3) 92%),linear-gradient(90deg,rgba(255,255,255,0.3) 8%,rgba(255,0,0,0.3) 10%,rgba(255,255,255,0.3) 12%,rgba(255,255,255,0.3) 36%,rgba(255,0,0,0.3) 38%,rgba(255,255,255,0.3) 40%,rgba(255,255,255,0.3) 61%,rgba(255,0,0,0.3) 63%,rgba(255,255,255,0.3) 65%,rgba(255,255,255,0.3) 88%,rgba(255,0,0,0.3) 90%,rgba(255,255,255,0.3) 92%)}}
Notes:
- Using inset shadow to make a translucent album border effect, "duang", it is the magic of syntactic sugar.
- Using a special grid to make a lattice effect.
{{image|display=inline-block|pic=Polarisation_(Circular).svg|type=tall|wd=250|ht=400|desc=Caption|caplink=Original}}
{{image|display=inline-block|pic=QingMingShangHeTu Big.jpg|type=wide|wd=500|resize=5000|ht=155|capht=-40|desc=<div style="font-size:150%;text-align:center;">''Riverside Scene at Qingming Festival''</div>}}
.svg){kind=small}
Caption
Riverside Scene at Qingming Festival
Notes:
- display is not required, this example is just want to put the image in a line. Parameters for cropping and offset are supported but not recommended to use.
- type=tall is required.
- type=wide is required. Note that resize is used to override the width specified by wd here, this is a key point.
{{image|display=inline-block|type=tall|phase=div|pic=<div style="background-color:#ccc;">
From here it is possible to display a large piece of text in a small frame.
</div>|wd=350|ht=300|desc=The usage of a paragraph textbox, source: {{tl|image}}. }}
{{image|display=inline-block|type=wide|phase=div|pic=<div style="background-color:#ccc;width:800px;">
From here it is possible to display a large piece of text in a small frame.
</div>|wd=450|ht=300|resize=500|capht=-40|desc=<div style="font-size:150%;text-align:center;">Normal people generally don't use it like this!</div>}}
The usage of a paragraph textbox, source: {{image}}.
Normal people generally don't use it like this!
Notes:
- display is not required, this example is just want to put the image in a line. Parameters for cropping and offset are supported but not recommended to use.
- type=tall, phase=div is required.
- type=wide, phase=div is required. Note that resize is used to specify the width of container, while the widths of members in the container need to be specified separately, these two specifications are important. In addition, the specification of width will invalidate the one of height, so this mode is usually useless, it may only useful with vertical texts.
NoticesNotices
- This template could increse expand size greatly.
- If you just want to justify image size, there is no need to use this template, please use
[[File:Filename|?px]]. See Help:Image.
- If you just want to justify image size, there is no need to use this template, please use
- There may be flicking when using with hover, so please take the original design.