Справка:Как добавить изображения
Общие сведения
- Лучше один раз увидеть, чем сто раз... прочитать.
Иллюстрации, рисунки, скриншоты и другие графические изображения весьма полезны при создании ваших страниц.
Хорошо выполненные иллюстрации и грамотное их расположение на странице радуют глаз. Но, как и во всем остальном, необходимо иметь чувство меры. Слишком большие иллюстрации и/или большое их количество "утяжелят" вашу страницу, что непременно скажется на скорости ее загрузки.
Данная статья поможет вам разобраться в форматировании изображений для вики с помощью специальной вики-разметки.
Загрузка изображений
Изображения, прежде чем они отобразятся на вики-странице, должны быть предварительно загружены.
Для этого в панели "Инструменты", которая находится в левой части окна браузера, в самом низу, выберите пункт "Загрузить файл".
Поддерживаемые типы файлов:
Для нормального отображения на странице графический файл изображения должен иметь одно из следующих расширений: png, gif, jpg, jpeg.
Собственно, именно эти расширения, наряду с некоторыми другими, например, архивами и pdf, разрешены для загрузки.
Простые изображения
Наиболее простая конструкция для вставки картинки на страницу имеет следующий синтаксис:
[[image:ImperialSity.jpg]]
Здесь ImperialSity.jpg - загруженный ранее файл.
После вставки кода в нужном месте окна редактирования и нажатии кнопки "Предварительный просмотр" картинка станет видимой:
Отступ от края
Если необходимо, чтобы картинка была отодвинута от края страницы, например, в списках, поставьте перед кодом двоеточие (или несколько):
:[[WolfsonAwa.jpg]]
::[[image:WAYY 20.gif]]
Размещение изображения в правой или левой части страницы
Для этого достаточно добавить в код ключевые слова "right" (справа) или "left" (слева).
При их использовании обеспечивается обтекаемость изображений текстом.
Пример кода с тегом "right":
[[image:MG_banner.gif|right]]
Результат:
 Гильдия Магов – межрегиональная организация, во главе которой стоит "Совет Пяти Архимагов". История создания гильдии описана в игровой книге "Истоки Гильдии Магов". Деятельность гильдии заключается в изучении и практическом применении магии и алхимии. Студенты гильдии создали множество самых разнообразнейших зелий и магических предметов, которые можно купить по доступным ценам. Также гильдия предлагает на продажу всевозможные стандартные заклинания и ингредиенты. Дополнительно гильдия предлагает для использования различные готовые технологии всем желающим создать свои магические заклинания. |
Пример кода с тегом "left":
[[image:SI main 01.gif|left]]
Результат:
 |
Если же обтекаемость текстом не нужна и изображение должно находиться в левой части, укажите тег "none":
[[image:OblivionLibrary.jpg|none]]
Простое масштабирование изображений
Если необходимо увеличить или уменьшить какую-нибудь иллюстрацию в статье относительно исходного размера, вы можете добавить специальный код.
Масштабирование производится по ширине.
Пример 1. Уменьшение в два раза по ширине:
Например, ваша картинка OBbsign_Lover.jpg имеет исходный размер 512 × 400. Здесь 512 - ширина картинки в пикселах, а 400, соответственно, ее высота.
Код:
-
[[image:OBbsign Lover.jpg|256px]]
В результате получим:
Пример 2. Увеличение по ширине на 30 пикселов:
Исходное изображение в файле Pgtte_v3_birthsign_apprentice.jpg имеет размер 256 × 217 пикселов. Допустим, требуется увеличить немного его размер, чтобы уравнять по высоте с соседним изображением, например, на 30px.
Код:
-
[[image:Pgtte_v3_birthsign_apprentice.jpg|286px]]
Результат:
Миниатюры изображений (тег thumb)
Если добавить в код после названия файла вертикальную черту "|", а затем слово "thumb", то автоматически создастся миниатюра данного изображения, обзаведется рамкой и переместится в правую часть страницы.
При этом обеспечивается обтекание ее текстом слева.
Пример: Использование тега "thumb"
Синтаксис:
|
Результат:
 |
