Help:External images

This page, "Help:External images", is a Moegirlpedia help document It is meant to introduce the operating method of some specific functions in Moegirlpedia; This article is merely a statement, not a Moegirlpedia policy or guideline. If there is any conflict or inconsistency between this help document and the relevant policies and guidelines, then the policies and guidelines shall prevail.

This help document describes how to use external images in the 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: link 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 Template:Link into 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:Image external link

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:External Image Annotation

There is a template in Moegirlpedia that allows editors to easily add frames to, align, and float external pictures.

The syntax is: {{external image annotation|image address|annotation text|position (right by default)|width=size (400px by default)}}

{{External Image Comments|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 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
This  is  Moe  girl  pe  dia'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	Mandatory. 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.