Help:Images/uk

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

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

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



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


 * або  - стиснене растрове зображення в стандартному форматі JPEG (формат із втратами, найкраще підходить для фотографій).
 * - растрове зображення у форматі Portable Network Graphics (специфікований консорціумом W3).
 * - растрове зображення в застарілому форматі Graphics Interchange Format.
 * - WebP supports both lossy and lossless compression while reducing image size by up to 45%.

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


 * - масштабоване зображення у форматі Scalable Vector Graphics (специфікований консорціумом W3). Див. Manual:Image_Administration/uk#SVG.
 * - позначений формат зображення. Часто використовується для архівних фотографій із високим розділенням. Часто використовується із розширенням.
 * ,,   - Медіа-контейнер Ogg (аудіо або відео). Не формат зображень, але обробляється аналогічно. Часто використовується із розширенням.
 * - багатосторінковий документ у форматі Portable Document Format (початково специфікований компанією Adobe). Часто використовується у поєднанні із розширенням.
 * - багатосторінковий растровий документ у форматі DejaVu (найчастіше, скани книг). Див..
 * За замовчуванням будуть показані лише перші сторінки файлів  чи.

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



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

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


 * Форматування: одне з border та/або frameless; frame (чи framed); thumb (чи thumbnail). Note: border can be used in combination with frameless but will be ignored if used with one of the other options.
 * Визначає, як зображення форматовано й розташовано на сторінці.
 * Масштабування: одне з
 * {ширина}px — Масштабує зображення до вказаної ширини в пікселях, не обмежує його висоту. (Для кількості пікселів підтримуються лише цілі значення. Дозволено пропуск між значенням ширини та суфіксом "px".)
 * x{висота}px — Масштабує зображення до вказаної висоти в пікселях, не обмежує його ширину. Для кількості пікселів підтримуються лише цілі значення. Дозволено пропуск між значенням висоти й суфіксом «px».
 * {ширина}x{висота}px — Масштабує зображення так, аби його розміри не перевищували вказаної ширини й висоти в пікселях. Для кількості пікселів підтримуються лише цілі значення. Дозволено пропуск між значенням ширини та суфіксом "px".
 * upright — ** upright — Масштабує зображення до резонного розміру згідно з налаштуваннями користувача (придатне для зображень, висота яких більша за ширину). This option is often useful for images whose height is larger than their width. Requires either thumb or frameless. Встановлення  покаже зображення із шириною, що відповідає користувацькому налаштуванню ширини за замовчуванням.   покаже зображення з подвійною відносно попередньої шириною.
 * Зображення завжди зберігатиме співвідношення сторін.
 * Зображення в немасштабованих форматах можуть бути зменшувані, але не збільшувані; так, зображення формату bitmap не можуть бути збільшені.
 * Знак рівності після  необов'язковий, тобто   спрацює так само, як і.
 * Якщо не вказано ані числового значення, ані знаку рівності (як-от в ), використовується значення за замовчуванням   (хоча   значить те ж саме, що й  )
 * Максимальний розмір за замовчуванням залежить від значення format та внутрішніх розмірів зображення (відповідно до його типу).
 * Горизонтальне вирівнювання: одне з left, right, center, none. Якщо одночасно вказано кілька значень, буде використано найперше.
 * Визначає горизонтальне вирівнювання (а також стилі inline/block чи floating) зображення на текстовій сторінці. Не має значення за замовчуванням.
 * Вертикальне вирівнювання: одне з baseline, sub, super, top, text-top, middle, bottom, text-bottom
 * Визначає вертикальне вирівнювання вбудованого неплаваючого зображення щодо тексту перед і після зображенням, а ще в тому самому блоці (значення за замовчуванням middle).
 * Посилання: одне з
 * link={ціль} — Дозволяє задати ціль згенерованого посилання (на назву довільної сторінки чи URL), яке активується при натисканні на поверхню зображення; так,  відобразиться як Example.jpg (зовнішнє посилання), а   відобразиться як Example.jpg (внутрішнє посилання).
 * link= (з порожнім значенням) — (MediaWiki 1.14+) Показує неактивне щодо натискання зображення; так,   відобразиться як Example.jpg.
 * Якщо між  і знаком рівності є пропуск, ціль посилання трактуватиметься як підпис.
 * Так само включення певних HTML-еквівалентів символів, на кшталт  чи , може привести до того, що ціль посилання трактуватиметься як підпис (див. T306216).


 * ! для MW 1.24 та старіших: Якщо вказати  (порожнє значення), то   не відобразиться. (Див. T23454.)
 * Інші спеціальні параметри:
 * alt={альтернативний текст} — (MediaWiki 1.14+) Визначає замісний текст (відповідає атрибуту HTML  згенерованого елемента ) для зображення, який буде показано, коли зображення неможливо завантажити і вставити або ж підтримуваний інструмент змушений використовувати альтернативний текст (як при читанні Брайля чи з налаштуванням доступності у звичайному браузері).
 * Якщо  і знак рівності розділені пропуском, значення цього параметра трактуватиметься як підпис.
 * page={номер} — Відобразить сторінку з указаним номером (актуальне при показі файлів .djvu чи .pdf).
 * thumbtime={number} — Renders a thumbnail from the video at the specified timestamp in seconds (only applicable when showing a video file).
 * class={класс html} — (MediaWiki 1.20+) Визначає класс (відповідає атрибуту HTML  згенерованого елемента ).
 * lang={мовний код} — (MediaWiki 1.22+) Для файлів SVG, що містять оператор &lt;switch&gt;, залежний від атрибуту systemLanguage, вказує мову, якою відображувати файл. За замовчуванням це мова, якою відображено всю сторінку (в більшості проєктів це мова проєкту за замовчуванням).

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

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

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

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

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



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


 * Вигляд у випадку не вказаного розміру наведено вище в підрозділі Формат.
 * Якщо формат не вказано або вказано лише, розмір може бути змінений в будь-який бік до будь-якого наперед заданого.
 * У наведених нижче прикладах розмір оригінального зображення становить 400 × 267 пікселів.
 * При  рушій завжди ігнорує вказаний розмір, оригінальне зображення буде зменшено в разі, коли його розмір перевищує максимальний допустимий розмір з користувацьких налаштувань.
 * При  чи   оригінальне зображення може бути зменшене, але не може бути збільшене поза власний вихідний розмір.



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



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

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



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



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

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



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

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

