Справка:Изображения

Материал из ПермаВики - открытой энциклопедии Пермакультуры
Перейти к: навигация, поиск

Эта страница объясняет синтаксис использования изображений при редактировании вики-сайта. Обычно требуется, чтобы вы или другой участник загрузили изображение перед тем, как использовать его на вики-странице.

Изображения, которые хранятся на сервере MediaWiki, обычно предоставляются с помощью префикса пространства имён Файл: (также унаследован префикс пространства имён Изображение:, который до сих пор поддерживается как синоним) в качестве целевой ссылки MediaWiki. Альтернативный префикс пространства имён Медиа:, используется для ссылки на оригинальный медиафайл (для отдельного предоставления или скачивания с любой страницы MediaWiki).

Поддерживаемые медиа-типы изображений

Mediawiki подерживает по умолчанию следующие форматы графических файлов:

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

Другие форматы, используемые Викимедиа, и обычно включаемые в других проектах (Они могут требовать установки дополнительных модулей сверх того, что включено по умолчанию):

Другие медиа-типы могут не поддерживаться в зависимости от вашей версии MediaWiki. Обычно они могут быть загружены, но не могут быть показаны на странице, пока не будет установлено соответствующее расширение.

Отображение одного изображения

Синтаксис

Полный синтаксис для отображения изображений:

[[Файл:имя файла.расширение|параметр|заголовок]]

раздел «параметры» может отсутствовать или содержать следующие значения, разделенные символом «|»:

  • Параметр формата: один из border and/or frameless, frame, thumb (или thumbnail);
    Управляют форматированием и встраиванием изображения в остальную часть страницы.
  • Параметр размера: один из
    • {ширина}px — Изменяет размер изображения в соответствии максимальной шириной в пикселях, не ограничивая его высоту;
    • x{высота}px — Изменяет размер изображения в соответствии максимальной высотой в пикселях, не ограничивая его ширину;
    • {ширина}x{высота}px — Изменяет размер изображения в соответствии в заданной шириной и высотой в пикселях;
    • upright — Изменяет размер изображения в соответствии с разумными размерами, в зависимости от предпочтений пользователя (подходит для изображений, высота которых больше ширины).
    Обратите внимание, что изображение всегда будет сохранять свои пропорции, и может быть уменьшено (не увеличено) в размере, только если находится в масштабируемом медиа-типе (растровые изображения не могут быть масштабированы).
    Стандартный максимальный размер зависит от формата, и внутренних размеров изображения (в зависимости от его медиа-типа).
  • Параметр горизонтального выравнивания: один из left, right, center, none;
    Управляют горизонтальным выравниванием (встроенными/блочными или плавающими стилями) изображения в тексте (по умолчанию пусто).
  • Параметр вертикального выравнивания: один из baseline, sub, super, top, text-top, middle, bottom, text-bottom;
    Управляют вертикальным выравниванием без плавающих встроенных изображений в тексте, до или после изображения, и в том же блоке (по умолчанию middle).
  • Параметр ссылки: один из
    • link={цель} — Позволяет изменять цель (к произвольной странице или URL) генерируемых ссылок, доступных для отображаемых изображений;
    • link= (без значения) — Отображение изображения без каких-либо ссылок, например, [[File:Example.jpg|20px|link=]] отобразится как Example.jpg.
    Обратите внимание, что параметр link не может быть использован в сочетании с thumb или thumbnail, так как thumb всегда ссылается на большую версию изображения.
    Вдобавок, параметр link не может быть использован в сочетании с frame.
  • Другие конкретные параметры:
    • alt={альтернативный текст} — Определяет альтернативный текст (отображается на HTML-атрибут alt="..." генерируемого кода <image />) изображения, который будут выведен, если указанное изображение не может быть загружено и встроенные, или, если необходимо использовать альтернативный текст описания (например, при использовании шрифта Брайля).
    • page={число} — Отображает указанный номер страницы (в настоящее время применяется только при показе .DjVu или .PDF файлов).

Параметры могут быть указаны в любом порядке. Если параметры конфликтуют друг с другом, применяется последний, за исключением параметров формата, в которых параметры принимают приоритет по порядку frame, thumb, и frameless и/илиborder.

Если параметр не соответствует ни одному из возможных, предполагается, что это подпись. Текст подписи отображается ниже изображения в форматах thumb и frame, или как текст подсказки в других форматах. Текст подписи в форматах thumb и frame может содержать вики-ссылки и другие элементы форматирования. Расширения MediaWiki могут иметь дополнительные параметры.

Если параметр «alt» не задан, на его месте будет текст из параметра «подпись», только без форматирования.

Формат

Следующая таблица показывает эффект от применения всех доступных форматов.

