帮助:说明

Article

October 20, 2021

对于所有人 此信息适用于可视化编辑器和 wikikode 编辑器。(有什么区别?)此页面提供了有关如何在 Wikipedia 页面上包含图片的信息。图片集位于 Wikimedia Commons 存储库中。如果您想上传自己的插图,请查看方法。首先,我们将介绍说明的一般原则,然后详细说明:如何在可视化编辑器和源代码中进行。

一般想法

插图的大小

网站的外观取决于屏幕的分辨率和配置,以及各个类型和版本的浏览器呈现内容的方式。用户还可以通过配置他们的浏览器来根据他们的个人需求定制外观。因此,页面的外观并不总是与在作者屏幕上看到的完全相同。一个好的页面布局的特点是它在各种浏览器上看起来都不错,尤其是在移动设备上,而且在打印后、使用“创建书籍”选项或导出为 PDF 之后也是如此。标准尺寸的使用简化了此类参数的自动选择,使得任何形式的图形布局都清晰美观。因此,不建议以像素为单位指定图像大小,如果可能,建议使用标准值(默认为 220px)。每个用户都可以在首选项中单独自定义插图的标准尺寸。通过强制硬大小,个人用户偏好被忽略。

插图的地方

插图直接放在标题下方,在本章的第一段之前。这可以防止插图和文本在不同分辨率下“发散”,这在段落之间进行说明时会发生。基本上,图片放置在文本的右侧。在左边我们放,如果:我们想用图形来说明信息框旁边的部分,有时移动信息框下面的图形可能会出现问题,即使我们指定应该把插图放在左边.最常见的原因是图片位于信息框下方。在这种情况下,向下移动图片。更好的解决方案是在信息框中插入插图。首先,检查信息框中是否有可能链接到共享资源,文章的文本适用于这些图形,例如绘画或雕塑,关于特定艺术作品的文章是一个例外 - 对于图片,我们使用 {{image infobox}} 模板。在特殊情况下,特别是如果它是全景图形,应居中放置。文章中的这种程序也减少了单调性,例如当它是具有许多图形的大型文章时。但是,它应该是一个宽而不是长的图形。但是,它应该是一个宽而不是长的图形。但是,它应该是一个宽而不是长的图形。

如果左右同时

不建议在屏幕的左右两侧放置插图并使用分辨率高于 350-400 像素的图像,因为在较低的分辨率下(低于 1366x768)会导致“丝滑文字”的效果。屏幕宽度小于 1280 像素的示例:您将看到多节文本,当它前面有普通文本时,它看起来特别难看。这是在水平分辨率小于 1280 像素时变得粘滞的示例文本。这是在水平分辨率小于 1280 像素时变得粘滞的示例文本。这是在水平分辨率小于 1280 像素时变得粘滞的示例文本。

维基共享资源模板

与其在文章中创建图库,不如链接到 Wikimedia Commons,然后在文章文本中包含 {{Commonscat}} 或类似模板 ({{Commons}})。与在维基百科文章中包含多张图片相比,包含指向 Wikimedia Commons 的链接具有三个优势: Wikimedia Commons 资源可以持续增长 - 由来自所有语言版本的 Wikipedists 补充。可以链接到每个语言版本中的许多文章,而无需将整个图库代码单独粘贴到每篇文章中。它不会延长加载文章的时间并减少服务器负载 - 但是,对其感兴趣的人可以毫无问题地查看它。

在可视化编辑器中说明

上传文件

编辑和插入照片库

在源代码中说明

在对文章进行说明之前,您首先需要选择合适的图片,即转到图片页面 - 在 Commons 的类别中搜索 - 有时在 Commons 的内部搜索引擎中输入名称就足够了(最好是英文) )。进入图形页面后,复制页面名称。用于插入图形的源代码 (wikikode) 的结构类似于内部链接的代码。它是使用双方括号创建的。但是,它们不是创建文本链接,而是在页面文本中显示插图。

插入图形 - 代码

