幫助:圖像
- 本文用於介紹萌娘百科中一些特定功能的操作方法；
- 本文僅是一篇論述，不屬於方針或指引。如果本指南與相關方針或指引發生衝突或存在不一致的情況，請以方針或指引的條文為準。
這篇指南介紹如何將萌娘共享的圖像（也稱「內部圖像」）嵌入萌娘百科的頁面。
基本語法
萌娘百科使用的維基標記語言提供了嵌入圖片的語法。只需要在源代碼中加入以下代碼：
[[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}}模板可以在圖片中添加帶文字、鏈接的標籤。在萌娘百科條目中的使用例可參考廢都物語條目。
背景圖片和側邊欄底圖
條目背景圖片和側邊欄底圖是萌娘百科的特色。它們分別由對應的模板{{背景圖片}}和{{替換側邊欄底圖}}實現。你可以閱讀相應的說明文件了解它們的使用方法。
為文中一部分添加背景，可以使用{{背景圖片區域}}。
| |||||||||||||||||||||||||||||||||||