帮助:图片教程

菌 于9个月前修改了此页面。
帮助
版权信息(CC BY-SA)编辑摘要版权信息(CC BY-NC)FAQHuiji缓存建站评估快速指南吐槽与讨论邀请新用户维基化页面图片站点等级站点评分编辑冲突保护页面创建新页面Bot表格编辑页面短域名选择恶意编辑公告模板重定向页面封禁灰机workshop历史与回退命名常规快速插入项链接视频教程上传媒体文件/1添加引用修改站点页脚学习地图Wiki标记语言修改站点导航图片教程消歧义移动页面用户权限页面分类章节站长指南BOOTSTRAP变量AWB机器人CSS样式库ExcelHTML灰机Wiki数据更新器建站心得魔术字简繁处理解析器扩展标签命名空间解析器函数模板参数模板素材库Tab切换SMongo使用CSS变量灰机停机坪图像处理工具文本处理工具XnView预设模板用户组限定的CSS/JSTailwind CSS参考主题编辑器站点CSS编辑折叠站点JS编辑搜索器与检索工具数学公式字体使用cockpit组件自动翻译在灰机使用Less可配置的站点功能灰机Json编辑器API复杂模板狗头人APP机器人灰机Wiki数据更新器\使用VS Code维护代码开发者101零件PythonMongoDB支持Semantic Forms模块Semantic Result Formats/echartsMustache模板Semantic MediaWiki使用SPA提升访问速度推土机架构用Git管理MediaWiki在灰机使用Vue.js
简单
入门
进阶
复杂
开发
灰机帮助中心

本页帮助详细讲述如何上传图片和文件，以及在文章页插入图片的语法和样式。

传图须知

  1. 灰机不会压缩你上传的图片文件，也不会修改文件名称，因为MediaWiki不会，你可以通过对比文件信息来验证
  2. 单个图片（文件）上传的磁盘容量限制是10MB，（新版的上传页面上没写），但是你传图之后校验的时候会告诉你
  3. 图片的“品质”和“体积”没有必然的关系，并不是越大就越清楚，并不是png一定比jpg更清晰（尽管很多情况下表现的确如此，实际上只是压缩方式不同），即使是同样的文件格式，清晰度与体积的关系也不是线性的（随着文件体积的增加，提升的清晰程度可能会越来越小）。
  4. 图片对服务器是否有影响？会不会出事？只要是能上传成功，一般就不会出事，但一些边缘情况下可能会有问题：比如文件虽然在10mb以内，但尺寸太大，导致cdn渲染失败；再比如gif图片太大、帧数太多，也会导致cdn渲染失败，这些具体参数是由cdn服务商提供的，跟灰机没关系，我们也不好判断，总之不要太奇葩即可（比如长宽太大）。
  5. 图片开销问题：一般来说灰机不会计较服务器图片的开销，但有些情况下，非必要的大图会造成服务器资源的巨大浪费，特别是在访问量特别大的站点，比如ff14。
：ff14首页上的若干个导航图标，之前是png，在改成jpg之后体积缩小了80%，这些图片的cdn资源消耗也就减少了80%，因为该页面访问量巨大，一个月可以节省cdn开销几千块钱，一年就是几万。当然并不是说灰机非常在意这些钱，而是说这种浪费是【非必要&无意义的】，在客户端也会消耗用户的手机数据流量，增加页面加载速度，占用用户的磁盘空间。

结论：

  • 如果图片是放在内部词条上，不是首页这种高频访问页面，那么对资源开销的影响可以忽略不计
  • 但图片的体积仍然会对其他访问者的体验产生影响，在500k的下行网速条件下，5MB的图要加载10秒，1MB的图只需要2秒，所以图片质量近似的情况下，图片体积越小越好。
  • 请尽量给与图片文件有意义的命名，可以是中文，也可以是英文，对于MediaWiki而言，文件和词条一样都是“页面”，只是属于不同的命名空间，也需要消歧义。
    • 合理的图片名称：Illidan_Stormrage_large.png、吉安娜_高清无码.jpg
    • 不合理的图片名称：QQ文件截图@#￥#@￥%……SDF.jpg、3erfgj4568892734gkhjg754.jpg
    • 会被MW阻拦的图片名称：Illidan_Stormrage_large_40px.png(带有xxxpx之类尺寸字样，会被认为是缩略图，MW不建议上传这样的文件名，会导致不必要的歧义)

上传图片

方法1：源代码编辑器内上传

    • 第一步：点击编辑框上方的“上传图片”或 直接将图片拖至图中指定位置
    • 第二步：上传完毕后，点击“插入图片”
    • 第三步：点击“保存页面”即可~

  • 插入图片


方法2：新版上传

使用方法二上传文件
  • 第一步：在灰机左侧侧边栏中选择“上传文件”
  • 第二步：选择要上传的图片
  • 第三步：在编辑页面输入
    [[File:xxx.jpg]]
    或
    [[File:xxx.png]]
    ，或是在可视化编辑器中插入图片。

