Help:Images/uk

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

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

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


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

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


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

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

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

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


 * Форматування: одне з border та/або frameless; frame (чи framed); thumb (чи thumbnail). Якщо разом вказано суперечливі опції, зображення може бути показано в неочікуваному вигляді.
 * Визначає, як зображення форматовано й розташовано на сторінці.


 * Масштабування: одне з
 * {ширина}px — Масштабує зображення до вказаної ширини в пікселях, не обмежує його висоту. (Для кількості пікселів підтримуються лише цілі значення. Дозволено пропуск між значенням ширини та суфіксом "px".)
 * x{висота}px — Масштабує зображення до вказаної висоти в пікселях, не обмежує його ширину. Для кількості пікселів підтримуються лише цілі значення. Дозволено пропуск між значенням висоти й суфіксом «px».
 * {ширина}x{висота}px — Масштабує зображення так, аби його розміри не перевищували вказаної ширини й висоти в пікселях. Для кількості пікселів підтримуються лише цілі значення. Дозволено пропуск між значенням ширини та суфіксом "px".
 * upright — Масштабує зображення до резонного розміру згідно з налаштуваннями користувача (придатне для зображень, висота яких більша за ширину). Встановлення  покаже зображення із шириною, що відповідає користувацькому налаштуванню ширини за замовчуванням.   покаже зображення з подвійною відносно попередньої шириною.
 * Зображення завжди зберігатиме співвідношення сторін.
 * Зображення в немасштабованих форматах можуть бути зменшувані, але не збільшувані; так, зображення формату bitmap не можуть бути збільшені.
 * Знак рівності після  необов'язковий, тобто   спрацює так само, як і.
 * Якщо не вказано ані числового значення, ані знаку рівності (як-от в ), використовується значення за замовчуванням   (хоча   значить те ж саме, що й  )
 * Якщо наявні обидва  та , перший запис   буде проігноровано. Подробиці див. у.
 * Якщо "upright" та знак рівності розділені пропуском, як-от в ), або ж якщо значення "upright" містить нечислові символи, значення   буде проігноровано. Подробиці див. у.
 * Максимальний розмір за замовчуванням залежить від значення 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-еквівалентів символів, на кшталт  чи , може привести до того, що ціль посилання трактуватиметься як підпис (див. T216003).


 * ! для MW 1.24 та старіших: Якщо вказати  (порожнє значення), то   не відобразиться. (Див. T23454.)
 * Інші спеціальні параметри:
 * alt={альтернативний текст} — (MediaWiki 1.14+) Визначає замісний текст (відповідає атрибуту HTML  згенерованого елемента ) для зображення, який буде показано, коли зображення неможливо завантажити і вставити або ж підтримуваний інструмент змушений використовувати альтернативний текст (як при читанні Брайля чи з налаштуванням доступності у звичайному браузері).
 * Якщо  і знак рівності розділені пропуском, значення цього параметра трактуватиметься як підпис.
 * page={номер} — Відобразить сторінку з указаним номером (актуальне при показі файлів .djvu чи .pdf).
 * 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.

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

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

Gallery syntax
It's easy to make a gallery of thumbnails with the tag. The syntax is:

Note that the image code is not enclosed in brackets when enclosed in gallery tags.

Captions are optional, and may contain wiki links or other formatting.

Some of the parameters controlling thumb output can also be used here, specifically the ones that modify the file (as opposed to ones that control where in the page the image falls). For example, with multi-paged media like pdfs, you can use code like.

The  prefix can be omitted. However, it is helpful to include it as an aid for quickly locating image specifiers in the wikitext (for example, when cleaning up page layout).

For example:

is formatted as:

Mode parameter
Starting in 1.22 a  parameter is available, taking options as follows:

The rows in this responsive mode organize themselves according to the width of the screen.
 * is the original gallery type used by MediaWiki.
 * is similar to, but with no border lines.
 * causes images to have the same height but different widths, with little space between the images.
 * shows the caption overlaid on the image, in a semi-transparent white box.
 * is similar to, but with the caption and box only showing up on hover.
 * creates a slideshow of the images.

For example:

Gives (mode: ):

Optional gallery attributes
The gallery tag itself takes several additional parameters, specified as attribute name-value pairs:

 Note the plural: widths . 0 means automatically adjust based on width of screen.
 * : (caption text between double quotes for more than a word) sets a caption centered atop the gallery. Only plain text may be used in the caption; formatting, templates and the like will not work.
 * : sets the (max) widths of the images; the default value is 120px.
 * : sets the (max) heights of the images; the default value is 120px.
 * : sets the number of images per row.
 * : Show the filenames of the images in the individual captions for each image (1.17+).
 * : See section above (1.22+; 1.28+ for "slideshow").
 * : For "slideshow" mode only, display the strip with image thumbnails below the slideshow by default (1.29+).


 * Example 1

Syntax:

Result:

Row of images that will wrap to browser width
One way that works for a row of images with varying widths is not to use "thumb" or "left" or "none". If "thumb" is not used (and thus no captions) a row of images will wrap to the browser width. If necessary, narrow the browser window to see the images wrap to the next row.





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.

        </li>  </li>  </li>  </li>  </li> </ul>

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

<ul>  </li>  </li>  </li>  </li>  </li>  </li>  </li>  </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:



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

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 (with the exception of 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.

Див. також

 * Wikipedia:Extended image syntax
 * Category:Wikipedia image help
 * Wikipedia:Picture tutorial
 * w:Help:Gallery tag
 * T113101 - responsive issues
 * T113101 - responsive issues