Help:Images/id

Halaman ini menjelaskan sintaks gambar ketika menyunting wiki. Anda atau pengguna lain biasanya harus mengunggah gambar sebelum Anda bisa menggunakannya di halaman.

Gambar yang disimpan di sebuah server MediaWiki biasanya ditampilkan menggunakan prefiks ruang nama  (tapi prefiks ruang nama warisan   masih didukung sebagai sinonim) sebagai target suatu pranala MediaWiki. Prefiks ruang nama  juga bisa digunakan untuk mengacu pada konten berkas media yang asli (untuk menampilkan atau mengunduhnya secara terpisah, di luar halaman MediaWiki apapun).

Requisites
Before using images in your page, the system administrator of your wiki must have enabled file uploads and a user has to upload the file. System administrators may also set the wiki to accept files from foreign repositories, such as the Wikimedia Commons. For server side image resizing it is necessary to have a scaler configured (such as GD2, ImageMagick, etc.).



Jenis media yang didukung untuk gambar
Format berkas berikut didukung secara standar:


 * atau  - gambar bitmap dimampatkan dalam format JPEG standar (format lossy ini paling cocok untuk hasil fotografi).
 * - gambar bitmap dalam format Portable Network Graphics (ditetapkan oleh W3 Consortium).
 * - gambar bitmap dalam Graphics Interchange Format warisan.
 * - WebP supports both lossy and lossless compression while reducing image size by up to 45%.

Fotmat lain yang digunakan di Wikimedia, dan biasanya diaktifkan di tempat lain (ini mungkin membutuhkan pengaturan lebih daripada yang diberikan secara standar):


 * - gambar yang bisa diskalakan dalam format Scalable Vector Graphics (ditetapkan oleh W3 Consortium). Lihat Manual:Administrasi gambar#SVG.
 * - Format gambar ber-tag. Biasanya digunakan untuk foto arsip beresolusi tinggi. Biasanya digunakan dengan.
 * ,,   - Multimedia (audio atau video) Ogg. Bukan format gambar, tapi diperlakukan dengan cara yang mirip. Biasanya digunakan dengan.
 * - dokumen multihalaman dalam Portable Document Format (awalnya ditetapkan oleh Adobe). Biasanya digunakan bersama dengan.
 * - dokumen bitmap multihalaman dalam format DejaVu (biasanya, pindaian buku). Lihat
 * Hanya satu halaman dari berkas  atau   yang ditampilkan pada satu waktu.

Jenis media lain mungkin didukung, tapi mungkin tidak bisa ditampilkan dalam barisan.



Sintaks
Sintaks lengkap untuk menampilkan gambar adalah:

dengan options bisa jadi kosong atau pilihan-pilihan berikut ini, dipisahkan dengan pipa (|):


 * Pilihan format: salah satu antara border, frameless, frame (atau framed), dan/atau thumb (atau thumbnail). Note: border can be used in combination with frameless but will be ignored if used with one of the other options.
 * Mengendalikan bagaimana gambar yang tampil diformat dan ditanamkan di halaman.
 * Pilihan mengatur ukuran: salah satu dari
 * {lebar}px — Mengatur ukuran gambar agar muat dalam lebar yang diberikan dalam satuan piksel, tanpa membatasi tingginya. (Hanya mendukung nilai piksel bilangan bulat. Karakter spasi di antara nilai lebar dan "px" diperbolehkan.)
 * x{tinggi}px — Mengatur ukuran gambar agar muat dengan tinggi yang diberikan dalam satuan piksel, tanpa membatasi lebarnya Hanya mendukung nilai piksel bilangan bulat. Karakter spasi di antara nilai lebar dan "px" diperbolehkan.
 * {lebar}x{tinggi}px — Mengatur ukuran agar muat dalam lebar dan tinggi yang diberikan dalam satuan piksel Hanya mendukung nilai piksel bilangan bulat. Karakter spasi di antara nilai lebar dan "px" diperbolehkan.
 * upright — Mengatur gambar agar muat dengan dimensi yang masuk akal, sesuai dengan preferensi pengguna (cocok untuk gambar yang tingginya lebih besar daripada lebarnya). Mengatur  akan menampilkan gambar sesuai lebar gambar default pengguna.   akan menampilkan gambar yang dua kali lebarnya lebar default pengguna.
 * Gambar akan selalu mempertahankan perbandigan aspeknya.
 * Gambar dalam jenis media yang tidak bisa diskala bisa dikurang ukurannya, tapi tidak bisa diperbesar.
 * Pengaturan  tidak membutuhkan tanda sama dengan, jadi   tidak berbeda dengan.
 * Ketika digunakan tanpa nilai atau tanda sama dengan (contoh: ), default-nya menghasilkan   (meskipun   sama dengan  )
 * Ukuran maksimum standar bergantung pada format dan dimensi gambar internal (menurut jenis medianya).
 * Pilihan perataan horizontal: salah satu dari left, right, center, none. Jika dari pilihan-pilihan tersebut beberapa dimasukkan, hanya yang pertama yang akan digunakan
 * Mengendalikan perataan horizontal (dan gaya dalam barisan atau pelayangan) dari gambar di dalam teks (tidak ada nilai standar).
 * Pilihan perataan vertikal: pilih satu dari baseline, sub, super, top, text-top, middle, bottom, dan text-bottom
 * Mengendalikan perataan vertikal dari gambar dalam barisan yang tidak melayang dengan teks sebelum atau sesudah gambar, dan dalam blok yang sama (default-nya bernilai middle).
 * Pilihan pranala: pilih satu dari
 * link={target} — Membolehkan mengubah target pranala ke judul halaman manapun, atau ke URL, bisa diaktifkan di permukaan gambar yang dtiampilkan; contoh  ditampilkan sebagai Example.jpg (pranala luar), atau   ditampilkan sebagai Example.jpg (pranala internal).
 * link= (dengan nilai kosong) — (MediaWiki 1.14+) Menampilkan gambar tanpa pranala yang bisa diaktifkan; contohnya  ditampilkan sebagai Example.jpg.
 * Jika terdapat karakter spasi di antara  dan tanda sama dengan, pernyataan pranala akan dianggap sebagai keterangan gambar.
 * Memasukkan beberapa karakter HTML yang ekuivalen, seperti  dengan , bisa menyebabkan pernyataan pranala dianggap sebagai keterangan (lihat T306216).


 * ! untuk MW 1.24 dan di bawahnya: Jika Anda menetapkan  (kosong), maka tidak ada   yang ditampilkan. (Lihat T23454.)
 * Pilihan-pilihan lainnya:
 * alt={teks alternatif} — (MediaWiki 1.14+) Mendefinisikan teks alternatif (memetakan kepada atribut HTML  dari elemen  yang dihasilkan) dari gambar yang akan ditampilkan jika gambar yang diacu tidak bisa diunduh dan ditanamkan, atau jika dukungan media harus menggunakan teks deskripsi alternatif (misalnya, jika menggunakan pembaca Braille atau dengan pilihan aksesibilitas yang ditentukan oleh pengguna di penjelajahnya).
 * Jika terdapat karakter spasi di antara  dan tanda sama dengan, pernyataan alt akan dianggap sebagai keterangan gambar.
 * page={nomor} — Akan menampilkan halaman sesuai nomor halamannya (untuk sekarang hanya diterapkan ketika menampilkan berkas .djvu atau .pdf).
 * class={kelas html} — (MediaWiki 1.20+) Mendefinisikan kelas (memetakan kepada atribut HTML  dari elemen  yang dihasilkan).
 * lang={kode bahasa} — (MediaWiki 1.22+) Untuk berkas SVG yang mengandung pernyataan &lt;switch&gt; yang berbeda sesuai dengan atribut systemLanguage-nya, memilih bahasa apa yang digunakan untuk menampilkan berkas. Standarnya adalah bahasa halaman (yang standarnya adalah bahasa default proyek dalam kebanyakan proyek).