注意：

  1. 关于图片名称：建议首页使用的图片使用维基或人物全名命名图片，更容易被人搜到。 比如：黑寡妇.jpg
  2. 在“摘要”处可以写明图片的相关内容，关键字越多越明确越容易被人搜到。 比如：黑寡妇的图片摘要可写：漫威电影宇宙的黑寡妇角色。
  3. 编辑页面的图片名称大小写要与所传图片一致，否则图片无法显示。
  4. 编辑页面的图片扩展名（jpg/png）要与所传图片一致，否则图片无法显示。

方法3

如果图片数量多，可以使用灰机数据更新器进行批量上传

参见：帮助:灰机Wiki数据更新器

图片位置与样式

默认样式

[[File:灰机wiki.jpg]]

直接插入的图片和原始图片大小一致。图片位置任意，文字不会环绕四周。

实例：

灰机wiki的服务器在国内，不用担心被墙，或者无法注册，是真正的中国人自己的维基平台；灰机wiki团队从核心管理层到前线码农，都有广泛的兴趣爱好，会尽最大力量帮助每一个灰机wiki社区茁壮成长；灰机wiki.jpg 我们会有更加优秀的社交基因，更重视体现贡献者的劳动付出；在未来我们会不断迭代开发，推出更多实用的功能，方便编辑者运营和维护自己的社区；不会空降权限狗，每一个灰机wiki社区都由编辑者们当家做主；没有广告！没有广告！没有广告！


图片描述文字

显示缩略图，描述文字会出现在图片下方，点击右下角图标可放大 

[[File:灰机wiki.jpg|thumb|灰机wiki的logo]]

实例：

灰机wiki的logo

灰机wiki的服务器在国内，不用担心被墙，或者无法注册，是真正的中国人自己的维基平台；灰机wiki团队从核心管理层到前线码农，都有广泛的兴趣爱好，会尽最大力量帮助每一个灰机wiki社区茁壮成长；我们会有更加优秀的社交基因，更重视体现贡献者的劳动付出；在未来我们会不断迭代开发，推出更多实用的功能，方便编辑者运营和维护自己的社区。

不会空降权限狗，每一个灰机wiki社区都由编辑者们当家做主；没有广告！没有广告！没有广告！您可以先从感兴趣的wiki下手，查看现有的灰机wiki平台，找到您感兴趣的词条，点击工具栏的编辑（可视化，所见即所得）或者编辑源代码（推荐使用，可以迅速上手wiki语言，方便更高级的编辑需求），开始编辑；可以参考先辈编辑者做好的页面，了解什么wiki语言可以实现什么功能；如果您参与编辑的灰机wiki恰好有对应的外文wikia或者其他维基类网站上的外文维基，您大可以将其源代码整体复制过来，然后翻译成中文。记得搬运模板哟；如果现有的灰机wiki无法满足您，大可以开辟新的灰机wiki，自己做机长。


左/右/居中对齐

[[File:灰机wiki.jpg|right|thumb|灰机wiki的logo右侧]]
[[File:灰机wiki.jpg|left|thumb|灰机wiki的logo左侧]]
[[File:灰机wiki.jpg|center|灰机wiki的logo居中]]

图片出现在在页面右/左侧，文字环绕四周（相当于float:right和float:left） 实例：

灰机wiki的logo右侧
灰机wiki的logo左侧
灰机wiki的logo居中

灰机wiki的服务器在国内，不用担心被墙，或者无法注册，是真正的中国人自己的维基平台；灰机wiki团队从核心管理层到前线码农，都有广泛的兴趣爱好，会尽最大力量帮助每一个灰机wiki社区茁壮成长；我们会有更加优秀的社交基因，更重视体现贡献者的劳动付出；在未来我们会不断迭代开发，推出更多实用的功能，方便编辑者运营和维护自己的社区。

不会空降权限狗，每一个灰机wiki社区都由编辑者们当家做主；没有广告！没有广告！没有广告！您可以先从感兴趣的wiki下手，查看现有的灰机wiki平台，找到您感兴趣的词条，点击工具栏的编辑（可视化，所见即所得）或者编辑源代码（推荐使用，可以迅速上手wiki语言，方便更高级的编辑需求），开始编辑；可以参考先辈编辑者做好的页面，了解什么wiki语言可以实现什么功能；如果您参与编辑的灰机wiki恰好有对应的外文wikia或者其他维基类网站上的外文维基，您大可以将其源代码整体复制过来，然后翻译成中文。记得搬运模板哟；如果现有的灰机wiki无法满足您，大可以开辟新的灰机wiki，自己做机长。


图片标题

图片显示的大小与原图一致，图片在页面右边，文字环绕四周，图片带标题或注释 

