Help:Images

이 페이지는 위키를 편집할 때 이미지 구문을 설명합니다. 여러분 또는 또 다른 사용자는 보통 이미지를 업로드해야 해당 이미지를 페이지에서 사용할 수 있습니다.

미디어위키 서버에 저장되는 이미지는 보통 File: 이름공간 접두어를 미디어위키 링크의 대상으로 사용함으로써 렌더링됩니다 (그러나 이전의 Image: 이름공간 접두사는 여전히 동의어로 지원됩니다). 대안적인 Media: 이름공간 접두사는 역시 (임의의 미디어위키 페이지 밖으로, 개별적으로 렌더링하거나 다운로드하기 위해) 원형의 미디어 파일 컨텐트를 참조하기 위해 사용할 수 있습니다.

Supported media types for images

다음 파일 형식이 기본적으로 지원됩니다:

.jpg 또는 .jpeg – 표준 JPEG 형식으로 압축된 비트맵 이미지 (이 손실 형식은 사진에 가장 적합합니다).
.png – (W3 컨소시엄에 의해 지정된) Portable Network Graphics 형식에서 비트맵 이미지.
.gif – 이전의 Graphics Interchange Format의 비트맵 이미지.

다른 형식들이 위키미디어에서 사용되고, 공통적으로 다른 곳에서 활성화됩니다 (이것들은 기본적으로 무엇이 활성화되었는지 이상의 여분의 설정이 필요할 수 있습니다):

.svg – (W3 컨소시엄에 의해 지정된) Scalable Vector Graphics 형식으로 확장-가능한 이미지. Manual:Image Administration#SVG를 참조하십시오.
.tiff – 태그가 지정된 이미지 형식. 종종 고-해상도 보관 사진에 사용됩니다. 종종 Extension:PagedTiffHandler와 함께 사용됩니다.
.ogg, .oga, .ogv – Ogg 멀티미디어 (오디어 또는 비디어). 이미지 형식은 아니지만, 비슷하게 취급됩니다. 종종 Extension:TimedMediaHandler와 함께 사용됩니다.
.pdf – Portable Document Format에서 다중-페이지 문서 (처음에 Adobe에서 지정됨). 종종 Extension:PdfHandler와 함께 사용됩니다.
.djvu – DejaVu 형식으로 다중-페이지 비트맵 문서 (가장 자주, 책의 스캔). Manual:How to use DjVu with MediaWiki을 참조하십시오.
오직 .pdf 또는 .djvu 파일의 단일 페이지가 한 번에 표시됩니다.

다른 미디어 유형은 지원될 수 있지만, 그것들을 인라인으로 나타내는 것이 가능하지 않을 것입니다.

Rendering a single image

Syntax

이미지를 표시하기 위한 전체 구문은 다음입니다:

[[File:filename.extension|options|caption]]

여기서 options은 영 또는 파이프(|)로 구분된 다음 중 하나 이상일 수 있습니다:

