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

传图须知

  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秒,所以图片质量近似的情况下,图片体积越小越好。

上传图片

方法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=]]

宽度适配

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

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