Когда высота изображения в виде миниатюры больше, чем его ширина (то есть портретная ориентация, а не альбомная), и вы найдете его слишком большим, вы можете попробовать параметр upright=N, который будет пытаться отрегулировать его размер лучше, за счет уменьшения высоты, а не ширины (N — масштаб изображения в десятичных долях, по умолчанию 0,75). В качестве альтернативы можно указать желаемую максимальную высоту (в пикселях) в прямой форме.

Обратите внимание, что написав thumb={имя файла}, вы можете использовать для миниатюры совсем другое изображение.

Размер и рамка

Среди различных форматов, параметры размера могут быть разными, как показано ниже.

  • О том, как отображается, если его размер не указан, см. раздел «Формат» выше.
  • Если формат не указан, или указан только border, размер может быть уменьшен и расширен с любым заданным размером.
  • В примерах ниже, оригинальный размер изображения составляет 400 × 267 пикселей.
  • Изображение с frame всегда игнорирует указанный размер, исходное изображение будет уменьшено, если оно превышает максимально допустимый размер определенный в пользовательских настройках.
  • Размер изображения с thumb и frameless может быть уменьшен, но не может быть увеличен за пределы первоначального размера изображения.
Формат Уменьшенный Увеличенный
(не определено)
[[File:Example.jpg|50px]]
Example.jpg
[[File:Example.jpg|200px]]
Example.jpg
border
[[File:Example.jpg|border|50px]]
Example.jpg
[[File:Example.jpg|border|200px]]
Example.jpg
frame
[[File:Example.jpg|frame|50px]]
Example.jpg
[[File:Example.jpg|frame|200px]]
Example.jpg
thumb
[[File:Example.jpg|thumb|50px]]
Example.jpg
[[File:Example.jpg|thumb|200px]]
Example.jpg
frameless
[[File:Example.jpg|frameless|50px]]
Example.jpg
[[File:Example.jpg|frameless|200px]]
Example.jpg

Горизонтальное выравнивание

Заметьте, что при использовании frame или thumb, по умолчанию действует выравнивание по правому краю (right).

Описание Формат Результат
выравнивание не определено, действуют значения по умолчанию

Плавающее изображение: нет
В строке: да

... текст текст текст
[[File:example.jpg|100px|подпись]]
текст текст текст ...
... текст текст текст

подпись текст текст текст ...

выравнивание задано как отсутствующее

Плавающее изображение: нет
В строке: нет

... текст текст текст
[[File:example.jpg|none|100px|подпись]]
текст текст текст ...
... текст текст текст
подпись

текст текст текст ...

задано выравнивание по центру

Плавающее изображение: нет
В строке: нет

... текст текст текст
[[File:example.jpg|center|100px|подпись]]
текст текст текст ...
... текст текст текст
подпись

текст текст текст ...

задано выравнивание по левому краю

Плавающее изображение: да
В строке: нет

... текст текст текст
[[File:example.jpg|left|100px|подпись]]
текст текст текст ...
... текст текст текст
подпись

текст текст текст ...

задано выравнивание по правому краю

Плавающее изображение: да
В строке: нет

... текст текст текст
[[File:example.jpg|right|100px|подпись]]
текст текст текст ...
... текст текст текст
подпись

текст текст текст ...

Вертикальное выравнивание

Параметры вертикального выравнивания вступят в силу только тогда, когда изображение будет отображено как встроенный элемент и не плавающий. Они изменяют способ встраивания изображения по вертикали в текст, присутствующий в том же блоке до и/или после этого изображения в тот же ряде отображения.

Обратите внимание, что отображённые строки текста, где вставляется изображение (и строки текста отображённые после) могут быть перемещены вниз (это приведет к увеличению высоты строки), чтобы высота изображения была полностью отображена согласно этим ограничениям.

<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: Example.jpg Example.jpg Example.jpg text

text text-top: Example.jpg Example.jpg Example.jpg text

text super: Example.jpg Example.jpg Example.jpg text

text baseline: Example.jpg Example.jpg Example.jpg text

text sub: Example.jpg Example.jpg Example.jpg text

text default: Example.jpgExample.jpg Example.jpg text

text middle: Example.jpg Example.jpg Example.jpg text

text text-bottom: Example.jpg Example.jpg Example.jpg text

text 'bottom: Example.jpg Example.jpg Example.jpg text