Задание размера миниатюры
Размер создаваемой миниатюры можно задавать, если после тега "thumb" поставить вертикальную черту "|" и указать размер в пикселях, например, такой - 250px.
- Примечание: Увеличить таким образом размер изображения сверх оригинального не удастся. Можно только уменьшить. На то она и миниатюра...
Ниже в качестве примера приведен исходный код:
-
[[image:ObBook-fiction dancefire center.jpg|thumb|250px]] Текст статьи...
Результат:
| Танец в огне, глава I
Кажется, Строительная комиссия Атриуса всегда размещалась в этом внушительном здании. Через руки служащих и агентов компании проходили бумаги, связанные со строительством практически каждого дома в Империи. Особняк был построен двести пятьдесят лет назад, в эпоху правления императора Магнуса - простое и строгое здание, расположившееся на небольшой площади в престижном районе Имперского города. Здесь работали энергичные и честолюбивые юноши и девушки из среднего класса, а также солидные господа среднего возраста, вроде Декумуса Скотти. Никто не мог представить себе мир без комиссии, и меньше всех Скотти. Если точнее, он не мог представить себе мир без себя в комиссии. |
Задание положения миниатюры в левой части страницы
Миниатюру можно расположить и в левой части страницы. Обеспечивается это двумя тегами - "left" и "none".
Первый позволит тексту обтекать рисунок, а второй - нет.
Тег "left"
Чтобы расположить миниатюру в левой части страницы, укажите в коде ключевое слово - "left", разделив теги вертикальной линией:
-
[[image:Redguard-EliteGoblin2.gif|thumb|left|122px]] Такая конструкция <br>обеспечивает обтекаемость <br>изображения текстом, <br>но на этот раз справа.
Результат:
обеспечивает обтекаемость
изображения текстом,
но на этот раз справа.
Тег "none"
Если обтекаемость миниатюры текстом не нужна, вместо тега "left" укажите тег "none":
-
[[image:Morrowind-Quest-Coded Message.jpg|thumb|none|160px]] Как видите, текст расположился ниже изображения.
Результат:
Задание положения миниатюры по центру страницы
Если требуется разместить рисунок по центру страницы, добавьте в код тег "center":
-
[[image:Biped CAT PuppetShop Rig.png|thumb|center|180px]]
Результат:
При расположении картинки по центру обтекаемость текстом исключается, что, в общем-то, понятно.
Подпись к миниатюре
Очень полезно делать подписи к вашим изображениям, нумеровать рисунки и т.п.
Делается это очень просто:
-
[[image:OB-KotN-PelinalPainting.jpg|thumb|250px|none|Иллюстрация к книге: "Песнь о Пелинале"]]
Результат:
Рамка (тег frame)
Иногда масштабирование не требуется, но зато нужно обрамить рисунок или иллюстрацию рамкой.
Для этого нужно заменить тег "thumb" на "frame" и убрать размер по ширине:
[[image:DaggerfallSpider.gif|frame]] При таком коде изображение <br>перемещается вправо, а слева <br>обеспечивается обтекаемость <br>его текстом.
Результат:
 перемещается вправо, а слева обеспечивается обтекаемость его текстом. |