Jika parameter tidak memenuhi semua pilihan di atas, maka akan diasumsikan bahwa itu merupakan teks keterangan. Jika terdapat lebih dari satu string non-parameter, string non-parameter yang terakhir akan digunakan sebagai keterangan. Teks keterangan ditampilkan di bawah gambar dalam format thumb dan frame, atau sebagai teks tooltip dalam format lainnya. Teks keterangan yang ditampilkan dalam format thumb dan frame bisa mengandung pranala wiki dan pemformatan lainnya. Ekstensi MediaWiki bisa menambahkan pilihan lain.

Jika 'alt' tidak ditentukan dan sebuah keterangan diberikan, teks alternatif akan dibuat secara otomatis dari keterangan, dihapus pemformatannya, kecuali ketika dalam mode thumb atau frame karena keterangannya sudah bisa dibaca oleh pembaca layar dalam kasus itu.

Format
Tabel berikut menunjukkan efek dari semua format yang tersedia.

Jika tinggi gambar dalam thumbnail lebih besar dari lebarnya (orientasinya portrait bukannya landscape) dan Anda merasa gambarnya terlalu besar, Anda bisa bencoba pilihan, dengan N melambangkan perbandingan aspek gambar (lebarnya dibagi tingginya, standarnya adalah 0,75). Cara lainnya adalah menetapkan tinggi maksimum (dalam satuan piksel) yang diinginkan secara eksplisit.

Perhatikan bahwa dengan menulis, Anda bisa menggunakan gambar yang berbeda untuk thumbnailnya.



Ukuran dan bingkai
Dalam format yang berbeda, efek dari parameter ukuran juga bisa jadi berbeda, seperti yang akan ditampilkan di bawah.

Dalam contoh di bawah, ukuran asli dari gambar adalah 400 x 267 piksel.
 * Untuk bagaimana penampilannya apabila tidak ditetapkan ukurannya, lihat bagian Format di atas.
 * Ketika format tidak ditetapkan, atau hanya di-, ukurannya bisa diperkecil maupun diperbesar menjadi ukuran berapapun.
 * Gambar dengan  selalu mengabaikan penetapan ukuran, gambar yang asli akan diperkecil apabila melebihi ukurang maksimum yang ditetapkan di preferensi pengguna, dan informasi halaman akan menampilkan galat Linter.
 * Ukuran gambar dengan  atau   bisa diperkecil, tapi tidak bisa diperbesar lebih dari ukuran asli gambar.



Perataan horizontal
Perhatikan bahwa ketika menggunakan format  atau , perataan horizontal standarnya selalu right untuk bahasa kiri-ke-kanan dan left untuk bahasa kanan-ke-kiri.



Perataan vertikal
Pilihan perataan vertikal hanya akan berpengaruh apabila gambar ditampilkan sebagai elemen dalam barisan dan tidak melayang. Mereka memengaruhi bagaimana gambar dalam barisan akan diratakan vertikal terhadap teks yang berada di blok yang sama sebelum dan/atau sesudah gambar ini di baris yang sama.

Perhatikan bahwa teks di mana gambar dalam barisan dimasukkan (dan barisan teks yang ditampilkan setelahnya) mungkin akan diturunkan (ini akan meningkatkan tinggi baris secara kondisional dengan tambahan spasi baris, seperti yang bisa terjadi pada teks dengan ukuran fon beragam, atau dengan superskrip dan subskrip) agar tinggi gambar bisa ditampilkan penuh dengan batasan perataan ini.



Untuk menampilkan hasil perataan dengan lebih jelas, teksnya digarisatasi dan digarisbawahi, ukuran fon diperbesar 200%, dan blok paragraf dikotaki dengan tepian tipis; serta beberapa gambar dengan ukuran berbeda diratakan:

 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

