Help:Зображення

This page is a translated version of the page Help:Images and the translation is 100% complete.
PD Зверніть увагу! Коли Ви редагуєте цю сторінку, то погоджуєтесь робити свій внесок під ліцензією CC0. Детальніше про умови ліцензії можна дізнатися на сторінці довідки.
PD

Ця сторінка пояснює синтаксис використання зображень, коли редагуєте вікі. Зазвичай потрібно, щоб Ви або інший користувач завантажили зображення перед тим, як використовувати його на вікі-сторінці.

Зображення, котрі зберігаються на сервері MediaWiki, зазвичай використовуються за допомогою префікса простору імен File: (також унаслідуваний префікс простору імен Image:, котрий до цих пір підтримується як синонім) в якості цільового посилання MediaWiki. Альтернативний префікс простору імен Media: використовується для посилання на оригінальний медіафайл (для окремого відображення чи завантаження, повз жодну сторінку MediaWiki).

Підтримувані медіа-типи зображень

Наступні формати графічних файлів підтримуються за замовчуванням:

  • .jpg або .jpeg - стиснене растрове зображення в стандартному форматі JPEG (формат із втратами, найкраще підходить для фотографій).
  • .png - растрове зображення у форматі Portable Network Graphics (специфікований консорціумом W3).
  • .gif - растрове зображення в застарілому форматі Graphics Interchange Format.

Інші формати, застосовувані у Wikimedia та досить поширені (можливо, для них знадобляться додаткові налаштування рушія поза налаштуваннями за замовчуванням):

  • .svg - масштабоване зображення у форматі Scalable Vector Graphics (специфікований консорціумом W3). Див. Manual:Image_Administration/uk#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.

Можуть підтримуватися й інші медіаформати, але їхнє відображення всередині сторінок вікі може виявитися неможливим.

Демонстрація одного зображення

Синтаксис

Повний синтаксис для демонстрації одного зображення такий:

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

де options може бути відсутнім або містити одне чи кілька розділених вертикальними рисками (|) значень:

Для найкращого результату записуйте всі перелічені нижче значення малими літерами (тобто пишіть thumb, а не Thumb). Значення, записані з великої літери, спрацюють в окремих випадках, але їхню більшість буде проігноровано. (Подробиці див. у task T216566.)
  • Форматування: одне з border та/або frameless; frame (чи framed); thumb (чи thumbnail). Якщо разом вказано суперечливі опції, зображення може бути показано в неочікуваному вигляді.
    Визначає, як зображення форматовано й розташовано на сторінці.