최상의 결과를 얻으려면, 아래 나열된 옵션 모두에 대해 소문자를 사용하십시오 (예를 들어, Thumb이 아니라 thumb을 사용하십시오. 일부 옵션은 대문자로 시작할 때 작동하지만, 대부분은 무시됩니다. (자세한 내용에 대해 T216566를 참조하십시오.)

Format option: border 및/또는 framessless, frame (또는 framed), thumb (또는 thumbnail) 중 하나입니다. 만약 여러 옵션이 존재하면, 이미지 렌더링은 예상할 수 없습니다.
렌더링된 이미지의 형식을 지정하고 해당 페이지에 포함시키는 방법을 제어합니다.

위의 옵션의 여러 개가 사용될 때, 예기치 않은 결과가 발생할 수 있고, 오류가 표시되지 않을 수 있습니다. 세부 사항에 대해 T264464를 참조하십시오.

Resizing option: 다음중 하나입니다
- {width}px — 높이의 제한없이 주어진 최대 폭 이내에 맞게 이미지의 크기를 조정합니다. 오직 자연수 픽셀 값이 지원됩니다. 폭 값과 "px" 사이에 공백 문자가 허용됩니다.
- x{height}px — 폭의 제한없이 주어진 최대 높이 이내에 맞게 이미지의 크기를 조정합니다. 오직 자연수 픽셀 값이 지원됩니다. 높이 값과 "px" 사이에 공백 문자가 허용됩니다.
- {width}x{height}px — 픽셀에서 지정된 폭과 높이 이내에 맞게 이미지의 크기를 조절합니다.
- upright — 사용자 환경 설정에 따라 적절한 크기 이내로 이미지 크기를 조정합니다 (높이가 폭보다 더 큰 이미지에 적합합니다). |upright=1.0|로 설정하는 것은 사용자의 기본 이미지 폭에 이미지를 표시할 것입니다. |upright=2.0|는 사용자의 기본 폭 두 배에 이미지를 표시할 것입니다.
이미지는 항상 종횡비를 유지합니다.

크기 조정 가능한 미디어 유형에 있지 않은 이미지는 크기에서 줄어들 수 있지만, 늘릴 수는 없습니다; 예를 들어, 비트맵 이미지는 크기를 늘릴 수는 없습니다.

upright 옵션은 등호 기호를 요구하지 않습니다; 즉, |upright 2.0|은 |upright=2.0|과 같게 작동합니다.

값 또는 등호 기호없이 사용될 때 (예를 들어, |upright|), 기본적으로 |upright=0.75|로 동작합니다 (하지만 |upright=|는 |upright=1.0|과 같습니다).

만약 |upright| 및 |upright=number|가 존재하면, 첫 번째 |upright|는 무시될 것입니다. 자세한 것에 대해 T216003를 참조하십시오.

"upright"와 등호 기호 사이에 공백 문자가 있으면 (예를 들어, |upright =number|), 또는 "upright" 값이 비-숫자 문자를 포함하고 있으면, upright 값은 무시될 것입니다. 자세한 것에 대해 T216003를 참조하십시오.

기본 최대 크기는 format 및 내부 이미지 크기 (미디어 유형에 따라 다름)에 따라 달라집니다.
Horizontal alignment 옵션: left, right, center, none 중 하나입니다. 만약 이들 옵션의 여러 개가 존재하면, 오직 첫 번째 하나가 사용될 것입니다.
텍스트 내의 이미지의 수평 정렬 (및 인라인/블록 또는 부동 스타일)을 제어합니다 (기본값 없음).
Vertical alignment 옵션: baseline, sub, super, top, text-top, middle, bottom, text-bottom 중 하나입니다.
이미지의 앞이나 뒤의 텍스트와 함께, 및 같은 블럭에서 비-플로팅 인라인 이미지의 수직 정렬을 조정합니다 (기본 수직 정렬은 middle입니다).
Link 옵션: 다음 중 하나입니다
- link={target} — 생성된 링크의 대상 (임의의 페이지 제목, 또는 URL)을 변경을 허용하며, 렌더링된 이미지 표면에서 활성화 가능합니다; 예를 들어 [[File:Example.jpg|20px|link=http://www.wikipedia.org]]는 (외부 링크)로 렌더링되거나, [[File:Example.jpg|20px|link=Main Page]]는 (내부 링크)로 렌더링됩니다.
- link= (빈 값인 경우) — (MediaWiki 1.14+) 임의의 활성화 가능한 링크없이 이미지를 표시합니다; 예를 들어, [[File:Example.jpg|20px|link=]]는 로 렌더링됩니다.
만약 link와 등호 사이에 공백 문자가 있으면, 링크 선언은 대문자로 처리될 것입니다.

"에 대해 %22와 같은, 동등한 일부 HTML 문자를 포함하는 것은 링크 선언을 캡션으로 처리하는 원인이 될 수 있습니다 (phabricator:T216003를 참조하십시오).

MW 1.24와 그 아래에 대해 !: 만약 |link=| (빈 것)을 설정하면, title는 랜더링되지 않을 것입니다. (phabricator:T23454를 참조하십시오).

다른 특정 옵션:
- alt={alternative text} — (MediaWiki 1.14+) 만약 참조된 이미지가 다운로드되지 않거나 삽입될 수 없으면, 또는 지원 미디어가 대안적인 설명 텍스트를 사용해야만 하면 (예를 들어, 점자 판독기를 사용할 때 또는 브라우저에서 사용자에 의해 설정된 접근성 옵션을 가질 때) 랜더링되려는 이미지의 대안적인 텍스트 (생성된 <img /> 요소의 HTML 속성 alt="..."로 매핑됨)를 정의하십시오.
만약 alt와 등호 사이에 공백 문자가 있으면, alt 선언은 캡션으로 처리될 것입니다.
- page={number} — 지정된 페이지 숫자를 렌더링합니다 (현재 .djvu 또는 .pdf 파일을 표시할 때 오직 적용 가능합니다).
- class={html class} — (MW 1.20+) 클래스를 정의하십시오 (생성된 <img /> 요소의 HTML 속성 class="..."로 매핑됩니다).
- lang={language code} — (MW 1.22+) systemLanguage 속성에 따라 달라지는 <switch> 선언을 포함하는 SVG 파일에 대해, 파일을 렌더링할 언어를 선택합니다. 기본값은 페이지 언어입니다 (대부분의 프로젝트에서 기본값은 프로젝트 기본 언어입니다).

만약 매개 변수가 다른 가능성과 일치하지 않으면, 캡션 텍스트로 가정됩니다. 만약 둘 이상의 비-매개변수 문자열이 존재하면, 마지막 비-매개변수 문자열은 캡션으로 사용될 것입니다. 캡션 텍스트는 thumb 및 frame 형식으로 이미지 아래에 표시되거나, 임의의 다른 형식에서 툴팁 텍스트로 표시됩니다. thumb 및 frame 형식으로 표시된 캡션 텍스트는 위키 링크와 다른 형식을 포함할 수 있습니다. 미디어위키 확장은 추가적인 옵션을 더할 수 있습니다.

만약 'alt'가 지정되지 않고 캡션이 제공되면, 대안적인 텍스트는 thumb 또는 frame 모드에 있을 때를 제외하고, 형식이 제거된 캡션에서 자동으로 생성될 것인데 왜냐하면 캡션은 해당 경우에서 이미 스크린 리더에서 읽을 수 있기 때문입니다.

실제 기본 동작은 멀티미디어 파일을 전체 크기로 표시하는 것입니다. 이것은 만약 파일 폭이 페이지보다 더 크면, 반응하는 문제로 이어질 수 있습니다. 자세한 내용에 대해 작업 phab:T113101을 참조하십시오.

Format

다음 테이블은 모든 사용 가능한 형식의 효과를 보여줍니다.

설명	입력하십시오	결과입니다
no format specified Rendered as a floating block: no Rendered inline: yes Rendered caption: no	... text text text [[File:example.jpg\|caption]] text text text ...	... text text text text text text ...
border results in a very small gray border Rendered as a floating block: no Rendered inline: yes Rendered caption: no	... text text text [[File:example.jpg\|border\|caption]] text text text ...	... text text text text text text ...
frameless, like thumbnail, respect user preferences for image width, but without border and no right float Rendered as a floating block: no Rendered inline: yes Rendered caption: no	... text text text [[File:example.jpg\|frameless\|caption]] text text text ...	... text text text text text text ...
frameless and border Rendered as a floating block: no Rendered inline: yes Rendered caption: no	... text text text [[File:example.jpg\|frameless\|border\|caption]] text text text ...	... text text text text text text ...
frame Rendered as a floating block: yes Rendered inline: no Rendered caption: yes	... text text text [[File:example.jpg\|frame\|caption]] text text text ...	... text text text caption text text text ...
thumb or thumbnail Rendered as a floating block: yes Rendered inline: no Rendered caption: yes	... text text text [[File:example.jpg\|thumb\|caption]] text text text ...	... text text text caption text text text ...

썸네일에서 이미지의 높이가 폭보다 더 크고 (즉, 가로이 아닌 세로 방향에서), 이미지가 너무 클 때, 옵션 upright=N을 시도할 수 있으며, 여기서 N은 이미지의 종횡비입니다 (폭을 높이로 나눈 값, 기본적으로 0.75).

thumb={filename}을 쓺으로써, 썸네일과 다른 이미지를 사용할 수 있다는 점을 주목하십시오.

Size and frame

다양한 형식 중에서, 크기 매개 변수의 효과는 아래에 보여지는 것처럼 다를 수 있습니다.

크기가 지정되지 않았을 때 그것이 나타나는 방법에 대해, 위의 Format 부분을 참조하십시오.
형식이 지정되지 않았거나, 또는 오직 border로 지정될 때, 크기는 축소되고 임의의 지정된 크기로 확대될 수 있습니다.
아래 예제에서, 이미지의 원본 크기는 400 × 267 픽셀입니다.
frame을 갖는 이미지는 항상 크기 지정을 무시하며, 만약 사용자 환경 설정에 정의된 최대 크기를 초과하면 원본 이미지가 축소될 것입니다.
thumb 또는 frameless을 갖는 이미지의 크기는 줄어들 수 있지만, 이미지의 원래 크기 이상으로 확대될 수는 없습니다.

형식	축소된	확대된
(not specified)	[[File:example.jpg\|50px]]	[[File:example.jpg\|500px]]
border	[[File:example.jpg\|border\|50px]]	[[File:example.jpg\|border\|500px]]
frame	[[File:example.jpg\|frame\|50px]]	[[File:example.jpg\|frame\|500px]]
thumb	[[File:example.jpg\|thumb\|50px]]	[[File:example.jpg\|thumb\|500px]]
frameless	[[File:example.jpg\|frameless\|50px]]	[[File:example.jpg\|frameless\|500px]]

Horizontal alignment

frame 또는 thumb[nail] 형식을 사용했을 때, 기본 수평 정렬은 왼쪽-에서-오른쪽 언어는 오른쪽이고, 오른쪽-에서-왼쪽 언어는 왼쪽임을 주목하십시오.

설명	입력하십시오	결과입니다
no horizontal alignment specified, or default alignment Rendered as a floating block: no Rendered inline: yes	... text text text [[File:example.jpg\|100px\|caption]] text text text ...	... text text text text text text ...
specify horizontal alignment as: none Rendered as a floating block: no Rendered inline: no	... text text text [[File:example.jpg\|none\|100px\|caption]] text text text ...	... text text text caption text text text ...
specify horizontal alignment as: center Rendered as a floating block: no Rendered inline: no	... text text text [[File:example.jpg\|center\|100px\|caption]] text text text ...	... text text text caption text text text ...
specify horizontal alignment as: left Rendered as a floating block: yes Rendered inline: no	... text text text [[File:example.jpg\|left\|100px\|caption]] text text text ...	... text text text caption text text text ...
specify horizontal alignment as: right Rendered as a floating block: yes Rendered inline: no	... text text text [[File:example.jpg\|right\|100px\|caption]] text text text ...	... text text text caption text text text ...

Vertical alignment

수직 정렬 옵션은 이미지가 인라인 요소로 렌더링된 경우에만 적용되고, 부동(floating)일 경우에는 적용되지 않습니다. 그것들은 인라인 이미지가 같은 렌더링된 행에서 해당 이미지의 앞 및/또는 뒤의 같은 블록에 있는 텍스트와 수직으로 정렬되는 방법으로 변경됩니다

인라인 이미지가 삽입된 렌더링 텍스트 줄 (및 현재 행 뒤에 렌더링된 텍스트 즐)은 이런 정렬 제약 조건으로 인해 이미지 높이가 완전히 표시될 수 있도록 아래로 이동될 수 있음을 주목하십시오 (이것은 추가적인 줄 간격을 조건으로 줄-높이를 증가시킬 것입니다; 예를 들어, 가변적인 글꼴 크기를 갖는, 또는 위첨자와 아래첨자를 갖는 텍스트의 범위에서 발생할 수 있습니다).

Toggle source code view

<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
'''top:''' [[File:Example.jpg|20px|top]] [[File:Example.jpg|40px|top]] [[File:Example.jpg|100px|top]]
<del>text</del></u></span></p>
 
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
'''text-top:''' [[File:Example.jpg|20px|text-top]] [[File:Example.jpg|40px|text-top]] [[File:Example.jpg|100px|text-top]]
<del>text</del></u></span></p>
 
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
<sup>super:</sup> [[File:Example.jpg|20px|super]] [[File:Example.jpg|40px|super]] [[File:Example.jpg|100px|super]]
<del>text</del></u></span></p>
 
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
'''baseline:''' [[File:Example.jpg|20px|baseline]] [[File:Example.jpg|40px|baseline]] [[File:Example.jpg|100px|baseline]]
<del>text</del></u></span></p>
 
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
<sub>'''sub:'''</sub> [[File:Example.jpg|20px|sub]] [[File:Example.jpg|40px|sub]] [[File:Example.jpg|100px|sub]]
<del>text</del></u></span></p>
 
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
'''default:''' [[File:Example.jpg|20px]][[File:Example.jpg|40px]] [[File:Example.jpg|100px]]
<del>text</del></u></span></p>
 
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
'''middle:''' [[File:Example.jpg|20px|middle]] [[File:Example.jpg|40px|middle]] [[File:Example.jpg|100px|middle]]
<del>text</del></u></span></p>
 
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
'''text-bottom:''' [[File:Example.jpg|20px|text-bottom]] [[File:Example.jpg|40px|text-bottom]] [[File:Example.jpg|100px|text-bottom]]
<del>text</del></u></span></p>
 
<p style="border:1px solid #AAA;padding:0;font-size:150%;line-height:2">
<span style="background:#FFF;color:#000;text-decoration:overline"><u><del>text</del>
'''bottom:'' [[File:Example.jpg|20px|bottom]] [[File:Example.jpg|40px|bottom]] [[File:Example.jpg|100px|bottom]]
<del>text</del></u></span></p>

정렬 결과를 보다 명확하게 보기 위해서, 텍스트 범위는 괘선과 밑줄이 그어지고, 폰트-크기는 200%로 증가되고, 단락 블록은 얇은 테두리로 윤곽이 표시됩니다; 추가적으로 다양한 크기의 이미지가 정렬됩니다:

~~text~~ top: ~~text~~

~~text~~ text-top: ~~text~~

~~text~~ ^super: ~~text~~

~~text~~ baseline: ~~text~~

~~text~~ _sub: ~~text~~

~~text~~ default: ~~text~~

~~text~~ middle: ~~text~~

~~text~~ text-bottom: ~~text~~

~~text~~ bottom: ~~text~~

주목할 것:

이미지의 "middle" 수직 정렬 위치 (역시 기본값)는 보통 텍스트의 x-높이와 기준선 사이의 중간을 가리키지만 (이미지의 수직 가운데로 정렬될 것이고, 보통 텍스트가 겹쳐서 표시될 수 있음), "text-top"과 "text-bottom" 위치 사이의 공간을 나타내는 글꼴-높이의 줄 높이 중간은 아닙니다; 글꼴-높이는 제외합니다:
- 추가 줄 분리 간격은 통상적으로 글꼴-높이 위와 아래의 두 줄-여백으로 균등하게 나뉩니다 (여기서 0.5em, 줄-높이에 따라 200%로 설정).
- 추가 줄 간격은 위첨자와 아래첨자에 의해 더해질 수 있습니다.
어쨌던, 만약 이미지 높이가 위쪽 또는 아래쪽 위치를 텍스트의 정상적인 전체 줄-높이보다 위로 또는 아래로 가는 원인이 되면, 중간 위치는 이미지가 적절하게 맞춰지고 정렬되도록 꼭대기 및/또는 바닥 줄-여백을 증가한 후에 조정될 수 있고, 모든 이미지 (더 낮은 높이를 갖는 이미지를 포함)는 조정된 중간 위치에서 수직적으로 중심에 배치될 수 있습니다 (효과적인 줄-높이 계산을 위해서, 더 큰 글꼴-높이를 가진 렌더링된 각 행의 텍스트가 고려될 것입니다).
"text-top" 및 "text-bottom" 정렬 위치는 역시 위첨자 및 아래첨자에 의해 더해진 여분의 줄 간격을 제외하지만, 줄-높이에 의해 정의된 추가적인 줄-간격은 그렇지 않습니다.
"top" 및 "bottom" 정렬 위치는 모든 이들 여분의 줄 간격을 고려합니다 (만약 그것들이 렌더링된 줄 늘림이면, 위첨자와 아래첨자도 포함합니다). 이미지 정렬이 이미지를 일반 줄-간격 위 또는 아래로 변하는 것을 제한하고, 이미지가 절대 위치에 있지 않았을 때, 이미지는 "top" 및 "bottom" 위치를 조정되려는 원인이 될 것이므로 (마치 위첨자와 아래첨자처럼), 렌더링된 텍스트 줄 사이의 효과적인 줄-높이가 더 높아질 것입니다.
"underline", "overline" 및 "overstrike" 텍스트-장식 위치는 이들 두 제한 내 어딘가에 있어야 하고, 아마도 사용된 글꼴의 유형과 높이에 따라 다를 것입니다 (위첨자 및 아래첨자 스타일은 일부 브라우저에서 고려될 수 있지만, 보통 이들 스타일은 무시되고 이들 장식의 위치는 조정될 수 없을 것입니다); 따라서 이들 장식은 통상적으로, 텍스트와는 상대적으로, 이미지의 수직 위치에 영향을 미치지 않습니다.

Stopping the text flow

때때로 텍스트(또는 다른 인라인 비-플로팅 이미지)를 플로팅 이미지 주위로 흐르는 것을 막는 것이 바람직합니다. 웹 브라우저의 화면 해상도 등에 따라, 이미지 오른쪽의 텍스트 흐름은 섹션 헤더 (예를 들어, == My Header ==)가, 사용자가 기대할 수 있듯이, 이미지 아래 대신에 오른쪽에 나타나는 원인을 제공합니다. 텍스트 흐름은, 플로팅 이미지 아래에서 시작해야 하는 텍스트 앞에, <br clear=all> (또는 선호한다면, <div style="clear: both"></div>)을 배치함으로써 중지될 수 있습니다. (이것은 <div style="overflow: hidden">…</div>를 갖는 흐르는 이미지와 함께 섹션을 감쌈으로써 빈 줄없이 수행될 수도 있으며, 이것은 div 요소 내부의 모든 뜨는 것을 지웁니다.)

블록으로 렌더링된 모든 이미지 (비-플로팅 center 이미지, left- 또는 right-플로팅 이미지, framed 또는 thumbnail 플로팅 이미지를 포함)는 암시적으로 둘러싸는 텍스트 줄을 끊습니다 (이미지 앞의 현재 텍스트의 블록을 종료하고, 그것들 뒤의 텍스트에 대해 새 단락을 생성합니다). 그것들은 그런-다음 왼쪽 또는 오른쪽 정렬 여백을 따라 (또는 center 이미지에 대해 이들 여백 사이의 중심선을 따라) 수직적으로 쌓일 것입니다.

Altering the default link target

다음 테이블은 링크 대상 (기본값은 이미지 설명 페이지임)을 변경하거나 또는 제거하는 방법을 보여줍니다. 링크를 변경하는 것은 이전 섹션에서 설명된 형식을 변경하지 않습니다.

설명

입력하십시오

결과입니다

internal link

... text text text
[[File:example.jpg|link=Main Page|caption]]
text text text ...

... text text text

text text text ...

external link

... text text text
[[File:example.jpg|link=http://wikipedia.org/wiki/Test|caption]]
text text text ...

... text text text

text text text ...

no link (external or file page)

... text text text
[[File:example.jpg|link=|caption]]
text text text ...

... text text text

caption text text text ...

경고 :

만약 이미지의 대상 링크를 변경하거나 제거하면, 여러분은 그런-다음 여러분의 페이지의 어떤 곳에 이 설명 페이지에 대한 명시적인 링크를 제공하거나, 만약 그것들이 삽입하는 페이지 자체에 적용할 수 있는 요소와 다르면, 저작권과 저자권자 설명과 적용할 수 있는 라이선스에 대한 링크를 표시해야 할 것입니다.

여러분의 위키 정책은 대안적인 링크 매개변수의 사용을 제한할 수 있거나, 심지어 삽입된 미디어 파일 (이 경우에서, 링크 매개변수는 무시될 것입니다)에 대한 대안적인 링크 매개변수의 금지를 강제할 수 있거나, 오직 권한이 부여된 사용자 또는 관리자에 의한 검증 후에 그것들을 수락할 수 있습니다.

Rendering a gallery of images

Gallery syntax

<gallery> 태그로 썸네일의 갤러리를 만드는 것은 쉽습니다. 구문은 다음과 같습니다:

<gallery>
File:file_name.ext|caption|alt=alt language
File:file_name.ext|caption|alt=alt language
{...}
</gallery>

이미지 코드는 갤러리 태그에 포함될 때에 대괄호로 묶지 않는다는 것을 주목하십시오.

캡션은 선택 사항이고, 위키 링크 또는 기타 형식을 포함할 수 있습니다.

캡션으로 사용된 단어 "center", "left", 및 "right"는 거짓-양성 Linter 오류의 원인이 됩니다. 자세한 것에 대해 T266406를 참조하십시오.

예를 들어:

<gallery>
File:Example.jpg|Item 1
File:Example.jpg|a link to [[Help:Contents]]
File:Example.jpg
File:Example.jpg|alt=An example image. It has flowers
File:Example.jpg|''italic caption''
Example.jpg|on page "{{PAGENAME}}"
File:Using Firefox.pdf|page=72
</gallery>

는 다음으로 형식화됩니다:

Item 1
a link to Help:Contents
italic caption
on page "Images"

Mode parameter

MediaWiki version:

≥ 1.22

1.22에서 시작하여 mode 매개변수가 유용하며, 다음처럼 옵션을 취합니다:

traditional는 미디어위키에 의해 사용된 원래 갤러리 유형입니다.
nolines는 traditional와 비슷하지만, 경계선을 갖지 않습니다.
packed는 이미지를 같은 높이이지만 이미지 사이의 작은 공백을 갖는 다른 폭을 가지는 원인이 됩니다. 이 반응 모드에서 행은 화면의 폭에 따라 자체로 조직됩니다.
packed-overlay는 반-투명 흰 상자에서 이미지 위에 겹쳐진 캡션을 보입니다.
packed-hover는 packed-overlay와 비슷하지만, 캡션과 상자는 오직 마우스가 올려지면 표시됩니다.
slideshow는 이미지의 슬라이드쇼를 생성합니다.

예를 들어: 아래의 미디어위키 페이지에서 확인하십시오.

mw:Help:Images#Mode parameter

Optional gallery attributes

갤러리 태그 자체는 속성 이름-값 쌍으로 지정된 몇 가지 추가적인 매개변수를 취합니다:

<gallery {parameters}>
{images}
</gallery>

caption="{caption}": (두 단어 이상의 큰 따움표 사이에 캡션 텍스트) 갤러리 중앙에 캡션을 설정합니다. 오직 일반 텍스트가 캡션에서 사용될 수 있습니다; 서식, 템플릿 등은 작동하지 않을 것입니다.
widths={width}px: 이미지의 (최대) 폭들을 설정합니다; 기본값은 120px입니다. 복수형: widths에 주목하십시오
heights={heights}px: 이미지의 (최대) 높이를 설정합니다; 기본값은 120px입니다.
perrow={integer}: 행 당 이미지의 숫자를 설정합니다. 0은 화면 폭에 기초하여 자동적으로 조정됨을 의미합니다.
showfilename={anything}: 각 이미지에 대해 개별적인 캡션에서 이미지의 파일 이름을 표시합니다 (1.17+).
mode={traditional|nolines|packed|packed-hover|packed-overlay|slideshow}: 위의 섹션을 참조하십시오 (1.22+; "슬라이드쇼"에 대해 1.28+).
showthumbnails: 오직 "슬라이드쇼" 모드에 대해, 기본적으로 슬라이드쇼 아래에 이미지 썸네일을 갖는 문자열을 표시합니다 (1.29+).

widths 및 heights 매개변수는 패킹된 (및 관련된) 모드에 대해 엄격한 값보다 제안으로 더 많이 사용됩니다. Packed 모드는 각 행을 같은 길이로 만들기 위해 이미지의 폭을 조정할 것입니다.

예제 1:

구문:

<gallery widths=300px heights=200px>
File:Example.jpg|Lorem ipsum
File:Example.jpg|Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
</gallery>

결과:

Lorem ipsum
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut

예제 2

구문:

<gallery widths=60px heights=60px perrow=7 caption="sunflowers are groovy">
File:Example.jpg
File:Example.jpg
File:Example.jpg
File:Example.jpg
File:Example.jpg
File:Example.jpg
File:Example.jpg
File:Example.jpg
File:Example.jpg
File:Example.jpg
</gallery>

결과:

sunflowers are groovy

Row of images that will wrap to browser width

변하는 폭을 갖는 이미지의 행에 작동하는 한 가지 방법은 "thumb", "left" 또는 "none"을 사용하지 않는 것입니다. 만약 "thumb"이 사용되지 않으면 (그리고 따라서 캡션이 없으면) 이미지의 행이 브라우저 폭에 맞게 감쌀 것입니다. 필요하다면, 브라우저 창을 좁혀 이미지가 다음 행으로 감싸지는지 확인합니다.

[[File:Example.jpg|220px]]
[[File:Example.jpg|100px]]
[[File:Example.jpg|150px]]
[[File:Example.jpg|250px]]
[[File:Example.jpg|200px]]
[[File:Example.jpg|50px]]
[[File:Example.jpg|220px]]
[[File:Example.jpg|175px]]

변하는 폭의 이미지를 캡션으로 감싸기 위해 정렬되지 않은 목록에 div HTML을 사용해야 합니다. style="display: inline-block;"과 함께. 자세한 정보와 아이디어에 대해 Give Floats the Flick in CSS Layouts을 참조하십시오.

<div><ul> 
<li style="display: inline-block;"> [[File:Example.jpg|thumb|none|220px|Caption 1]] </li>
<li style="display: inline-block;"> [[File:Example.jpg|thumb|none|100px|Caption 2]] </li>
<li style="display: inline-block;"> [[File:Example.jpg|thumb|none|150px|Caption 3]] </li>
<li style="display: inline-block;"> [[File:Example.jpg|thumb|none|250px|Caption 4]] </li>
<li style="display: inline-block;"> [[File:Example.jpg|thumb|none|200px|Caption 5]] </li>
<li style="display: inline-block;"> [[File:Example.jpg|thumb|none|50px|Caption 6]] </li>
<li style="display: inline-block;"> [[File:Example.jpg|thumb|none|220px|Caption 7]] </li>
<li style="display: inline-block;"> [[File:Example.jpg|thumb|none|175px|Caption 8]] </li>
</ul></div>

Caption 1
Caption 2
Caption 3
Caption 4
Caption 5
Caption 6
Caption 7
Caption 8

이미지의 꼭대기 가장자리에 정렬하기 위해 수직-정렬 명령을 더하십시오

<div><ul> 
<li style="display: inline-block; vertical-align: top;"> [[File:Example.jpg|thumb|none|220px|Caption 1]] </li>
<li style="display: inline-block; vertical-align: top;"> [[File:Example.jpg|thumb|none|100px|Caption 2]] </li>
<li style="display: inline-block; vertical-align: top;"> [[File:Example.jpg|thumb|none|150px|Caption 3]] </li>
<li style="display: inline-block; vertical-align: top;"> [[File:Example.jpg|thumb|none|250px|Caption 4]] </li>
<li style="display: inline-block; vertical-align: top;"> [[File:Example.jpg|thumb|none|200px|Caption 5]] </li>
<li style="display: inline-block; vertical-align: top;"> [[File:Example.jpg|thumb|none|50px|Caption 6]] </li>
<li style="display: inline-block; vertical-align: top;"> [[File:Example.jpg|thumb|none|220px|Caption 7]] </li>
<li style="display: inline-block; vertical-align: top;"> [[File:Example.jpg|thumb|none|175px|Caption 8]] </li>
</ul></div>

Caption 1
Caption 2
Caption 3
Caption 4
Caption 5
Caption 6
Caption 7
Caption 8

일부 위키 농장은 모든 갤러리 옵션 (예를 들어, "widths")를 가지지 않습니다. 역시, 때때로 이미지에 대해 다양한 폭을 원합니다. 갤러리, 또는 div HTML 외부에서, 브라우저 폭에 감싸질 이미지의 행에 이미지에 대해 개별적인 캡션을 가지는 것은 불가능합니다. 시도하고 확인하십시오. 위키 텍스트를 사용하는 다른 어떤 것도 제대로 작동하지 않습니다. 이미지는 오른쪽에 있는 항목과 겹치거나 수평 스크롤 막대를 강제할 것입니다.

일부 이미지에 대해 왼쪽 부동 ("왼쪽")을 사용하여, 일부 이미지에 대해 "none"을 결합되면, 특히 이미지의 오른쪽 사이드바가 있으면 일관되게 작동하지 않을 것입니다. 이상한 일이 일어날 것입니다. 더 좁은 브라우저 또는 화면 폭은 이미지의 오른쪽 사이드바가 끝난 후 행에서 벗어난 이미지가 페이지 아래쪽에 나타날 수 있습니다.

Link behavior

기본적으로 이미지는 파일 설명 페이지에 링크됩니다. "link=" 옵션은 이 동작을 수정하여 다른 페이지 또는 웹 사이트에 연결하거나, 이미지의 연결 동작을 해제합니다.

대안적으로, 파일 설명 페이지 또는 파일 자체에 대한 텍스트 링크를 만들 수 있습니다. Help:Linking to files을 참조하십시오.

Display image, link it to another page or website

"link=" 옵션을 또 다른 페이지 또는 웹사이트에 이미지를 링크하기 위해 사용하십시오:

아래 이미지를 클릭하면 미디어위키로 이동할 것입니다:

[[File:MediaWiki-2020-logo.svg|50px|link=MediaWiki]]

아래 이미지를 클릭하면 example.com으로 이동할 것입니다:

[[File:MediaWiki-2020-logo.svg|50px|link=http://example.com]]

Display image, turn off link

링크를 완전히 끄려면 값이 지정되지 않은 "link=" 옵션을 사용하십시오; 아래 이미지는 링크가 아닙니다:

[[File:MediaWiki-2020-logo.svg|50px|link=]]

Link to an image

:를 추가할 필요가 있는 링크에 접두사로 더하십시오.

[[:File:MediaWiki-2020-logo.svg]]

File:MediaWiki-2020-logo.svg

[[:File:MediaWiki-2020-logo.svg|Wiki]]

Wiki

Directly linking to an image

위의 예제는 이미지의 설명 페이지로 연결합니다. 이미지에 직접 링크하기 위해, 유사-이름공간 Media:가 미디어위키 페이지에 사용될 수 있습니다:

[[Media:MediaWiki-2020-logo.svg]]

Media:MediaWiki-2020-logo.svg

Direct links from external sites

또 다른 가능성은 Special:Redirect/file 페이지 (또는 그것의 별칭 Special:Filepath)을 사용하는 것입니다. 위의 예제와 달리, 그것을 외부 웹 사이트와 마찬가지로 미디어위키 페이지에서 링크할 수 있습니다.

[[Special:Redirect/file/Wikipedia.png]]

매개변수 height 및 width는 역시 이미지의 특정 크기를 반환하기 위해 더해질 수 있습니다. 이미지 종횡비는 항상 유지됩니다.

https://www.mediawiki.org/w/index.php?title=Special:Redirect/file/Wikipedia.png&width=100&height=100

Obtaining the full URL of an image

이미지의 전체 경로를 얻기 위해 (위에 표시된대로 리다이렉션을 거치지 않고), 일부 Help:magic words는 사용될 수 있습니다.

{{filepath:MediaWiki-2020-logo.svg}}

다음이 됩니다:

https://upload.wikimedia.org/wikipedia/commons/d/dd/MediaWiki-2020-logo.svg

이것이 File: 이름공간이 제거되어야 하는 템플릿에서 사용되는 이벤트에서, {{PAGENAME}}가 이것을 수행할 수 있습니다:

{{filepath:{{PAGENAME:File:MediaWiki-2020-logo.svg}}}}

다음이 됩니다:

https://upload.wikimedia.org/wikipedia/commons/d/dd/MediaWiki-2020-logo.svg

Requisites

페이지에서 이미지를 사용하기 전에, 위키의 시스템 관리자가 파일 업로드를 활성화하고 사용자가 파일을 업로드해야 합니다. 시스템 관리자는 역시 위키미디어 커먼즈와 같은 외부 저장소의 파일을 허용하도록 위키를 설정할 수 있습니다. 서버 측 이미지 크기 조정을 위해서 스케일러를 구성해야 합니다 (예를 들어 GD2, ImageMagick, 등).

Files at other websites

외부 웹 페이지에 연결하는 데 사용되는 것과 동일한 구문을 사용하여 온라인에서 사용할 수 있는 외부 파일에 링크할 수 있습니다. 이들 구문과 함께, 이미지는 렌더링되지 않을 것이지만, 오직 이 이미지에 대한 링크의 텍스트가 표시될 것입니다.

[http://url.for/some/image.png]

또는 다른 표시된 텍스트와 함께:

[http://url.for/some/image.png link text here]

추가적인 미디어위키 마크업 또는 HTML/CSS 형식 (인라인 요소에 대해)은 이 표시된 텍스트에서 허용됩니다 (주변 링크를 깨는 삽입된 링크는 예외입니다):

[http://www.example.com/some/image.png Example '''<del>rich</del>''' ''<ins>link text</ins>'' here.]

이것은 다음으로 렌드링합니다: Example ~~rich~~ link text here.

만약 그것이 위키에서 활성화되면 (Manual:$wgAllowExternalImages을 참조), 역시 외부 이미지를 삽입할 수 있습니다. 그렇게 하려면, 간단히 이미지의 URL을 삽입하십시오:

http://url.for/some/image.png

삽입된 이미지는 CSS transform 속성에 의해 크기를 조정될 수 있습니다. 그것들은 역시 둘러싸는 미디어위키 마크업 또는 HTML/CSS 코드로 형식화될 수 있습니다.

만약 이 위키 옵션이 활성화되지 않으면, 이미지는 삽입되지 않을 것이지만, 사이트의 Manual:$wgAllowExternalImagesFrom가 값을 가지지 않으면, 바로 위에서 처럼, 외부 사이트로 텍스트의 형식으로 렌더링될 것입니다.

형식	축소된	확대된
(not specified)	[[File:example.jpg\|50px]]	[[File:example.jpg\|500px]]
border	[[File:example.jpg\|border\|50px]]	[[File:example.jpg\|border\|500px]]
frame	[[File:example.jpg\|frame\|50px]]	[[File:example.jpg\|frame\|500px]]
thumb	[[File:example.jpg\|thumb\|50px]]	[[File:example.jpg\|thumb\|500px]]
frameless	[[File:example.jpg\|frameless\|50px]]	[[File:example.jpg\|frameless\|500px]]

Supported media types for images

Rendering a single image

Syntax

Format

Size and frame

Horizontal alignment

Vertical alignment

Stopping the text flow

Altering the default link target

Rendering a gallery of images

Gallery syntax

Mode parameter

Optional gallery attributes

Row of images that will wrap to browser width

Link behavior

Display image, link it to another page or website

Display image, turn off link

Link to an image

Directly linking to an image

Direct links from external sites

Obtaining the full URL of an image

Requisites

Files at other websites

See also