Catatan:


 * 1) Posisi perataan vertikal "middle" dari gambar (yang juga merupakan standar) biasanya mengacu pada pertengahan antara tinggi-x dan garis dasar teks (di mana garis tengah gambar dijajarkan, dan di mana teks biasanya digaristengahi), tapi tidak pada pertengahan tinggi-baris dari tinggi fon yang mengacu pada ruang di antara posisi "text-top" dan "text-botttom"; tinggi fon tidak memasukkan:
 * 2) * spasi pembatas baris tambahan biasanya membagi rata menjadi dua margin baris (di sini 0,5em, menurut tinggi baris yang diatur menjadi 200%) di atas dan di bawah tinggi baris.
 * 3) * ruang antar baris tambahan yang bisa ditambahkan dengan superskrip dan subskrip.
 * 4) Namun, jika tinggi gambar menyebabkan posisi atas atau bawahnya menjadi di atas atau di bawah teks dengan tinggi-baris biasa, posisi tengah akan disesuaikan setelah meningkatkan margin-baris atas dan/atau bawah agar gambar bisa muat dan diratakan dengan benar, dan semua gambar (termasuk yang tingginya lebih kecil) akan ditengahkan secara vertikal di posisi tengah yang disesuaikan (untuk memperhitungkan tinggi-baris yang lebih efektif, teks dari masing-masing baris dengan tinggi-fon yang lebih besar akan dipertimbangkan).
 * 5) Posisi perataan "text-top" dan "text-bottom" juga tidak memasukkan ruang antar baris yang ditambahkan superskrip dan subskrip, tapi tetap memasukkan ruang antar baris tambahan dari tinggi-baris.
 * 6) Posisi perataan "top" dan "bottom" memperhitungkan semua ruang antar baris tambahan (termasuk superskrip dan subskrip, jika terdapat dalam jangkauan baris yang dihasilkan). When the image alignment constrains the image to grow above or below the normal line-spacing, and the image is not absolutely positioned, the image will cause the "top" and "bottom" positions to be adjusted (just like superscripts and subscripts), so the effective line-height between rendered lines of text will be higher.
 * 1) The "underline", "overline" and "overstrike" text-decoration positions should be somewhere within these two limits and may depend on the type and height of fonts used (the superscript and subscript styles may be taken into account in some browsers, but usually these styles are ignored and the position of these decorations may not be adjusted); so these decorations normally don't affect the vertical position of images, relatively to the text.



Menghentikan aliran teks
Dalam keadaan di mana diinginkan untuk menghentikan teks (atau gambar tidak melayang lainnya) agar tidak mengalir di sekitar gambar yang melayang. Bergantung pada resolusi layar peramban web dan sebagainya, aliran teks di sisi kanan gambar bisa menyebabkan judul baigan (contohnya, == Judul bagian == ) muncul di sisi kanan gambar, bukannya di bawahnya, seperti yang pengguna harapkan. Aliran teks bisa dihentikan dengan menaruh   (atau jika Anda lebih suka, ) sebelum teks yang sebaiknya dimulai di bawah gambar melayang. (Ini juga bisa dilakukan tanpa baris kosong dengan cara membungkus bagian dengan gambar melayang menggunakan, yang membersihkan semua pelayang di dalam elemen  .)

Semua gambar yang ditampilkan sebagai blok (di antaranya gambar center yang tidak melayang, gambar yang melayang di left atau right, serta gambar melayang frame atau thumbnail) secara implisit memecahkan barisan teks yang mengelilinginya (mematikan blok teks sebelum gambar, dan membuat paragraf baru untuk teks setelahnya). Mereka kemudian akan bertumpuk secara vertikal di margin perataan kiri atau kanan mereka (atau di garis tengah di antara margin untuk gambar center).



Mengubah target pranala default
Tabel berikut menunjukkan cara mengubah target pranala (yang standarnya adalah halaman keterangan gambar) atau cara menghapusnya. Mengubah pranala tidak mengubah format yang dijelaskan di bagian-bagian sebelumnya.

Peringatan:
 * Persyaratan lisensi di wiki Anda mungkin tidak membolehkan Anda menghapus semua pranala ke halaman keterangan yang menampilkan atribusi pembuat yang diharuskan, pernyataan hak cipta, ketentuan lisensi yang diterapkan, atau keterangan lebih lengkap dari gambar yang ditampilkan (termasuk riwayat perubahannya).
 * Jika Anda mengubah atau menghapus pranala target gambar, Anda harus memberikan di tempat lain di halaman Anda sebuah pranala eksplisit ke halaman keterangan, atau menampilkan pernyataan hak cipta dan pembuat serta pranala ke lisensi yang diterapkan, jika mereka berbeda dari elemen yang diterapkan ke halaman itu sendiri.
 * Kebijakan wiki Anda mungkin membatasi penggunaan parameter pranala alternatif, atau bahkan melarang parameter pranala alternatif untuk berkas media yang ditanam (dalam kasus tersebut, parameter pranala akan diabaikan), atau hanya menerima mereka setelah di validasi oleh pengguna yang berwenang atau pengurus.