Коли кілька цих значень вказано водночас, результат може бути непередбачуваним, але індикація помилки буде відсутня. Подробиці у task T264464.
  • Масштабування: одне з
    • {ширина}px — Масштабує зображення до вказаної ширини в пікселях, не обмежує його висоту. (Для кількості пікселів підтримуються лише цілі значення. Дозволено пропуск між значенням ширини та суфіксом "px".)
    • x{висота}px — Масштабує зображення до вказаної висоти в пікселях, не обмежує його ширину. Для кількості пікселів підтримуються лише цілі значення. Дозволено пропуск між значенням висоти й суфіксом «px».
    • {ширина}x{висота}px — Масштабує зображення так, аби його розміри не перевищували вказаної ширини й висоти в пікселях. Для кількості пікселів підтримуються лише цілі значення. Дозволено пропуск між значенням ширини та суфіксом "px".
    • upright — Масштабує зображення до резонного розміру згідно з налаштуваннями користувача (придатне для зображень, висота яких більша за ширину). Встановлення |upright=1.0| покаже зображення із шириною, що відповідає користувацькому налаштуванню ширини за замовчуванням. |upright=2.0| покаже зображення з подвійною відносно попередньої шириною.
    Зображення завжди зберігатиме співвідношення сторін.
    Зображення в немасштабованих форматах можуть бути зменшувані, але не збільшувані; так, зображення формату bitmap не можуть бути збільшені.
    Знак рівності після upright необов'язковий, тобто |upright 2.0| спрацює так само, як і |upright=2.0|.
    Якщо не вказано ані числового значення, ані знаку рівності (як-от в |upright|), використовується значення за замовчуванням |upright=0.75| (хоча |upright=| значить те ж саме, що й |upright=1.0|)
    Якщо наявні обидва |upright| та |upright=number|, перший запис |upright| буде проігноровано. Подробиці див. у task T216003.
    Якщо "upright" та знак рівності розділені пропуском, як-от в |upright =number|), або ж якщо значення "upright" містить нечислові символи, значення upright буде проігноровано. Подробиці див. у task T216003.
    Максимальний розмір за замовчуванням залежить від значення format та внутрішніх розмірів зображення (відповідно до його типу).
  • Горизонтальне вирівнювання: одне з left, right, center, none. Якщо одночасно вказано кілька значень, буде використано найперше.
    Визначає горизонтальне вирівнювання (а також стилі inline/block чи floating) зображення на текстовій сторінці. Не має значення за замовчуванням.
  • Вертикальне вирівнювання: одне з baseline, sub, super, top, text-top, middle, bottom, text-bottom
    Визначає вертикальне вирівнювання вбудованого неплаваючого зображення щодо тексту перед і після зображенням, а ще в тому самому блоці (значення за замовчуванням middle).
  • Посилання: одне з
    • link={ціль} — Дозволяє задати ціль згенерованого посилання (на назву довільної сторінки чи URL), яке активується при натисканні на поверхню зображення; так, [[File:Example.jpg|20px|link=http://www.wikipedia.org]] відобразиться як   (зовнішнє посилання), а [[File:Example.jpg|20px|link=MediaWiki]] відобразиться як   (внутрішнє посилання).
    • link= (з порожнім значенням) — (MediaWiki 1.14+) Показує неактивне щодо натискання зображення; так, [[File:Example.jpg|20px|link=]] відобразиться як  .
    Якщо між link і знаком рівності є пропуск, ціль посилання трактуватиметься як підпис.
    Так само включення певних HTML-еквівалентів символів, на кшталт %22 чи ", може привести до того, що ціль посилання трактуватиметься як підпис (див. phabricator:T216003).
    ! для MW 1.24 та старіших: Якщо вказати |link=| (порожнє значення), то title не відобразиться. (Див. phabricator:T23454.)
  • Інші спеціальні параметри:
    • alt={альтернативний текст} — (MediaWiki 1.14+) Визначає замісний текст (відповідає атрибуту HTML alt="..." згенерованого елемента ‎<img />) для зображення, який буде показано, коли зображення неможливо завантажити і вставити або ж підтримуваний інструмент змушений використовувати альтернативний текст (як при читанні Брайля чи з налаштуванням доступності у звичайному браузері).
    Якщо alt і знак рівності розділені пропуском, значення цього параметра трактуватиметься як підпис.
    • page={номер} — Відобразить сторінку з указаним номером (актуальне при показі файлів .djvu чи .pdf).
    • class={класс html} — (MediaWiki 1.20+) Визначає класс (відповідає атрибуту HTML class="..." згенерованого елемента ‎<img />).
    • lang={мовний код} — (MediaWiki 1.22+) Для файлів SVG, що містять оператор <switch>, залежний від атрибуту systemLanguage, вказує мову, якою відображувати файл. За замовчуванням це мова, якою відображено всю сторінку (в більшості проєктів це мова проєкту за замовчуванням).

Якщо текст параметра не відповідає жодному з перелічених варіантів, він трактується як текст підпису. Якщо таких значень вказано більше одного, як підпис буде обрано останнє. Підпис зображення показано під ним у форматах thumb і frame, а в усіх інших - як текст підказки при наведенні покажчика. В форматах thumb і frame підпис зображення може містити вікіпосилання та іншу розмітку. Розширення MediaWiki можуть надавати додаткові параметри контролю відображення.

Якщо 'alt' не вказано і є підпис, замісний текст буде автоматично створено із підпису, з якого буде прибране все форматування, за винятком режимів thumb чи frame, де підпис уже готовий для відображення.

Поведінкою за замовчуванням є відображення мультимедійного файлу в його оригінальному розмірі. Це може спричинити проблеми, якщо ширина зображення більша від ширини відображення сторінки. Див. Task phab:T113101 за подробицями.

Формат

В наступній таблиці показано вплив усіх доступних параметрів форматування.

Якщо в режимі ескізу показується зображення, в якого висота більша від ширини (тобто портретної орієнтації) і воно виглядає завеликим, спробуйте параметр upright=N, де N — відношення ширини до висоти оригінального зображення, за замовчуванням 0.75. Альтернативним способом є пряма вказівка точної висоти зображення в пікселях.

Зверніть увагу, що вказівкою thumb={назва файлу} ви можете підставити як ескіз інше зображення (інший файл).

Розмір і рамка

Для кожного з типів форматування вплив параметра розміру може бути різним, як показано нижче.

  • Вигляд у випадку не вказаного розміру наведено вище в підрозділі Формат.
  • Якщо формат не вказано або вказано лише 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]]

 

