|
Moegirlpedia would welcome your assistance in improving this article☆Kira~
As you read this article, you're welcome to participate in editing this page. Before editing, please read the wiki quickstart, editing guidelines and retrieve relevant information. We wish you a good time on Moegirlpedia. |
|
|
This help document describes how to use external images in Moegirlpedia. For images used in articles, please prioritize uploading them to Moegirl Commons to reference them as internal images.
Reminder: The images in Moegirl Commons will not appear in the Special:WhatLinksHere page and cm:Special:GlobalUsage, which may cause some images in use to be mistakenly judged as unused and deleted. If the internal image writing method cannot meet the needs, please try to add hidden image links or use {{Link to file}} to ensure internal links on the pages that use external links.
Simple syntax
Simply use an external image, you can directly input or paste the picture address into the article (as below).
Simple display of external images
Insert the image address directly in the text to display the image:
https://img.moegirl.org.cn/common/8/87/2010-DEC-13MoeGirlWikiLogo.png
The effect is as follows:
When used in this way, do not include URL parameters after the picture.
- Help
- Magic words/parser functions#Data and parsing of URLs and headers
You can also use {{-{}-filepath:内部图片文件名}} to display the internal image as an external image, such as {{:filepath:2010-DEC-13MoeGirlWikiLogo.png}}
The effect is as follows:
Typesetting external images using templates
- Main page: Template:Imgextlink
External images with links
[https://zh.moegirl.org.cn/ https://img.moegirl.org.cn/common/8/87/2010-DEC-13MoeGirlWikiLogo.png]
- Note
- The format is [<nowiki>'''link address''' (space) ''image address'']</nowiki>
The effect is as follows:
2010-DEC-13MoeGirlWikiLogo.png
Annotated external image
- Main page: Template:Extimagecaption
There is a template in Moegirlpedia that allows editors to easily add frames to, align, and float external pictures.
The syntax is: {{Extimagecaption|image address|annotation text|position (right by default)|width=size (400px by default)}}
{{Extimagecaption|https://img.moegirl.org.cn/common/8/87/2010-DEC-13MoeGirlWikiLogo.png|This is MoeGirlWiki LOGO|Left|Width=150px}}
The effect is as follows:Warning: Do not use internal images in external image templates.
src attribute.
Warning: Do not use site images in external image templates.
External image gallery
- Main page: Template:Gallery
Basic input: {{Gallery|title=gallery title|width=maximum width of a single image|height=maximum height of a single image|image 1 address|image 1 title|image 2 address|image 2 title|...}}
- Note
- If there is no title, only delete the text, do not delete the separating vertical lines.
-{}-
{{Gallery|title=This is Moegirlpedia's logo|width=150|height=150
|https://img.moegirl.org.cn/common/8/87/2010-DEC-13MoeGirlWikiLogo.png|This
|https://img.moegirl.org.cn/common/8/87/2010-DEC-13MoeGirlWikiLogo.png|is
|https://img.moegirl.org.cn/common/8/87/2010-DEC-13MoeGirlWikiLogo.png|Moe
|https://img.moegirl.org.cn/common/8/87/2010-DEC-13MoeGirlWikiLogo.png|girl
|https://img.moegirl.org.cn/common/8/87/2010-DEC-13MoeGirlWikiLogo.png|pe
|https://img.moegirl.org.cn/common/8/87/2010-DEC-13MoeGirlWikiLogo.png|dia's
|https://img.moegirl.org.cn/common/8/87/2010-DEC-13MoeGirlWikiLogo.png|logo
}}
The effect is as follows:
| This is Moegirlpedia's logo | ||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Syntax with <img />
<img /> syntax may be relatively complicated, but using this syntax can change the size of the external image (which cannot be done with simple syntax) and other functions.
Basic format
<img src="http://vignette2.wikia.nocookie.net/half-life/images/b/bc/Black_Mesa_logo_documents.svg/revision/latest?cb=20100327173831&path-prefix=en" />
The result is as follows:
This way of writing is displayed the same as the image in #simple syntax.
Image scaling
There are two ways to achieve image scaling: defining the image width (width attribute) and/or defining the image height (height attribute).
Using the width property
If you need an image with a width of 250px:
<img src="https://img.moegirl.org.cn/common/8/87/2010-DEC-13MoeGirlWikiLogo.png" style="width:250px;" />
The effect is as follows:
Using the height property
If you need a picture with a height of 150px:
<img src="https://img.moegirl.org.cn/common/8/87/2010-DEC-13MoeGirlWikiLogo.png" style="height:150px;" />
The effect is as follows:
Using both
Defining the height and width at the same time can achieve the effect of stretching the picture.
- Note: There is no difference in sequence between the width attribute and the height attribute, that is, there is no difference between "write width first, then height" and "write height first, then width".
<img src="https://img.moegirl.org.cn/common/8/87/2010-DEC-13MoeGirlWikiLogo.png" style="height:300px;width:500px;" / >
The effect is as follows:
- Note 1: Usually too large pictures should not be placed in the body of the article, which will be inconvenient for readers to browse. The width of most images should be approximately between 100 and 400 pixels, so when setting the image size, the value should not exceed this range.
- Note 2: Forcibly enlarging the picture will reduce the resolution, because we require the picture to be 500 pixels wide, but the actual size of the picture is not 500 pixels wide but only 400 pixels wide, so the browser's typesetting display must force the picture to be enlarged To 500 pixels wide, the display effect will be poor. Soremember neverenlarge the bitmap image according to this method.
Other properties
The <img /> syntax has other optional properties:
| Property | Value | Description |
|---|---|---|
| src | URL | Required. Specifies the URL to display the image. |
| height | pixels % |
Defines the height of the image. |
| width | pixels % |
Sets the width of the image. |
| alt | text | Specifies the alternative text for the image (the text content is displayed when the image cannot be displayed). |
| title | text | The text prompt displayed when the mouse is over. |
| longdesc | URL | Points to the URL of the document containing the long description of the image. |
| ismap | URL | Defines an image as a server-side image map. |
| usemap | URL | Defines an image as a client-side image map. |
- For details of each attribute, please refer to: References.
References and notes
- HTML <img> tag
- For more image templates, see Category:Image templates