为了在网站上显示图形,我们输入了一个特殊代码。此代码具有一般形式:[[文件:文件名|选项|描述]] 简写要在页面上插入图像,请复制上传图像的共享资源页面的名称,例如文件:Kraków - Rynek 01。 .JPG我们将“文件”一词替换为“文件”一词,即我们有一个文件:Krakow - Rynek 01.JPG 并插入格式:[[File: Krakow - Rynek 01.JPG | small | Krakow Market square] ] 或 [[文件:克拉科夫 - Rynek 01.JPG | 拇指 | 克拉科夫市场广场]] 结果在右边。文件名 将文件发送到服务器的文件的确切标题(必须包含文件扩展名)。因此,例如,Krakow - Rynek 01.JPG 选项拇指(导致在插图周围显示框架)、框架、右侧(图像在右侧)、左侧、中心(可选)、链接(插入“链接页面”名称”将导致单击后,用户将不会转到图形页面,而是转到给定的文章,在不推荐的文章中)、alt 和图像大小(以像素为单位),以 px 后缀(例如 250px)给出。可以按任意顺序指定多个选项,以竖线“|”分隔。说明将附加到插图的任何文本,它也可能包含内部和外部链接。要使描述在图像下方可见,请使用拇指或框架选项(否则仅当您将鼠标悬停在图像上时才可见)软件不需要提供选项和描述,尽管建议这样做。右侧示例的代码:如果需要,您可以进行简短的测试以查看效果。alt 和插图的大小(以像素为单位),以 px 为后缀(例如 250px)。可以按任意顺序指定多个选项,以竖线“|”分隔。说明将附加到插图的任何文本,它也可能包含内部和外部链接。要使描述在图像下方可见,请使用拇指或框架选项(否则仅当您将鼠标悬停在图像上时才可见)软件不需要提供选项和描述,尽管建议这样做。右侧示例的代码:如果需要,您可以进行简短的测试以查看效果。alt 和插图的大小(以像素为单位),以 px 为后缀(例如 250px)。可以按任意顺序指定多个选项,以竖线“|”分隔。说明将附加到插图的任何文本,它也可能包含内部和外部链接。要使描述在图像下方可见,请使用拇指或框架选项(否则仅当您将鼠标悬停在图像上时才可见)软件不需要提供选项和描述,尽管建议这样做。右侧示例的代码:如果需要,您可以进行简短的测试以查看效果。它还可能包含内部和外部链接。要使描述在图像下方可见,请使用拇指或框架选项(否则仅当您将鼠标悬停在图像上时才可见)软件不需要提供选项和描述,尽管建议这样做。右侧示例的代码:如果需要,您可以进行简短的测试以查看效果。它还可能包含内部和外部链接。要使描述在图像下方可见,请使用拇指或框架选项(否则仅当您将鼠标悬停在图像上时才可见)软件不需要提供选项和描述,尽管建议这样做。右侧示例的代码:如果需要,您可以进行简短的测试以查看效果。

插图的位置

如您所见,默认情况下,插图相对于文本放置在屏幕上相当随机的位置,并且很难预测文本将如何围绕它流动。插图和文本放置由选项控制: left - 插图将在屏幕的左侧,并与右侧的文本一起流动;右 - 插图将在屏幕的右侧,并将在左侧叠加文字;center - 插图将居中,不会被文字淹没。none - 插图将被插入到文本中,不会四处流动,也不会改变其位置。

缩放插图

缩放最好使用附加的“拇指”选项完成,如下所述。插入插图的最简单方法,例如:[[File: HondiusPerspective.png]],通常不会给出令人满意的结果,尤其是插图较大时:

刚性缩放

注意:如上所述,不建议以像素为单位指定图片的尺寸。要使图像变小,可以使用缩放选项,即以像素为单位指定其大小。这个数字代表插图的宽度: [[File: HondiusPerspective.png | 50px]] [[File: HondiusPerspective.png | 100px]] [[File: HondiusPerspective.png | 150px]] 上面的代码会有如下效果:但是值得注意的是,随着插图变小,它的细节逐渐消失。也可以定义插图的高度:给定的尺寸前面加上字母 x,例如 x200px。 [[文件:Malchin-wohnturm.jpg | x200px]] [[文件:Forestry Forwarder Ösa 250 2.jpg | x200px]] 它允许将两个具有不同纵横比的图形并排放置:您也可以输入两个尺寸,例如宽度 120 像素,高度 80 像素)。然后插图的尺寸不会大于给定的尺寸,保持插图的比例。例如,指定 120x80px 的尺寸后,我们将得到:

自动缩放