Горизонтальне вирівнювання

Зверніть увагу, що при frame чи thumb[nail] горизонтальне вирівнювання за замовчуванням буде right (вправо) для мов із записом зліва направо і left (вліво) для мов із записом справа наліво.

Опис Ви пишете Ви побачите
горизонтальне вирівнювання не вказане, тобто за замовчуванням
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 ...

горизонтальне вирівнювання 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 ...

горизонтальне вирівнювання 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 ...

горизонтальне вирівнювання 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 ...

горизонтальне вирівнювання 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 ...

Вертикальне вирівнювання

Параметри вертикального вирівнювання діють, коли зображення вбудоване і не є плаваючим. Вони змінюють спосіб, в який зображення, вбудоване в текстовий блок, вирівнюється по вертикалі відносно тексту рядка, в якому воно показане.

Зверніть увагу, що відображений рядок тексту, в якому знаходиться зображення, як і наступні рядки, можуть бути зсунуті вниз (тобто збільшиться міжрядковий інтервал, так, як це трапляється при відображенні тексту шрифтами різного розміру або верхніх чи нижніх індексів) для того, щоб показати зображення повністю при вказаних параметрах його вирівнювання.

Перемкнути демонстрацію вихідного коду
<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

Примітки:

  1. Вертикальне вирівнювання "middle" (по центру, за замовчуванням) зазвичай означає середину між базовою лінією тексту і верхнім краєм маленьких літер (тут буде середина зображення, і тут же зазвичай проходить лінія закреслення тексту), але не краєм великих літер, що відповідатиме середині між верхом і низом тексту (між "text-top" і "text-bottom"); висота шрифта не включає в себе:
    • додатковий інтервал між рядками, зазвичай поділений на два рядкових поля (тут 0.5em, відповідно до висоти рядка в 200%) вище і нижче краю літер.
    • додатковий міжрядковий інтервал для верхніх чи нижніх індексів.
  2. Але якщо висота зображення змушує верхню чи нижню лінію зображення вийти за межі звичайної повної висоти рядка, середню позицію буде перераховано після необхідного збільшення верхнього чи нижнього полів рядка і всі зображення (включно з тими, що мають меншу висоту) буде вирівняно до нової середньої позиції (для обчислення висоти рядка обирається відображуваний текст із найбільшим розміром шрифта).
  3. Позиції вирівнювання по верхньому чи нижньому краю тексту ("text-top" і "text-bottom") також не враховують додаткову висоту рядка для відображення нижніх чи верхніх індексів, але враховують висоту рядка, визначену висотою шрифта.
  4. Позиції вирівнювання "top" і "bottom" враховують всі ці додаткові інтервали, в тому числі для верхніх чи нижніх індексів, якщо вони присутні у відображеному фрагменті тексту. Якщо спосіб вирівнювання зображення, яке не абсолютно позиціоновано, веде до того, що воно не вміщується в рядок звичайної висоти, то позиції "top" і "bottom" будуть перераховані (як це робиться при наявності нижніх чи верхніх індексів), і інтервал між відображеними рядками збільшиться.
  5. Позиції підкреслення, надкреслення й закреслення текста мають бути десь всередині цього інтервалу і можуть залежати від типу й висоти застосованого шрифта (окремі браузери можуть також брати до уваги наявність нижніх чи верхніх індексів, але зазвичай відображувані позиції рисок на тексті від цього не залежать); отже, відображення цих ліній не впливає на вертикальне вирівнювання зображення відносно тексту.