Чтобы расположить изображение слева, добавьте тег "left":
[[image:DaggerfallSpider.gif|frame|left]] Такой код перемещает <br>изображение влево, а <br>справа обеспечивается <br>обтекаемость его текстом.
Результат:
| изображение влево, а справа обеспечивается обтекаемость его текстом. |
Собственно, в отношении тега "frame" справедливы все описанные ранее теги - "left", "right", "none", за исключением задания ширины (этот параметр попросту игнорируется). Также доступна подпись к рисунку.
Пример:
-
[[image:ObBook night falls.jpg |frame|none|Рис.1. Иллюстрация к книге "Ночь приходит в Сентинель"]]
Результат:
Если хотите выделить подпись жирным и разместить по центру, используйте следующий код:
-
[[image:ObBook night falls.jpg |frame|none|<center>'''Рис.1. Иллюстрация к книге "Ночь приходит в Сентинель"'''</center>]]
Результат:
Размещение нескольких картинок в ряд
Для этого не стоит пользоваться тегами "left", "right", "none" и "center" - все равно ваши картинки разлезутся по всему экрану.
Если не нужна рамка, просто расположите коды картинок в один ряд:
[[image:SptMn 05.jpg|180px]] [[image:SptMn 04.jpg|180px]] [[image:SptMn 03.jpg|180px]]
Результат:
Если иллюстрации нуждаются в подписях, рамках и других "усовершенствованиях", используйте для этой цели галереи и таблицы (см. ниже).
Галереи
Если возникла необходимость разместить в одном месте большое количество миниатюр однотипных изображений, связанных общей тематикой, можно воспользоваться для этого специальным инструментом - галереей. Подробнее о галереях.
Простое использование галереи
Синтаксис галереи в первом приближении достаточно прост:
<gallery> Файл:1cthief.jpg Файл:1cserpent.jpg Файл:1cgolem.jpg </gallery>
В результате:
Подписи и ссылки
Вы можете также добавить к миниатюрам подписи и ссылки, например:
<gallery> Файл:1cthief.jpg|Вор Файл:1cserpent.jpg|Змей Файл:1cgolem.jpg|[[TES Lore:Двемерская обсерватория - Звёзды|Голем]] </gallery>
Результат:
Вор
Змей
Название галереи
Галерее можно дать название и отобразить ее на странице. Код:
<gallery align="center" caption="Созвездия Нирна"> Файл:1ctower.jpg|Башня Файл:1clady.jpg|Леди Файл:1cwarrior.jpg|Воин </gallery>
Результат:
- Созвездия Нирна
Башня
Леди
Воин
Форматирование галерей
Параметры, с помощью которых можно форматировать галереи:
- perrow — количество элементов в одной строке
- widths — размер каждого из изображений по горизонтали
- heights — размер каждого из изображений по вертикали
Пример:
<gallery perrow=4 widths="180px" align="center" caption="Созвездия Нирна"> Файл:1critual.jpg|Ритуал Файл:1clover.jpg|Любовник Файл:1clord.jpg|Лорд Файл:1cmage.jpg|Маг Файл:1cshadow.jpg|Тень Файл:1csteed.jpg|Конь Файл:1capprentice.jpg|Ученик Файл:1cwarrior.jpg|Воин Файл:1clady.jpg|Леди Файл:1ctower.jpg|Башня Файл:1cgolem.jpg|Голем Файл:1cthief.jpg|Вор Файл:1cserpent.jpg|Змей </gallery>
- Созвездия Нирна
Ритуал
Любовник
Лорд
Маг
Тень
Конь
Ученик
Воин
Леди
Башня
Голем
Вор
Змей
Использование таблиц
Таблицы - один из самых универсальных инструментов вики. Ячейки таблицы можно рассматривать как универсальные контейнеры для содержащейся в них информации. Поскольку содержимое не может выйти за пределы ячейки, таблицы могут использоваться не только для традиционного представления информации в виде столбцов и строк, но и для размещения любой другой информации, таких как рисунки, а то и целые отформатированные страницы с рисунками и другими вложенными таблицами.
Именно таким образом были использованы таблицы в данной статье для демонстрации, например, обтекания рисунков текстом.
Более подробно о таблицах можно прочитать в статье "Как создать таблицу на Tiarum".
В данном разделе будут рассмотрены полезные коды с использованием таблиц для размещения рисунков и иллюстраций.
Простая таблица с рисунком
Код содержит простейшую таблицу, состоящую из одной неотформатированной ячейки:
{|
| [[image:SptMn 01.jpg|200px]]
|}
Результат:
|
Таблица с рамкой и рисунком
В предыдущем примере показана простая таблица, не содержащая рамку.
Чтобы ее добавить, используйте, например, класс "wikitable":
{| class="wikitable"
| [[image:SptMn 06.jpg]]
|}
Результат:
|
Таблица с рамкой, рисунком и подписью
Чтобы добавить подпись с рисунком, вместо одной ячейки создайте две, расположенные в одном столбце:
{| class="wikitable"
| [[image:Tears_of_the_Fiend_-_The_Fall_of_Armindale.jpg|300px]]
|-
! Иллюстрация к моду [[Oblivion Плагин:Tears of the Fiend|Tears of the Fiend]]
|}
Результат:
|
| Иллюстрация к моду Tears of the Fiend |
|---|
- Восклицательный знак в коде приводит к выделению текста жирным и центрированию подписи.
- Отметьте также, что подобным образом можно создать и заголовок к вашей картинке.
Заголовок к изображению
Ниже показан еще один способ создания заголовка:
{| class="wikitable"
|+ Мод "Tears of the Fiend"
|-
| [[image:Tears of the Fiend - Redemption.JPG|300px]]
|-
! Иллюстрация к моду [[Oblivion Плагин:Tears of the Fiend|Tears of the Fiend]]
|}
Результат:
|
| Иллюстрация к моду Tears of the Fiend |
|---|
Раскраска и форматирование таблицы
Вы можете раскрасить таблицу в нужные вам тона - как все ячейки сразу, так и любую ячейку в отдельности.
В таблице можно также использовать коды для задания некоторых других параметров.
Рассмотрим приведенный ниже код:
{| class="wikitable" width="270" style="background:#F1E3C6; font-size:90%; color:white"
|-
! style="background:#765881"| БАШНЯ ВОЛШЕБНИКА
|-
| style="background:#5E6E92"| [[image:TES4-Wiztower 01.jpg|264px]]
|-
! style="background:#7D6178"| Скриншот из официального плагина
|}
Здесь:
- "wikitable" - определенный на вики класс оформления таблиц.
- style - задание параметров стиля оформления. Отметьте разницу в задании параметров стиля и отдельных тегов. Если фон таблицы должен быть прозрачным, укажите в стиле следующий код:
style="background:transparent;" - width="270" - ширина таблицы в пикселах.
- color:white - задание цвета шрифта (белый) всех ячеек таблицы, если в какой-нибудь ячейке или строке не будет переопределен.
- background:#F1E3C6 - цвет заливки всех ячеек таблицы по умолчанию. Работает, если цвет ячейки не переопределен. В данном случае все цвета переопределены, но в качестве примера это может быть полезным.
- font-size:90% - масштабирование размера шрифта.
- background:#765881 - заливка ячейки с заголовком.
- background:#5E6E92 - задание стиля заливки ячейки с картинкой. Отметьте, что цвет фона ячейки с картинкой подобран близким к ее цветовой тональности.
Смотрим результат:
| БАШНЯ ВОЛШЕБНИКА |
|---|
|
| Скриншот из официального плагина |
Размещение нескольких иллюстраций в ряд
Очень простой способ создания галереи с помощью таблиц.
Код:
{| class="wikitable"
| [[image:Sketch Namira.jpg]]
| [[image:Sketch Peryite.jpg]]
| [[image:Sketch Nocturnal.jpg]]
| [[image:Sketch Molag Bal.jpg]]
|-
| [[image:Sketch Sanguine.jpg]]
| [[image:Sketch Meridia.jpg]]
| [[image:Sketch Mephala.jpg]]
| [[image:Sketch Mehrunes Dagon.jpg]]
|-
| [[image:Sketch Azura.jpg]]
| [[image:Sketch Malacath.jpg]]
| [[image:Sketch Clavicus Vile.jpg]]
| [[image:Sketch Hermaeus Mora.jpg]]
|-
| [[image:Sketch Boethiah.jpg]]
| [[image:Sketch Hircine.jpg]]
| [[image:Sketch Vaermina.jpg]]
| [[image:Sketch Sheogorath.jpg]]
|}
Результат:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Нет никакой сложности в том, чтобы дополнить вашу таблицу с иллюстрациями подписями, заголовком и пр. полезными вещами.
Выравнивание изображений в таблицах по вертикали
Если необходимо, чтобы изображения и текст в таблицах выравнивались не по центру (по умолчанию), а по нижнему или верхнему краю ячеек, то для этого используются теги valign с параметрами "top" (верхний край) и "bottom" (нижний край).
Код:
{| class="wikitable"
|+ '''Таблица. Русские буквицы Скайрима'''
! Буквица
! Файл
! Размеры
! Размер, kB
|-
! [[Файл:A_letter.png|60px|A]]
| a_letter.png
| 234×196
| 84,9
|- valign="top"
! [[Файл:B_letter.png|50px|B]]
| b_letter.png
| 175×189
| 63,9
|- valign="bottom"
! [[Файл:C_letter.png|60px|C]]
| c_letter.png
| 224×188
| 70,9
|-
! [[Файл:D letter.png|60px|D]]
| valign="top" | d_letter.png
| 270×197
| valign="bottom" | 92,9
|-
|}
Результат:
| Буквица | Файл | Размеры | Размер, kB |
|---|---|---|---|
|
a_letter.png | 234×196 | 84,9 |
|
b_letter.png | 175×189 | 63,9 |
|
c_letter.png | 224×188 | 70,9 |
|
d_letter.png | 270×197 | 92,9 |
Пример сложной таблицы с иллюстрациями
| Исходный код: | На странице это будет выглядеть так: | |||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
{| class="wikitable" width="270" style="background:#F1E3C6; font-size:80%"
|-
! style="background:#826941; color:white" colspan="4" | ИНФОРМАЦИЯ О КНИГЕ:
|- style="background:#624921"
| colspan="4" | [[image:OblivionLibrary.jpg|264px]]
|-
! style="background:#826941; width:20%; color:white" | ID:
| width="85%" colspan="3"| bk_galerionthemystic
|-
! style="background:#826941; color:white" colspan="4"| Смотрите также:
|-
| colspan="4" |
: [[Morrowind Книга:Galerion The Mystic|'''Morrowind - английская версия''']]
: [[Daggerfall Книга:Галерион Мистик|'''Daggerfall-версия''']]
: [[Oblivion Книга:Галерион Мистик|'''Oblivion-версия''']]
: [[Lore Книга:Галерион Мистик|'''Lore-версия''']]
|-
! style="background:#826941; width:20%"| [[image:OBValueIcon small.png]]
! style="background:#F1E3C6; width:30%"| 50
! style="background:#826941; width:20%"| [[image:OBWeightIcon_small.png]]
! style="background:#F1E3C6; width:30%"| 3.0
|-
! style="background:#826941; color:white; width:20%"| Квест:
| width="80%" colspan="3"| Нет квеста
|-
! style="background:#826941; color:white" colspan="4"| Локации:
|-
| colspan="4" |
<center>'''Может быть найдена:'''</center>
: Balmora, Dorisa Darvel: Bookseller
: Balmora, Guild of Mages
: Molag Mar, Redoran Stronghold
: Sadrith Mora, Tel Naga Upper Tower
: Vivec, Guild of Mages
: Wolverine Hall, Mage's Guild
: Other, random loot
|-
|}
|
| |||||||||||||||||||||||||||||||||||||
Изображение в качестве ссылки
Внутренние ссылки
Если щелкнуть мышкой по любому изображению, то откроется страница с информацией о данном графическом файле, о статьях, в которых это изображение использовано, о загруженных версиях, исходном размере файла и т.п.
Но иногда требуется, чтобы изображение работало как внутренняя ссылка, то есть, щелчок по нему вызывал другую, указанную в параметрах, страницу.
Для этого используйте следующий код:
[[image:GeckSplash01.jpg|link=:category:Fallout3 GECK]]
Сравните:
 |
 |