[[File:灰机wiki.jpg|frame|right|灰机wiki的logo]]

实例：

灰机wiki的logo

灰机wiki的服务器在国内，不用担心被墙，或者无法注册，是真正的中国人自己的维基平台；灰机wiki团队从核心管理层到前线码农，都有广泛的兴趣爱好，会尽最大力量帮助每一个灰机wiki社区茁壮成长；我们会有更加优秀的社交基因，更重视体现贡献者的劳动付出；在未来我们会不断迭代开发，推出更多实用的功能，方便编辑者运营和维护自己的社区。

不会空降权限狗，每一个灰机wiki社区都由编辑者们当家做主；没有广告！没有广告！没有广告！您可以先从感兴趣的wiki下手，查看现有的灰机wiki平台，找到您感兴趣的词条，点击工具栏的编辑（可视化，所见即所得）或者编辑源代码（推荐使用，可以迅速上手wiki语言，方便更高级的编辑需求），开始编辑；可以参考先辈编辑者做好的页面，了解什么wiki语言可以实现什么功能；如果您参与编辑的灰机wiki恰好有对应的外文wikia或者其他维基类网站上的外文维基，您大可以将其源代码整体复制过来，然后翻译成中文。记得搬运模板哟；如果现有的灰机wiki无法满足您，大可以开辟新的灰机wiki，自己做机长。


图片大小

指定图片宽度

[[File:灰机wiki.jpg|100px|灰机wiki的logo]]

设置图片宽度为100像素（为防止图片显示过大或过小影响排版，通常使用300px左右的图片；图片均为按比例缩放） 实例：

图片宽为100像素（100px） 灰机wiki的logo

图片宽为500像素（500px） 灰机wiki的logo


指定图片高度

[[Image:灰机wiki.jpg|x100px|灰机wiki的logo]]

设置图片高度为100像素（图片均为按比例缩放） 实例：

图片高为100像素（100px） 灰机wiki的logo

图片高为50像素（50px） 灰机wiki的logo

使用class

[[File:灰机wiki.jpg|class=class-name]]

并在MediaWiki:Common.css中定义class-name的样式： 

.class-name {
  position: relative;
  width: 100%;
  height: 64px
  padding: 8px;
}

.class-name:hover {
  background-color: #eee;
}

即可使多个图片共享同一样式，或实现动态效果。 实例：

灰机wiki.jpg

综合示例

  • 要求：文字四周环绕，图片右对齐，显示缩略图，图片大小为100像素，并加图片小标题。
  • 代码：
    [[File:灰机wiki.jpg||thumb|right|100px|灰机wiki的logo]]

实例：

灰机wiki的logo

灰机wiki的服务器在国内，不用担心被墙，或者无法注册，是真正的中国人自己的维基平台；灰机wiki团队从核心管理层到前线码农，都有广泛的兴趣爱好，会尽最大力量帮助每一个灰机wiki社区茁壮成长；我们会有更加优秀的社交基因，更重视体现贡献者的劳动付出；在未来我们会不断迭代开发，推出更多实用的功能，方便编辑者运营和维护自己的社区。

不会空降权限狗，每一个灰机wiki社区都由编辑者们当家做主；没有广告！没有广告！没有广告！您可以先从感兴趣的wiki下手，查看现有的灰机wiki平台，找到您感兴趣的词条，点击工具栏的编辑（可视化，所见即所得）或者编辑源代码（推荐使用，可以迅速上手wiki语言，方便更高级的编辑需求），开始编辑；可以参考先辈编辑者做好的页面，了解什么wiki语言可以实现什么功能；如果您参与编辑的灰机wiki恰好有对应的外文wikia或者其他维基类网站上的外文维基，您大可以将其源代码整体复制过来，然后翻译成中文。记得搬运模板哟；如果现有的灰机wiki无法满足您，大可以开辟新的灰机wiki，自己做机长。
  • 注意：参数的顺序通常无所谓，但必须保证图片名字是第一个参数，而图片标题（注释）在最后。

使图片不带链接

在图片指向一个空链接可以避免让插入的图片点击后进入文件页。

  • 代码最后添加link=，例如[[file:xxx.png|link=]]

使图片带链接

  • 代码最后添加link=链接，例如[[file:xxx.png|link=链接]]

宽度适配

在2020年4月24日的更新中，灰机皮肤为图片更新了以下几个预设class，请参考上文“class”章节使用：

img-fit
使该图片的宽度不超过外部容器。当外部容器缩小时（如在手机端显示时），该图片的宽度将被缩小到可接受的最大宽度，同时保持宽高比。
img-fullwidth
使图片强行拉宽到外部容器宽度，并保持宽高比。与img-fit不同的是，img-fit并不会“放大”图片。
img-inline-responsive
效果同img-fit，但是生成的图片是inline级块元素，从而可以像文字一样对其使用左右对齐或文字方向等样式。