Зупинка обтікання текстом

Інколи виникає потреба зупинити обтікання текстом (чи іншими вбудованими в рядок зображеннями) показаного зображення. Залежно від розділення екрану браузера, обтікання зображення текстом може привести до розташування заголовку підрозділу (як-от == Новий підрозділ ==) праворуч від вбудованого зображення, а не під ним, як мало би бути. Обтікання текстом може бути зупинено додаванням у місце розриву в тексті <br clear=all> (або ж синоніма <div style="clear: both"></div>). (Це також можна зробити без порожнього рядка охопленням розділу із плаваючим зображенням тегом <div style="overflow: hidden"></div>, який очищує всю розмітку плавання всередині елемента div).

Всі зображення, відображувані як блоки (включно із неплаваючими центрованими center, а також плаваючими left, right, framed чи thumbnail), беззастережно переривають оточуючі рядки тексту, завершуючи поточний блок тексту перед зображенням і створюючи новий поза ним. Потім вони розміщуються по вертикалі по вказаній межі вирівнювання - верхній, нижній чи певній середній лінії у випадку center.

Зміна стандартного цільового посилання

В наступній таблиці показано, як можна змінити ціль посилання (за замовчуванням це сторінка опису зображення) або взагалі прибрати його. Модифікації посилання не впливають на форматування зображення, описане вище.

Увага:

Ліцензійні вимоги, налаштовані у вашій вікі, можуть не дозволити вам прибрати посилання на сторінку опису, де вказано авторство, авторські права, умови ліцензії чи детальніший опис показаного зображення (включно з історією його змін).
Коли ви змінюєте чи прибираєте посилання на сторінку опису, ви маєте подати це оригінальне посилання десь в іншому місці сторінки або відобразити авторство, авторські права та посилання на відповідну ліцензію, якщо вони відрізняються від такої інформації для відображуваної сторінки в цілому.
Політики вашої вікі можуть обмежувати застосування параметра альтернативного посилання або ж навіть заборонити його використання для вбудовуваних медіафайлів (в цьому випадку параметр посилання буде проігноровано), або дозволяти таки дії лише після підтвердження уповноваженими користувачами чи адміністраторами.

Демонстрація галереї зображень

Синтаксис галереї

Створити галерею ескізів просто за допомогою тегу ‎<gallery>. Синтаксис такий:

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

Зазначте, що внутрішнє посилання на зображення не береться в лапки, коли охоплене тегом галереї.

Підписи до малюнків необов'язкові, можуть містити вікіпосилання чи іншу розмітку.

Ключові слова "center", "left" та "right" при використанні їх як підписів спричиняють хибно позитивну помилку Linter. Див. подробиці у task T266406.

Окремі параметри, що керують відображенням ескізів, придатні для застосування й тут. Це ті з параметрів, які модифікують файл, на противагу тим, що визначають розташування ескізу на сторінці. Приміром, з багатосторінковими медіа на кшталт pdf застосовний параметр вигляду page=4.

Префікс File: перед назвою файла можна не писати. Тим не менше, його рекомендовано вказувати для того, аби швидко знаходити у вікі-коді посилання на зображення (приміром, при очистці ескізу сторінки).

Наприклад:

<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>

відобразиться як:

Параметр mode

Версія MediaWiki:
1.22

Починаючи з версії 1.22, доступний параметр mode, якому можна надавати таких значень:

  • traditional — галерея традиційного для MediaWiki вигляду.
  • nolines подібний до traditional, але не генерує рамку для кожного з ескізів; їх розміщено в комірках пропорційної (можливо, різної) ширини.
  • packed масштабує ескізи до однакової висоти, комірки без рамки, різної ширини і тісно укладені. Рядки ескізів в цьому адаптивному режимі впорядковуються згідно з актуальною шириною екрану.
  • packed-overlay відображує підписи накладеними на ескізи, у напівпрозорих білих прямокутниках.
  • packed-hover подібний до packed-overlay, але прямокутник із підписом з'являється при наведенні покажчика на ескіз.
  • slideshow організує інтерфейс для перегортання зображень, перегляд одне по одному.