<span id="Rendering_a_gallery_of_images">

Menampilkan galeri gambar
<span id="Gallery_syntax">

Sintaks galeri
Mudah untuk membuat galeri berisi thumbnail menggunakan tag. Sintaksnya adalah:

Perhatikan bahwa kode gambar tidak ditutup oleh tanda kurung siku ketika ditutup tag galeri.

Keterangan bersifat opsional, dan bisa mengandung pranala wiki atau pemformatan lainnya.

Beberapa parameter yang mengendalikan keluaran thumb bisa digunakan di sini, tepatnya yang mengubah berkas (bukan yang mengendalikan peletakan gambar). Misalnya, dengan media multihalaman seperti pdf, Anda bisa menggunakan kode seperti.

Prefiks  bisa dihilangkan. Namun, akan membantu jika tetap dimasukkan untuk membantu menemukan penanda gambar dalam teks wiki (misalnya, ketika merapikan tata letak halaman).

Sebagai contoh:

diformat menjadi:

<span id="mode_parameter">

Parameter mode
Mulai dari 1.22, tersedia sebuah parameter, dengan pilihan sebagai berikut:


 * adalah jenis galeri yang aslinya digunakan oleh MediaWiki.
 * mirip dengan, tetapi tanpa garis pembatas.
 * menyebabkan gambar memiliki tinggi yang sama tetapi lebarnya berbeda, dengan sedikit ruang di antara gambar. Baris-baris dalam mode responsif ini mengatur diri mereka sendiri sesuai lebar layar.
 * menampilkan keterangan di depan gambar, dalam kotak putih semi-transparan.
 * mirip dengan, tetapi keterangan dan kotaknya hanya muncul ketika kursor diarahkan ke depannya.
 * membuat rangkaian salindia dari gambar-gambarnya.

Contohnya:

Memberikan (mode: ):

<span id="Optional_gallery_attributes">

Atribut galeri opsional
Tag galeri sendiri menerima beberapa parameter tambahan, ditetapkan sebagai pasangan atribut nama-nilai:


 * : (teks keterangan di antara tanda petik untuk teks yang lebih dari satu kata) mengatur keterangan yang diletakkan rata tengah di atas galeri. Hanya teks polos yang digunakan dalam keterangan; pemformatan, templat, dan sejenisnya tidak akan bekerja.
 * : mengatur lebar (maksimum) gambar; nilai standarnya adalah 120px. (It has no effect if mode is set to one of the following: packed, packed-overlay, packed-hover, slideshow.) Perhatikan jamaknya: widths.
 * : mengatur tinggi (maksimum) gambar; nilai standarnya adalah 120px. (It has no effect if mode is set to slideshow.)
 * : mengatur banyak gambar per baris. (It has no effect if mode is set to one of the following: packed, packed-overlay, packed-hover, slideshow.) 0 berarti menyesuaikan secara otomatis pada lebar layar.
 * : Menampilkan nama berkas gambar dalam keterangan masing-masing gambar (1.17+).
 * : Lihat bagian di atas (1.22+; 1.28+ untuk "slideshow").
 * : Khusus mode "slideshow", tampilkan baris berisi thumbnail gambar di bawah rangkaian salindia secara default (1.29+).


 * Contoh 1

Sintaksis:

Hasil:

<span id="Row_of_images_that_will_wrap_to_browser_width">

Barisan gambar yang membungkus lebar peramban
Salah satu cara yang bekerja untuk menghasilkan sebaris gambar dengan lebar yang beragam adalah dengan cara tidak menggunakan "thum", "left", atau "none". Jika "thumb" tidak digunakan (sehingga tidak ada keterangan), maka sebaris gambar akan tampil sesuai lebar peramban. Jika perlu, sempitkan jendela peramban untuk melihat gambarnya masuk ke baris berikutnya.