如果横向和纵向格式的插图并排放置并使用默认尺寸,则它们在纵向格式中看起来会太大。对于这种垂直格式的插图,建议使用 upright 参数。使用此参数的插图比标准默认尺寸缩小了 0.75 倍,这通常会导致更好的页面布局。自动缩放的主要优点是保持图像大小的比例,对于匿名用户和在其首选项中定义了不同个人图像大小设置的注册用户。使用自动缩放时,纵横比始终保持不变。 [[文件:阿蒙。svg | thumb | upright | 没有 "px" - 但有 "upright"]] 如果 upright 参数的默认值 (0.75) 不是最佳预期大小,则也可以为它指定不同的大小因子。 [[文件:Amun.svg | 拇指 | upright0.5 | 没有“px” - 但有“upright0.5”参数]]] 其中“upright”因子 <1 减少,> 1 放大了与到默认大小。以这种方式缩放的单个插图的大小之间的相互比例在这里仍然保留。请注意,小数点是一个点而不是逗号(例如 1.8)。如果您想利用直立自动缩放,但不希望图片框可见,请使用无框因子。它还将排除在图像下插入标题的可能性。包含透明背景的图像示例:[[File: Love Pumpkin.png | frameless | upright0.5 | left | linkHalloween]]]

拇指和框架选项

拇指和框架选项用灰色框架围绕图像,可选择在框架中的照片下方添加文本。边框只加边框,适合小插画。 Thumb(小)还会将图像缩小到预定大小,即标准的 220 像素。缩略图的标准尺寸可以由每个用户单独定制。因此,在正常情况下,不建议使用“thumb”参数以像素为单位输入图像大小,但在特殊情况下,您可以为其设置任何大小,以像素为单位给出其宽度。使用“框架”选项时,无法更改插图的大小。带有“拇指”和“框架”选项的插图默认为右对齐(与“右”选项一样)。但是,这也可以使用“中心”和“左”选项进行更改。示例:[[文件:Cyanocitta-cristata-004.jpg |拇指|蓝鸟]][[文件:Cyanocitta-cristata-004.jpg|拇指|左|300px|蓝鸟]][[文件:Cyanocitta-cristata- 004.jpg | 拇指 | 中心 | 400 像素 | [[Blue Jay]]]] 和结果:这是一个测试文本,使用拇指选项在图像周围流动 - 没有调整大小或流动。这是使用拇指选项在图像周围流动的测试文本 - 没有大小或环绕。这是使用拇指选项在图像周围流动的测试文本 - 无大小和无环绕。这是使用拇指选项在图像周围流动的测试文本 - 没有大小或环绕。这是围绕图像流动的测试文本,拇指选项环绕左侧并调整为 300 像素。这是围绕图像流动的测试文本,拇指选项环绕左侧并调整为 300 像素。这是围绕图像流动的测试文本,拇指选项环绕左侧并调整为 300 像素。这是围绕图像流动的测试文本,其中拇指选项向左环绕并调整为 300 像素。这是测试文本,它不会在带有拇指、居中选项且大小固定为 400 像素的图像周围流动。这是测试文本,它不会在带有拇指、中心选项和固定为 400 像素的大小的图像周围流动。这是测试文本,它不会在带有拇指、居中选项且大小固定为 400 像素的图像周围流动。这是测试文本,它不会在带有拇指、居中选项且大小固定为 400 像素的图像周围流动。此外,此处显示了在插图描述中插入指向维基百科页面的链接的可能性。

建议

正确的选项是默认选项。因此,使用“thumb”选项插入图形时不应输入,对于带有thumb选项的插图,如果没有必要,则不需要指定严格的尺寸。然后将使用默认图像尺寸(默认为 220 像素),每个注册用户都可以根据自己的喜好单独调整。但是,由于并非每个阅读维基百科的用户都被注册,因此可以使用更多像素更清晰地看到插图。大多数情况下,插入 200px、250px 甚至 300px。但是,您应该始终考虑文章的总体构成以及某些文章的屏幕分辨率为 800 × 600 的事实。

稍微高级的解决方案

冒号

插图代码开头的冒号将其转换为常规链接。当您不想在页面上看到图片,但希望将读者定向到它以便他可以在单击链接后查看时,这很有用。示例:[[: Piano - schemat.svg | Piano 构造方案]] 和效果:Piano 构造方案