Наприклад:

<gallery mode="packed-hover">
Image:Astronotus_ocellatus.jpg|''[[commons:Astronotus ocellatus|Astronotus ocellatus]]'' (Oscar)
Image:Salmonlarvakils.jpg|''[[commons:Salmo salar|Salmo salar]]'' (Salmon Larva)
Image:Georgia Aquarium - Giant Grouper.jpg|''[[commons:Epinephelus lanceolatus|Epinephelus lanceolatus]]'' (Giant grouper)
Image:Pterois volitans Manado-e.jpg|''[[commons:Pterois volitans|Pterois volitans]]'' (Red Lionfish)
Image:Macropodus opercularis - front (aka).jpg|''[[commons:Macropodus opercularis|Macropodus opercularis]]'' (Paradise fish)
Image:Canthigaster valentini 1.jpg|''[[commons:Canthigaster valentini|Canthigaster valentini]]'' (Valentinni's sharpnose puffer)
Image:Flughahn.jpg|[[Image:POTY ribbon 2007.svg|25px]] ''[[commons:Dactylopterus volitans|Dactylopterus volitans]]'' (Flying gurnard)
Image:Fishmarket 01.jpg|''[[commons:Semicossyphus pulcher|Semicossyphus pulcher]]'' (California Sheephead)
Image:Pseudorasbora parva(edited version).jpg|''[[commons:Category:Pseudorasbora parva|Pseudorasbora parva]]'' (Topmouth gudgeon)
Image:MC Rotfeuerfisch.jpg|''[[commons:Category:Pterois antennata|Pterois antennata]]'' (Antennata Lionfish)
Image:Cleaning station konan.jpg|''[[commons:Novaculichthys taeniourus|Novaculichthys taeniourus]]''
Image:Synchiropus splendidus 2 Luc Viatour.jpg|''[[commons:Synchiropus splendidus|Synchiropus splendidus]]'' (Mandarin fish)
File:Psetta maxima Luc Viatour.jpg|''[[commons:Psetta maxima|Psetta maxima]]'' (Turbot)
File:Australian blenny.jpg|''[[commons:Category:Ecsenius|Ecsenius axelrodi]]''
</gallery>

Дає (в режимі packed-hover):

Приклади інших режимів:

mode="traditional"

mode="nolines"

mode="packed"

mode="packed-overlay"

mode="packed-hover"

Версія MediaWiki:
1.28

mode="slideshow"

Додаткові атрибути галереї

Тег галереї як такий приймає кілька власних параметрів у формі назва=значення.

<gallery {parameters}>
{images}
</gallery>
  • caption="підпис": (текст підпису береться в лапки, якщо містить більше одного слова) задає відцентрований підпис над галереєю. Тут можна використати лише простий текст; розмітка, шаблони тощо не працюватимуть.
  • widths={ширина}px: задає (максимальну) ширину ескізу; значення за замовчуванням 120px. Зверніть увагу на множину: widths.
  • heights={висота}px: задає (максимальну) висоту ескізу; значення за замовчуванням 120px.
  • perrow={ціле число}: задає кількість ескізів в одному рядку. 0 означає автоматичне визначення відповідно до ширини екрану.
  • showfilename={будь-що}: Показати назви файлів як індивідуальний підпис до кожного ескізу (версії 1.17+).
  • mode={traditional|nolines|packed|packed-hover|packed-overlay|slideshow}: Див. підрозділ вище (1.22+; для "slideshow" 1.28+).
  • showthumbnails: Лише для "slideshow": з самого початку відобразити стрічку з ескізами під інтерфейсом демонстрації слайдів (1.29+).
В режимі 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>

Результат:

Приклад 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>

Результат:

Рядки ескізів, які розбиватимуться зі зміною ширини вікна

Одним зі способів, придатним для рядків зображень зі змінною шириною, є не використовувати параметри вирівнювання "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]]

               

Аби дозволити перенос зображень змінної ширини із підписами, слід використати атрибут HTML div для невпорядкованого списку, разом із 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"). Також інколи необхідно показати зображення різної ширини в одному рядку. Поза галереєю або тегом HTML div неможливо отримати індивідуальні підписи для зображень в рядку, який розбиватиметься відповідно до ширини вікна. Спробуйте і переконайтеся. Жоден інший спосіб із вікітекстом не працює. Зображення або закриватимуть інформацію на правому краї вікна, або змусять браузер відобразити смугу прокрутки.

Використання плавання з вирівнюванням вліво ("left") для одних зображень разом із "none" для інших, також не працюватиме як слід, особливо якщо справа є бічна панель з іншими зображеннями. Поведінка браузера буде непередбачуваною. При звуженні вікна браузера чи екрану зображення, що не вмістилося в рядок, може виявитися в самому низу сторінки під правою бічною панеллю зображень.

Керування посиланнями

Посилання за замовчуванням веде до сторінки опису файла. Параметр "link=" змінює це, надаючи посилання на іншу сторінку чи сторонній веб-сайт або взагалі прибираючи інтерактивне посилання.

Як альтернатива, ви можете створити посилання на сторінку опису файла або на файл як такий. Див. Help:Linking to files .

Показати зображення із посиланням на іншу сторінку чи веб-сайт

Застосовуйте параметр "link=" для посилання, яке веде на іншу сторінку чи сторонній веб-сайт:

Натискання на зображення нижче приведе до MediaWiki:

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

 

Натискання на зображення нижче приведе на сайт example.com:

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

 

Показати зображення, прибрати посилання

Застосовуйте параметр "link=" без наданого значення, аби повністю прибрати посилання. Зображення внизу не містить посилання:

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

 

Посилання на зображення

Додайте префікс : до посилання, яке потрібно створити.

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

File:MediaWiki-2020-logo.svg

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

Wiki

Пряме посилання на зображення

Вищенаведені приклади посилаються на сторінку опису зображення. Аби послатися безпосередньо на зображення, використовуйте в MediaWiki псевдопростір назв Media::

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

Media:MediaWiki-2020-logo.svg

Прямі посилання для зовнішніх сайтів

Іншим способом є звернення до сторінки 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

Отримання повного URL зображення

Аби отримати повний шлях до файлу (без використання перенаправлення, як у попередньому прикладі), можна застосувати певні Магічні слова .

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

Перетворюється на:

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

У випадку звертання із шаблону, де ім'я простору назв File: має бути вилучене, це може зробити {{PAGENAME}}:

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

Перетворюється на:

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

Передумови

Перш ніж вбудовувати зображення у свою сторінку, системний адміністратор вашої вікі має дозволити завантаження файлів і файл зображення слід завантажити. Системні адміністратори також можуть налаштувати вікі для отримання файлів зі сторонніх сховищ, таких як Вікісховище. Сервер для того, щоб мати змогу масштабувати зображення, повинен мати налаштованим відповідний компонент (як-от GD2, ImageMagick тощо).

Файли з інших веб-сайтів

Ви можете послатися на зовнішній доступний онлайн файл таким самим синтаксисом, як посилаєтесь на зовнішню веб-сторінку. При цьому на сторінці не буде показано зображення, а відобразиться лише текст посилання на нього.

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

Або із заміною відображуваного тексту:

[http://url.for/some/image.png текст на місці посилання]

В цьому тексті дозволені додаткова розмітка MediaWiki та форматування HTML/CSS (для вбудованих елементів), за винятком вбудованого посилання, яке пошкодить оточуюче посилання:

[http://www.example.com/some/image.png Ось приклад '''<del>напівжирного</del>''' ''<ins>тексту посилання</ins>''.]

що відобразиться як: Приклад напівжирного тексту посилання.

Якщо така функція ввімкнена у вашій вікі (див. Manual:$wgAllowExternalImages ), ви можете навіть вбудовувати зовнішні зображення в сторінку. Для цього просто вставте URL цільового зображення:

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

Вбудовані зображення можна масштабувати методом CSS transform. Їх також можна форматувати охоплюючою розміткою MediaWiki чи кодом HTML/CSS.

Якщо цю функцію в налаштуваннях вимкнено (Manual:$wgAllowExternalImagesFrom не визначений), зображення не буде вбудоване, натомість буде показано текстове посилання на сторонній сайт, як вище.

Див. також