To wrap images of varying widths with captions it is necessary to use div HTML for an unordered list. Along with. For more info and ideas see: Give Floats the Flick in CSS Layouts.

<ul> <li style="display: inline-block;"> </li> <li style="display: inline-block;"> </li> <li style="display: inline-block;"> </li> <li style="display: inline-block;"> </li> <li style="display: inline-block;"> </li> <li style="display: inline-block;"> </li> <li style="display: inline-block;"> </li> <li style="display: inline-block;"> </li> </ul>

To align the top edge of images add the vertical-align command

<ul> <li style="display: inline-block; vertical-align: top;"> </li> <li style="display: inline-block; vertical-align: top;"> </li> <li style="display: inline-block; vertical-align: top;"> </li> <li style="display: inline-block; vertical-align: top;"> </li> <li style="display: inline-block; vertical-align: top;"> </li> <li style="display: inline-block; vertical-align: top;"> </li> <li style="display: inline-block; vertical-align: top;"> </li> <li style="display: inline-block; vertical-align: top;"> </li> </ul>

Some wiki farms do not have all gallery options (such as "widths"). Also, sometimes one wants varying widths for images in a row. Outside of a gallery, or the div HTML, it is impossible to have individual captions for images in a row of images that will wrap to the browser width. Try it and see. Nothing else using wikitext works correctly. Images will either overlap stuff on the right, or force a horizontal scroll bar.

Using a left float ("left") for some images, combined with "none" for some of the images, will not work consistently either, especially if there is also a right sidebar of images. Weird things will occur. At narrower browser or screen widths an image out of the row may appear far down the page after the end of the right sidebar of images.

Link behavior
By default an image links to its file description page. The "link=" option modifies this behavior to link to another page or website, or to turn off the image's linking behavior.

Alternatively, you can create a text link to a file description page or to the file itself. See.

Display image, link it to another page or website
Use "link=" option to link image to another page or website:

Clicking on the below image will take you to MediaWiki:





Clicking on the below image will take you to example.com:





Display image, turn off link
Use "link=" option with no value assigned to turn link off entirely; the below image is not a link:





Link to an image
Add  as a prefix to the link you need to create.

File:MediaWiki-2020-logo.svg File:MediaWiki-2020-logo.svg Wiki Wiki

Directly linking to an image
The above examples link to the image's description page. To directly link to an image, the pseudo-namespace  can be used on MediaWiki pages:

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

Direct links from external sites
Another possibility is to use the Special:Redirect/file page (or its alias Special:Filepath). Unlike the above example, you can link to it from external websites as well as from MediaWiki pages.

The parameters  and   can also be added to return a specific size of the image. The image aspect ratio is always preserved.

Obtaining the full URL of an image
To obtain the full path of an image (without going through redirects as shown above), some can be used.

Becomes:



In the event that this is used from a template where the  namespace needs to be removed,   can do so:

Becomes:



Files at other websites
You can link to an external file available online using the same syntax used for linking to an external web page. With these syntaxes, the image will not be rendered, but only the text of the link to this image will be displayed.



Or with a different displayed text:

link text here

Additional MediaWiki markup or HTML/CSS formatting (for inline elements) is permitted in this displayed text (except for embedded links that would break the surrounding link):

Example  rich   link text  here.

which renders as: [http://www.example.com/some/image.png Example  rich   link text  here. ]

If it is enabled on your wiki (see ), you can also embed external images. To do that, simply insert the image's URL: http://url.for/some/image.png Embedded images can be resized by the CSS  property. They also may be formatted by surrounding MediaWiki markup or HTML/CSS code.

If this wiki option is not enabled, the image will not be embedded but rendered as a textual link to the external site, just like above, unless the site's has a value.

<span id="See_also">

Lihat pula

 * Wikipedia:Extended image syntax
 * Kategori:Bantuan gambar Wikipedia
 * Wikipedia:Tutorial (Berkas)
 * Bantuan:Galeri
 * T113101 - masalah responsif
 * Extension:PageImages#Can I exclude certain page images?
 * Extension:PageImages#Can I exclude certain page images?