Внешние ссылки
Для того, чтобы изображение работало как внешняя ссылка, можно использовать специальный шаблон - ExtImageLink.
- Описание
Шаблон ExtImageLink используется для изображений, которые должны работать в качестве ссылок на внешние источники/сайты/файлы и т.п.
- Параметры
- xsize - данный параметр масштабирует изображение по ширине.
- ysize - задает область действия по вертикали в пикселах. Имейте в виду, что указываемый размер по вертикали в параметре ysize должен совпадать с отображаемой на экране высотой изображения, иначе область действия ссылки или выйдет за ее пределы, или сделает нижнюю часть изображения неактивной.
- image - загруженное на вики изображение или баннер.
- link - ссылка на внешний источник.
- Пример использования
Данный пример использует масштабирование (уменьшение) исходного изображения по ширине. При этом параметр ysize подобран таким образом, чтобы он совпадал с высотой отображаемой на экране картинки.
{{ExtImageLink|xsize=500|ysize=60|image=Til logo2007a.jpg|link=http://www.imperial-library.info/|Имперская библиотека}}
- Результат
Imagemap
Полезное вики-расширение для создания, например, интерактивных карт. В таком случае щелчок мышью по интересующих пользователя объектах или названиях, изображенных на картинке, приведет к открытию соответствующих им статей.
Расширение Imagemap поддерживает также масштабирование с сохранением всех ссылок на своих объектах.
При наведении курсора на нужный объект под курсором отображается подсказка, определенная во второй части ссылки.
Например, в ссылке [[Morrowind:Morrowind|Morrowind]] при наведении курсора отобразится Morrowind.
- Параметры
| desc | Определяет положение ссылки на описание изображения. Возможные варианты: top-right, bottom-right, bottom-left, top-left или none. Помещает голубой значок «i» со ссылкой на страницу описания изображения в выбранный угол. По умолчанию значение параметра bottom-right. Чтобы скрыть ссылку на описание, выберите значение none. |
|---|---|
| rect | Прямоугольник. Параметры — координаты левого верхнего и правого нижнего углов, за ними следует ссылка в квадратных скобках. |
| circle | Круг. Первые два параметра — координаты центра, третий — радиус, за ними следует ссылка в квадратных скобках. |
| poly | Многоугольник. Параметры — координаты углов, за ними следует ссылка в квадратных скобках. Многоугольники должны быть заданы прежде всех других фигур! |
| default | Определяет ссылку по умолчанию в тех местах, где не заданы другие регионы. |
- Пример
(нажмите на название провинций: Морровинд, Киродиил (Имперская провинция) или Скайрим)
<imagemap>File:TES_Map_01.jpg|800px|Карта Империи Тамриэль rect 979 200 1110 225 [[Morrowind:Morrowind|Morrowind]] rect 562 318 766 371 [[Oblivion:Oblivion|Oblivion]] rect 740 176 817 198 [[Skyrim:Skyrim|Skyrim]] # Комментарий. Эта строчка игнорируется desc bottom-left </imagemap>
Для определения координат объектов, изображенных на картинке, вы можете использовать онлайн-редактор карт-изображений: ImageMapEdit
В поле URL указывается ссылка на картинку, ширина которой совпадает с номинальной шириной изображения (та, которая указана в свойствах самого изображения), затем нажать "Load". Можно также загрузить картинку непосредственно с компьютера.