链接到文章和替代文本

为了在点击图片后直接链接到文章,使用适当的链接参数,例如[[File: Ananas.jpg | 20px | linkAnanas]] 效果:第二个参数是alt,可以输入替代文本,不下载图形时会显示,例如[[File: Ananas.jpg | 50px | altAnanas可食用]]

画廊

链接到 Commons 上的媒体收藏

建议创建 {{Commonscat}} 或 {{Commons}} 模板: {{Commonscat | Category name | Name to display}} {{Commonscat | West Tatra Mountains | Western Tatras}} {{Commons | Commons name | Name到视图}} {{Commons | Gallery Terpenes | Terpenes}} 此代码将产生如右图所示的效果:如果插入 Commons 画廊链接的文章名称与文章标题相同要显示的画廊,请取消以单独的名称显示。

创建一个迷你画廊:标记

或者,您可以创建迷你画廊,但不建议这样做,它由几个 (3-4) 图形组成,用于关闭一个部分或文章。但是,值得考虑是否以不同的方式将它们集成到文章中,因为它们在框架中的大小由于标签而自动创建. 入口: 文件:Formosan sika deer.jpg | [[东方鹿]] 文件:Bubo bubo Winter 1.jpg | [[Eurasian Eagle Owl | Eurasian Eagle Owl]] 文件:Turdus pilaris2.jpg | [[Whisker]] 将产生的效果是:不要将单个图形放在 [[]] 标签中。并非所有图形在这种类型的画廊中看起来都不错。相反,它们应该包含那些尺寸与画廊窗口本身的尺寸一致的尺寸。此外,对于画廊,您不应该给出过多的描述。在某些情况下,这会产生不良影响: 迷你图库中插图的大小 要解决上述问题,您可以操纵图库中插图的大小参数 - 高度和宽度。通过使用标签您可以定义一行中图片的宽度、高度和数量。例如,对于以下代码: 文件:Tyholttornet.jpg | 图形描述 1 文件:Vernazzanotower.jpg | 图形描述 2 文件:Malchin-wohnturm.jpg | 图形描述 3 结果将是: 画廊的标题 1 画廊的标题 2 modepacked 参数也可用。代码: 文件:Tyholttornet.jpg | 图 1 文件:Vernazzanotower.jpg | 图 2 文件:Malchin-wohnturm.jpg | 图 3 将给出结果:图库标题 1 标准图库中没有参数和标题的相同图片:

创建一个迷你画廊:{{Expanded Graphics}} 模板

应用实例:

创建折叠/滚动迷你画廊:{{Gallery}} 模板

应用实例:

创建音频文件列表

使用代码:[[文件:Baczynski-01-Prowiesc_Adrian-Wisniewski.ogg]] 这个寓言由 Adrian Wiśniewski 阅读 [[文件:Baczynski-02-Ach-thought_Kamil-Dominiak.ogg]] 沉思,读 Kamil Dominiak [[文件:Baczynski-03-Miserere_Gabriela-Oberbek.ogg]] Miserere,读到 Gabriela Oberbek。

可能的问题

虽然在 Mediawiki 中插入插图看似简单,但在缺乏实践的情况下,有时会导致奇怪的、意想不到的效果和问题。

文件名问题

新手用户的一个常见问题是为图片键入正确的文件名。维基百科要求您 100% 严格参考文件名。该软件的名称和任何特殊字符(如空格、破折号、下划线等)区分大小写。 示例:文件名是:“Fitz Roy 框架树(颜色平衡).jpg”[[文件:Fitz roy 框架树( color balans) .JPG | 拇指 | 错误名称 - 字母不同]] [[文件:Fitz Roy 框架树(颜色 balans).jpg | 拇指 | 错误名称 - 唯一的区别是括号和扩展名“.jpg”]] [[文件:Fitz Roy 框架树(色彩平衡).jpg |拇指| 终于好了!]] 和效果:避免文件名麻烦的最简单方法是显示描述页面这个文件在一个单独的窗口中并复制它的名字,放在描述标题中,到正在编写的文章的代码中。

全景图