<span id="Rendering_a_gallery_of_images">

Демонстрація галереї зображень
<span id="Gallery_syntax">

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

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

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

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

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

Наприклад:

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

<span id="mode_parameter">

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

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

Наприклад:

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

<span id="Optional_gallery_attributes">

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


 * : (текст підпису береться в лапки, якщо містить більше одного слова) задає відцентрований підпис над галереєю. Тут можна використати лише простий текст; розмітка, шаблони тощо не працюватимуть.
 * : задає (максимальну) ширину ескізу; значення за замовчуванням 120px. (It has no effect if mode is set to one of the following: packed, packed-overlay, packed-hover, slideshow.) Зверніть увагу на множину: widths.
 * : задає (максимальну) висоту ескізу; значення за замовчуванням 120px. (It has no effect if mode is set to slideshow.)
 * : задає кількість ескізів в одному рядку. (It has no effect if mode is set to one of the following: packed, packed-overlay, packed-hover, slideshow.) 0 означає автоматичне визначення відповідно до ширини екрану.
 * : Показати назви файлів як індивідуальний підпис до кожного ескізу (версії 1.17+).
 * : Див. підрозділ вище (1.22+; для "slideshow" 1.28+).
 * : Лише для "slideshow": з самого початку відобразити стрічку з ескізами під інтерфейсом демонстрації слайдів (1.29+).


 * Приклад 1

Синтаксис:

Результат:

<span id="Row_of_images_that_will_wrap_to_browser_width">

Рядки ескізів, які розбиватимуться зі зміною ширини вікна
Одним зі способів, придатним для рядків зображень зі змінною шириною, є не використовувати параметри вирівнювання "thumb", "left" чи "none". Якщо не використано "thumb" (отже, немає підписів), рядок зображень формуватиметься відповідно до доступної для відображення ширини екрану. Спробуйте звузити вікно браузера, аби побачити, як зображення переносяться на наступний рядок.





Аби дозволити перенос зображень змінної ширини із підписами, слід використати атрибут HTML div для невпорядкованого списку, разом із. Подробиці та ідеї шукайте тут: 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>

Аби вирівняти верхній край зображень, додайте команду вертикального вирівнювання

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

На окремих сайтах вікі не імплементовані всі параметри галереї (зокрема, "widths"). Також інколи необхідно показати зображення різної ширини в одному рядку. Поза галереєю або тегом HTML div неможливо отримати індивідуальні підписи для зображень в рядку, який розбиватиметься відповідно до ширини вікна. Спробуйте і переконайтеся. Жоден інший спосіб із вікітекстом не працює. Зображення або закриватимуть інформацію на правому краї вікна, або змусять браузер відобразити смугу прокрутки.

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

<span id="Link_behavior">

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

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

<span id="Display_image,_link_it_to_another_page_or_website">

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

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





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





<span id="Display_image,_turn_off_link">

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





<span id="Link_to_an_image">

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

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

<span id="Directly_linking_to_an_image">

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

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

<span id="Direct_links_from_external_sites">

Прямі посилання для зовнішніх сайтів
Іншим способом є звернення до сторінки Special:Redirect/file (або синонімічної Special:Filepath). На відміну від попереднього прикладу, цей спосіб можна застосовувати не лише як внутрішнє посилання, а й на сторонніх сайтах.

Можуть бути додані параметри  та , аби обмежити розмір отриманого зображення. Відношення висоти до ширини зображення завжди зберігається.

<span id="Obtaining_the_full_URL_of_an_image">

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

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



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

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



<span id="Files_at_other_websites">

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



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

текст на місці посилання

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

Ось приклад  напівжирного   тексту посилання .

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

Якщо така функція ввімкнена у вашій вікі (див. ), ви можете навіть вбудовувати зовнішні зображення в сторінку. Для цього просто вставте URL цільового зображення: http://url.for/some/image.png Вбудовані зображення можна масштабувати методом CSS. Їх також можна форматувати охоплюючою розміткою MediaWiki чи кодом HTML/CSS.

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

<span id="See_also">

Див. також

 * Довідка:Розширений синтаксис зображень
 * Категорія:Вікіпедія:Допомога із зображень
 * Довідка:Основи роботи з зображеннями
 * w:uk:Довідка:Тег Gallery
 * T113101 - проблеми масштабування
 * Extension:PageImages#Can I exclude certain page images?
 * Extension:PageImages#Can I exclude certain page images?