Замечания:

  1. Выравнивание «по центру» (middle, задано по умолчанию) означает, что изображение будет выравнено по линии, находящейся посередине между базовой линией текста и верхним краем строчных (как правило по этой линии проходит зачёркивание текста), а не заглавных букв, в отличие от выравнивания по верхнему или нижнему краю текста (text-top или text-bottom). Высота шрифта не включает в себя:
    • the additional line separation spacing normally divided equally into two line-margins (here 0.5em, according to line-height set to 200%) above and below the font-height).
    • дополнительный межстрочный интервал, который может образоваться при добавлении надстрочных и подстрочных индексов.
  2. Однако, если высота изображения выходит за нормальную высоту текста, при выравнивании по центру будет недостающее расстояние будет добавлено к интервалу над/под строкой, чтобы туда могло вместиться изображение. Все изображения, включая более маленькие, будут выравнены с учётом увеличенных интервалов — для расчёта высоты строки берётся самый большой её элемент.
  3. При выравнивании по верхнему и нижнему краю текста (text-top и text-bottom) не учитывается дополнительный интервал, добавленный из-за наличия верхних и нижних индексов.
  4. При выравнивании по верхнему и нижнему краю (top и bottom) учитываются всё, что расширяет межстрочный интервал, в том числе надстрочные/подстрочные индексы. Если изображение не помещается на высоту строки, и не задана его абсолютная позиция, строка будет расширена, чтобы вместить изображение в зависимости от способа выравнивания сверху, снизу или с двух сторон.
  5. Расположение подчёркивания, надчёркивания и перечёркивания в тексте должно соответствовать позициям изображения и могут зависеть от типа и размера используемого шрифта. Они могут учитываться в некоторых браузерах для индексов, но часто просто игнорируют, и расположение линий может не быть выровнено. Эти линии не влияют на расположение изображений по отношению к тексту.

Прекращение обтекания текстом

В некоторых случаях желательно останавливать обтекание текстом плавающего (или других встроенных не-плавающих изображений) изображения. В зависимости от разрешения экрана в браузере и обтекание текста справа от изображения может привести к тому, что заголовок раздела (например, == Мой заголовок ==) окажется справа от изображения, а не под ним, как пользователь может ожидать. Обтекание текстом может быть остановлено путем размещения <br style="clear: both" /> перед текстом, который должен начаться ниже плавающего изображения.

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

Изменение стандартной целевой ссылки

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

Предупреждение:

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

Отображение галереи изображений

Галерея изображений

Создать галерею уменьшенных изображений с помощью тега <gallery> довольно легко. Его синтаксис таков:

<gallery>
Image:имя_файл.расширение|подпись
Image:имя_файл.расширение|подпись
{...}
</gallery>

Заметьте, что код изображения не заключается в квадратные скобки, когда он находится внутри тега галереи.

Подписи к рисункам не обязательны, они могут содержать внутренние или внешние ссылки или иное форматирование.

Например:

<gallery>
File:Example.jpg|Пункт 1
File:Example.jpg|Ссылка на [[Help:Contents/ru|Справку]]
File:Example.jpg
File:Example.jpg
File:Example.jpg|''Курсив''
File:Example.jpg|на странице "{{PAGENAME}}"
</gallery>

будет выглядеть так:

Параметры

Тег галереи имеет несколько дополнительных параметров:

<gallery {параметры}>
{изображения}
</gallery>
  • caption={подпись}: задаёт подпись к галерее.
  • widths={ширина}px: задаёт ширину изображений.
  • heights={высота}px: задаёт (максимальную) высоту изображений.
  • perrow={целое число}: задаёт количество изображений в строке.

Пример:

Код:

<gallery widths=60px heights=60px perrow=7 caption="потрясающие подсолнухи">
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>

Результат:

Ссылки

Ссылка на страницу описания

Если вы поместите внутри ссылки символ двоеточия (:) перед Файл:, изображение не будет внедрено, и получившаяся ссылка будет вести на страницу описания этого файла.

[[:Файл:Example.jpg]]
[[:Файл:Example.jpg|Подсолнухи]]

даст результат

Файл:Example.jpg Подсолнухи

Ссылка на другую страницу

Показанный ниже код позволяет создать изображение шириной 50px ссылка с которого ведёт на страницу MediaWiki/ru:

[[File:Wiki.png|50px|link=MediaWiki/ru]]

50px

Прямая ссылка на файл

Вы можете использовать псевдо-пространство имён «Медиа» для прямых ссылок на файлы, минуя их страницы описания.

[[Медиа:Example.jpg]]
[[Медиа:Example.jpg|Подсолнухи]]

даст результат

Медиа:Example.jpg Подсолнухи

Вы также можете использовать: 

[[Служебная:Путь к файлу/Example.jpg]]

для ссылок на потенциальные файлы, которые ещё не существуют. Вы также можете использовать следующий код:

{{FILEPATH:Example.jpg}}

для генерации корректных внешних URL на файлы, который будет обработан следующим образом: http://permawiki.ru/w/images/a/a9/Example.jpg

Результаты

Перед использованием изображений на странице, системный администратор вашего вики-сайта должен разрешить закачку файлов. Системные администраторы могут также настройить вики-сайт на приём файлов из внешних хранилищ, таких как Викисклад.


Файлы на других веб-сайтах

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

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

Или задать текст описания:

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

Вы также можете внедрять внешние изображения, если эта возможность включена в вашем вики-проекте (см. Шаблон:Mediawiki). Для этого просто вставьте URL такого файла:

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