帮助:图像
- 本文用于介绍萌娘百科中一些特定功能的操作方法；
- 本文仅是一篇论述，不属于方针或指引。如果本指南与相关方针或指引发生冲突或存在不一致的情况，请以方针或指引的条文为准。
这篇指南介绍如何将萌娘共享的图像（也称“内部图像”）嵌入萌娘百科的页面。
基本语法
萌娘百科使用的维基标记语言提供了嵌入图片的语法。只需要在源代码中加入以下代码：
[[File:文件名|选项|标题]]
就可以在相应位置插入图像。编辑页面时，你可以点按编辑框上方工具栏的嵌入文件按钮来方便地插入图像。
图像的语法和一般链接类似，只不过链接到的是文件页面而非内容页面。此外图片链接还有更多的选项。这是一个应用了多个选项的例子：
[[File:Moegirlpedia-logo.png|thumb|center|120px|link=首页|alt=萌娘百科Logo|可爱的[[萌百娘]]～]]
文件名写在最前，一般形如主文件名.扩展名。文件名前面的File:也可换成Image:[1]，取决于你的个人习惯。
标题是图像的说明文字，也被叫做图片注释。对于缩略图会显示在图像下方，并且可以包含维基链接或者其它格式。
选项可以有多个，先后顺序没有影响。如果参数无法解析成选项，就会被当作标题。下表列出了常见的选项[2]。
| 类型 | 参数 |
|---|---|
| 格式 | 边框 / border、无框 / frameless、有框 / frame / framed、缩略图 / thumb / thumbnail
|
| 尺寸 | 宽度px、x高度px、宽度x高度px、upright / 右上[3]
|
| 水平对齐 | 无 / none、居中 / center、左 / left、右 / right）
|
| 垂直对齐 | middle / 中间、baseline / 基线、sub / 子、super / 超、top / 顶部、text-top / 文字顶部、bottom / 底部、text-bottom / 文字底部
|
| 链接 | link=内部链接 或 外部链接 或 空值 / 链接=
|
| 替代文本 | alt=替代文本 / 替代文本= / 替代=
|
| 类 | class=HTML类 / 类=
|
| 语言代码 | lang=语言代码 * 一般无需使用。
|
如果两个不能组合使用的参数同时存在，后一个会被当作标题。
下面通过一些示例来展示参数的用法。演示中主要使用可爱的萌百娘，实际应用时你可以将其替换为你想要展示的图像。
在手机等小屏幕设备上，显示效果可能与预期的有差异。
对齐
对齐参数：
left（或左）：左侧浮动right（或右）：右侧浮动none（或无）：无浮动center（或居中）：居中对齐
提示：在MoeSkin皮肤窄屏（显示区域宽度≤576px）下，元素的浮动会被取消。
- （不指定）
代码：[[File:ZhMoegirl15.2.png]]。图像作为行内元素显示（嵌入型布局）。这种方式适用于图像较小的情形，比如{{表情}}。
萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~
- left / 左
代码：[[File:ZhMoegirl15.2.png|left]]。图像显示为块状元素，在文档流左侧浮动，文字环绕在图像周围。
萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~
萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~
- right / 右
代码：[[File:ZhMoegirl15.2.png|right]]。图像显示为块状元素，在文档流右侧浮动，文字环绕在图像周围。
萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~
萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~
- none / 无
代码：[[File:ZhMoegirl15.2.png|none]]。图像显示为块状元素，不浮动，文字环绕在图像上下侧。
萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~
萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~
- center / 居中
代码：[[File:ZhMoegirl15.2.png|center]]。图像显示为块状元素，不浮动，居中对齐。文字环绕在图像上下侧。
萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~
萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~萌娘百科，万物皆可萌的百科全书☆~
以上设置的是图像的水平位置，还可以设置图像的垂直对齐方式，这里不再详述。
格式（缩略图）
如果想给图像配一个标题或者一段说明文字，可以使用缩略图（thumb）格式。[4]设置为缩略图的图像会被框起来，添加白色的背景，并在右下角显示一个链接到图像页面的 
标记。
[[File:ZhMoegirl15.2.png|thumb|萌娘百科Logo]]
未指定对齐时，缩略图默认右侧浮动，这一点与前面不同。缩略图也可以按上一节的方法调整定位，这里不再演示。
除thumb（或缩略图）外，其他的显示格式还有border、frameless、frame等，你可以自己尝试它们的效果。
尺寸
未指定图像的显示大小时，无格式图像的默认尺寸就是原始图像的尺寸；缩略图的默认尺寸是300像素宽[5]。但更多时候我们希望自己调整图像的显示大小。
可以给图像设置宽度或（和）高度来限制图像的尺寸，单位是px（像素）。
无论是同时设置宽度和高度还是只设置其中一项，图像都不会被拉伸变形，而是等比例缩放，使宽度和高度不超过设定值。
对于缩略图，除了设置固定尺寸，也可以使用upright参数调整的大小：
[[File:ZhMoegirl15.2.png|thumb|upright=0.4]]
或
[[File:ZhMoegirl15.2.png|thumb|upright 0.4]]
会将图像缩放到默认尺寸的0.4倍，对于这个例子就是300px × 0.4 = 120px（300px宽是萌娘百科默认的缩略图尺寸）。
也可以只填upright而不填后面的数值，这相当于upright=0.75。
还有一点需要注意，无论哪种方式，缩略图的尺寸都无法超过原始图像。
考虑到读者在不同设备上的浏览体验，内文中的图片不宜过大或过小。（作为参考，手机竖屏的浏览器宽度通常在320px到425px之间，而电脑屏幕宽度则大于1024px。）
注意：当前版本的MoeSkin皮肤视图下缩略图的宽度不会自动适应屏幕，且溢出屏幕的部分无法通过左右滑动来显示。
链接
link参数用来给图像添加链接，可以是内部链接、跨wiki链接或者外部链接。例如：
[[File:Moegirlpedia-logo.png|100px|link=首页]] [[File:commonsMoegirl2016tmp.png|100px|link=萌娘共享:Mainpage]] [[File:Wikipedia-logo.png|100px|link=https://zh.wikipedia.org/wiki/Wikipedia:首页]]
不设置链接时，图像会链接到媒体查看器（查看图片界面）。设置一个空的link=可以禁用链接：
[[File:ZhMoegirl15.2.png|100px|不设置link参数]] [[File:ZhMoegirl15.2.png|100px|link=|link参数为空]]
其他
常用的选项还有：
- alt=：替代文本，映射到生成的
<img />标签的alt="..."。替代文本的作用是，当图像无法打开（网速过慢、浏览器禁用图像等原因）时，图像应有的位置会显示alt=之后的内容。 - class=：HTML类，映射到生成的
<img />标签的class="..."。这在某些以class为触发的模板中十分有用。
图文排版
这一节介绍一些条目排版中的技巧。
左右交替
通过交替设置图片左右浮动，可以避免图片大量堆积在同一侧。
清除浮动
清除浮动是为了避免浮动内容溢出到规定区域外从而影响（甚至破坏）布局的现象。这里的例子显示了在新段落开始前未清除浮动和清除了浮动的对比。
清除浮动通过层叠样式表（CSS）属性clear实现，有清除左侧浮动、清除右侧浮动和同时清除左右两侧浮动三种。在萌娘百科，你可以在需要清除浮动的位置添加{{clear}}或{{-}}模板（两者都是在需要清除浮动的位置额外添加一个空白标签，但后者会额外多空出一行（1em）的高度）。
（事实上这篇帮助文档中就大量使用了{{clear}}。）
用表格排版
对于大小相近的一组图片，把它们并列在一起最简便的办法是使用表格。
{|
| [[File:Moegirlpedia-logo.png|200px]]
| [[File:Moegirlpedia-logo.png|200px]]
| [[File:Moegirlpedia-logo.png|200px]]
|}
 |
|
|
并列图像
模板{{Multiple image}}（又名：{{并列图像}}、{{并列图片}}）可以把一组图像并列在一起，类似缩略图那样显示。
{{multiple image
| perrow = 2
| total_width = 300
| image1 = Pixiv_51872985.jpg | width1=850 | height1=1200
| image2 = Pixiv_58132562.png | width2=800 | height2=1200
| image3 = Pixiv_65682005.jpg | width4=566 | height4=729
| image4 = Pixiv_11112249.jpg | width3=429 | height3=764
| footer =各种各样的[[死库水]]，从左上角开始，沿顺时针方向，分别为旧式，新式，竞赛式和分体式。
}}
横向并列多张图像也可以使用更简单的{{Image frame}}。
如果有大量图片需要并列展示，不妨试试下文介绍的画廊语法。
画廊语法
用 <gallery> 标签可以很方便地创建一个由缩略图组成的图库（也称画廊）。编辑页面时点按编辑框上方工具栏中的“高级高级”，在下拉工具栏中点按图库按钮，即可插入一个示例画廊。画廊的语法是：
<gallery> File:文件名|标题|alt=替代文本 File:文件名|标题|alt=替代文本 ... </gallery>
File:前缀可以省略。另外，缩略图的许多参数在这里也同样适用。
例如，
<gallery>
Moegirl is watching you.jpg|萌百娘[[抢镜脸]]
Moegirl is watching you.jpg|这篇文档''{{FULLPAGENAME}}''属于[[:分类:帮助]]
Moegirl is watching you.jpg|link=萌百娘|该图像链接至[[萌百娘]]条目
Moegirl is watching you.jpg|alt=萌百娘正在看着你
</gallery>
会被格式化为：
属性
除萌百支持的全局属性（id、class、style等）以外，gallery 标记自身接受几个额外参数，可通过成对的“名称-值”来指定：
<gallery 参数1 参数2 ...> 图像1 图像2 ... </gallery>
参数：
caption="{标题}"：（若标题文本中包含空格，应使用双引号将其包括起来）在画廊顶端中间位置显示一个标题。widths={宽度}px：设置图像宽度，默认为120px。注意，是每张图像的宽度。heights={高度}px：设置图像的（最大）高度。perrow={整数}：设置每行显示的图像数。showfilename={任意值}：将每张图像的文件名显示为单独的标题
示例：
<gallery widths=60px heights=60px perrow=6 caption="萌百娘正在看着你"> File:Moegirl_is_watching_you.jpg File:Moegirl_is_watching_you.jpg File:Moegirl_is_watching_you.jpg File:Moegirl_is_watching_you.jpg File:Moegirl_is_watching_you.jpg File:Moegirl_is_watching_you.jpg File:Moegirl_is_watching_you.jpg File:Moegirl_is_watching_you.jpg File:Moegirl_is_watching_you.jpg File:Moegirl_is_watching_you.jpg File:Moegirl_is_watching_you.jpg File:Moegirl_is_watching_you.jpg </gallery>
- 萌百娘正在看着你
模式
从MediaWiki 1.22版本开始，gallery标签新加入了模式参数功能mode=, 可选参数如下:
traditional： 标准默认的画廊模式。nolines： 标准模式去掉了外围方框。packed： 设置图像为统一高度，系统自动根据长宽比调整图像宽度，根据屏幕宽度调整每行图像数。packed-overlay： packed模式外文字说明和半透明背景框。packed-hover： packed模式，鼠标悬浮时显示文字说明+半透明背景框。slideshow： 幻灯片模式，可以点击切换图像或查看所有画廊内的图像。（MediaWiki 1.23新增）
mode="traditional" 标准模式
<gallery mode="traditional"> Image:Moegirl_Head.png|萌百娘 Image:Gengxinji.jpg|绿坝娘 Image:Wikitanface.png|维基娘 </gallery>
萌百娘
绿坝娘
维基娘
mode="nolines" 无框标准模式
<gallery mode="nolines"> Image:Moegirl_Head.png|萌百娘 Image:Gengxinji.jpg|绿坝娘 Image:Wikitanface.png|维基娘 </gallery>
萌百娘
绿坝娘
维基娘
mode="packed" 填充模式
<gallery mode="packed"> Image:Moegirl_Head.png|萌百娘 Image:Gengxinji.jpg|绿坝娘 Image:Wikitanface.png|维基娘 </gallery>
萌百娘
绿坝娘
维基娘
mode="packed-overlay" 带字幕的填充模式
<gallery mode="packed-overlay"> Image:Moegirl_Head.png|萌百娘 Image:Gengxinji.jpg|绿坝娘 Image:Wikitanface.png|维基娘 </gallery>
萌百娘
绿坝娘
维基娘
mode="packed-hover" 鼠标悬浮时显示文字的填充模式
<gallery mode="packed-hover" caption="萌娘百科历史Logo"> Image:2010-DEC-13MoeGirlWikiLogo.png|2010年Logo Image:2011-JUN-7MoeGirlWikLogo.png|2011年Logo Image:2013logo.png|2013年Logo Image:2013logoEn.png|2013年Logo（英文版） Image:2013logoJa.png|2013年Logo（日文版） Image:Zh2014 moegirlpedia logo.png|2014年Logo Image:ZhMoegirl15.2.png|2015年Logo </gallery>
- 萌娘百科历史Logo
2010年Logo
2011年Logo
2013年Logo
2013年Logo（英文版）
2013年Logo（日文版）
2014年Logo
2015年Logo
mode="slideshow" 幻灯片模式
注意：这个模式默认会让画廊占据所有可用空间，通常会使图像显示过大。由于高heights和宽widths参数在此模式被忽略，因此画廊的尺寸需要像下面一样手动限制。注意此处限制的是画廊可用的最大尺寸，而非画廊内图像的尺寸。
<div style="max-width:800px"><gallery mode="slideshow"> File:ISLAND_Anime_Mainvisual1.jpg File:ISLAND_Anime_Mainvisual2.jpg File:ISLAND_Anime_Mainvisual3.jpg File:ISLAND_Anime_Mainvisual4.jpg File:ISLAND_Anime_Mainvisual5.jpg </gallery></div>
链接到图像但不显示图像
如果只是想链接到图像而不显示，主要有三种方法：
* [[Media:ZhMoegirl15.2.png]]（利用[[Help:名字空间#虚拟名字空间|媒体名字空间]]创建一个指向文件本身的链接） * [[:File:ZhMoegirl15.2.png]]（链接到图像说明页） * [[cm:File:ZhMoegirl15.2.png]]（添加[[Help:跨wiki|跨wiki]]前缀，链接到萌娘共享上的图像说明页）
- Media:ZhMoegirl15.2.png（利用媒体名字空间创建一个指向文件本身的链接）
- File:ZhMoegirl15.2.png（链接到图像说明页）
- cm:File:ZhMoegirl15.2.png（添加跨wiki前缀，链接到萌娘共享上的图像说明页）
在讨论版请求文件操作时，应按照最后一种写法链接到萌娘共享页面，以便于维护人员处理。
常用模板
萌娘百科常用的图像模板在分类:图像模板和模板:图像模板列出。
| ||||||||||||||||||||||||||||
长图
可以用模板{{wide image}}、{{tall image}}来显示宽高比悬殊的图片：
- {{Wide image}}
{{Wide image|碧蓝航线ED长图.png|1500px|碧蓝航线TV动画第11话ED的截图拼接版本|alt=Wide_image模板演示}}
- {{Tall image}}
{{Tall image|东方全家福.jpg|360|400|东方Project全家福，作者：八里 FKM|alt=Tall_image模板演示|center}}
图片裁切
{{Image}}、{{image-clip}}等模板可以高度定制图片的样式，实现更复杂的效果。相应地也会增加代码的阅读难度和展开长度。
如果要生成一组雪碧图，可以试试{{链接图组}}和{{sprites}}。
图片标注
- 主页面：模板:Image label
{{Image label}}模板可以在图片中添加带文字、链接的标签。在萌娘百科条目中的使用例可参考废都物语条目。
背景图片和侧边栏底图
条目背景图片和侧边栏底图是萌娘百科的特色。它们分别由对应的模板{{背景图片}}和{{替换侧边栏底图}}实现。你可以阅读相应的说明文件了解它们的使用方法。
为文中一部分添加背景，可以使用{{背景图片区域}}。
| |||||||||||||||||||||||||||||||||||