典型的全景图,例如 Zabrze 或 Kielce 文章中的全景图,应该在屏幕的整个宽度上拉伸。但是,由于用户使用的分辨率不同,最好给出600px左右的最小可能值。但是,为了方便地插入更大的图形,您可以使用以下代码:{{Large graphics | Graphic name.jpg | size | description}} 例如:{{Large graphics | Panorama of Kielce ssj 20060423.jpg | 5000px | Panorama的凯尔采}} 多亏了这一点,全景将显示在一个带有水平条的窗口中:注意!大图不应放在文章开头。读者在击中正确的文章后,需要的不是巨大的全景图,而是最重要的信息。 {{大图形}} 模板应插入适当的部分(例如景观、建筑等)或文章的最后,在任何导航模板之前。

来信

图形周围的文字在右边的流动和用代码“*”或“#”创建的枚举的情况下看起来特别不好,因为接下来的子点的字符进入图形。例如,代码:[[File: SF Golden Gate Bridge splash CA.jpg | left | 100px]] * text 1 * text 2 * text 3 * text 4 # list 1 # list 2 # list 3 看起来像这样: text 1 text 2 text 3 text 4 text 6list 1 list 2 list 3 这个问题的一个简单解决方案是使用带有拇指选项的插图: text 1 text 2 text 3 text 4 text 6list 1 list 2 list 3

如何避免插图分成两部分?

另一个经常遇到的问题是插图落入了文本的下几个部分。当部分中的文本太短而插图“太长”时,就会发生这种情况。这种效果高度依赖于屏幕分辨率。但是,与前一种情况不同的是,屏幕分辨率越高,这种情况就越频繁。在更高的屏幕分辨率下,文本具有“更多空间”并且插图的高度不会改变。示例代码:

示例 1

[[文件:Oil well scheme.svg | thumb | 150px]] 这是一个测试短文本。; 从右侧输入部分标题的插图示例 [[File: Oil well scheme.svg | thumb | left | 150px]] 这是一个测试短文本。; 这是左手图“攻击”的标题,这是一个测试短文。结果:

示例 1

这是一个测试短文。从右侧输入章节标题的插图示例。给别人看,我们会多写点东西,因为有些人的屏幕分辨率更高,这是一个测试短文。这是左手图“攻击”的标题,这是一个测试短文。这个问题没有简单的解决方案。只需避免带有高插图的短部分。一种解决方案是使用 {{clear}} 模板,这会使下一节的标题出现在页面两侧的插图和表格下方。但是,此解决方案通常会在屏幕上留下大片空白区域。也可以使用带有 {{clear | left}} 或 {{clear | right}} 参数的模板。您可以在此处找到详细信息:{{clear}}。示例代码:

示例 2

[[文件:Oil well scheme.svg | thumb | 150px]] 这是一个测试短文本。{{清除}}; 现在不与右侧重叠 [[File: Oil well scheme.svg | thumb | left | 150px]] 这是一个测试短文本。{{清除}}; 现在不从左边重叠。这是一个测试短文本。结果:

示例 2

这是一个测试短文。现在不重叠了。这是一个简短的文本。现在不重叠左 这是一个测试短文本。

带有垂直缩放问题的左对齐插图

如果左对齐插图(选项左)的正确放置出现问题,您可以将其放置在迷你画廊中 - 不幸的是,此方法不允许使用 upright 参数进行自动缩放。解决方案可能是使用 none(当右侧有一个大的信息框时特别有用): code: [[file: SweetyViper (8864273175) .jpg | thumb | upright0.7 | none | optional comment]] 会有效果:

结语

如果您想在分辨率低于您现在使用的分辨率的页面上查看编辑文本的外观,您可以简单地减小浏览器窗口的大小。要获得 800 × 600 和 1024 × 768 的窗口大小,请将浏览器窗口缩小大约 1/3。您还可以打开某种侧边栏,例如书签或历史记录。更新图片后,有可能浏览器仍显示旧版本。然后您应该直接从维基百科服务器下载页面,而不是从缓存中下载。为此,请使用组合键: 在 Internet Explorer 中:Mozilla / Firefox 中的 Ctrl + F5:Ctrl + R 或按住 Shift,单击重新加载或 Opera 中的 Ctrl + F5:取决于版本 Ctrl-Shift -R、Ctrl + R 或 Ctrl + F5。

也可以看看

{{Graphics Expanded}} {{Gallery}} {{Frame}} {{Frame shadow}} {{Frame radius}} {{Gradient}} Mediawiki:插图类别:需要插图的文章