Ганджавики:Иллюстрирование: различия между версиями
м (5 версий импортировано) |
м (стилевые правки) |
||
Строка 26: | Строка 26: | ||
Чтобы вставить загруженное изображение в статью, достаточно указать ссылку на него: '''<nowiki>[[Файл:Имя файла]]</nowiki>'''. | Чтобы вставить загруженное изображение в статью, достаточно указать ссылку на него: '''<nowiki>[[Файл:Имя файла]]</nowiki>'''. | ||
[[Файл: | [[Файл:nokia6110_b.jpg|100px|Nokia6110]] | ||
«По умолчанию» изображение будет воспроизводиться слева в полную величину, а текст начинаться ниже его. Если вы хотите дать только ссылку на изображение, не приводя его на странице, то поставьте двоеточие перед словом «Файл»: '''<nowiki>[[:Файл:Имя файла]]</nowiki>'''. Щелчок на такую надпись загружает страницу самого изображения: [[:Файл: | «По умолчанию» изображение будет воспроизводиться слева в полную величину, а текст начинаться ниже его. Если вы хотите дать только ссылку на изображение, не приводя его на странице, то поставьте двоеточие перед словом «Файл»: '''<nowiki>[[:Файл:Имя файла]]</nowiki>'''. Щелчок на такую надпись загружает страницу самого изображения: [[:Файл:nokia6110_b.jpg]]. | ||
===Замещающий текст=== | ===Замещающий текст=== | ||
Некоторые читатели отключают функцию показа изображений. В качестве замены (вместо изображений) для таких читателей отображается специальный текст — пояснение к изображению, его вписывают в конце после вертикальной чёрточки: '''<nowiki>[[Файл: | Некоторые читатели отключают функцию показа изображений. В качестве замены (вместо изображений) для таких читателей отображается специальный текст — пояснение к изображению, его вписывают в конце после вертикальной чёрточки: '''<nowiki>[[Файл:nokia6110_b.jpg|Замещающий текст для изображений]]</nowiki>''' | ||
Кроме этого, даже при включённом отображении изображений, замещающий текст будет показываться в виде всплывающей подсказки при наведении курсора мыши на изображение. | Кроме этого, даже при включённом отображении изображений, замещающий текст будет показываться в виде всплывающей подсказки при наведении курсора мыши на изображение. | ||
Строка 37: | Строка 37: | ||
== Текст заголовка == | == Текст заголовка == | ||
===Пояснительная подпись=== | ===Пояснительная подпись=== | ||
[[Файл: | [[Файл:nokia6110_b.jpg|мини|100px|Пояснительная подпись]] | ||
Чтобы сделать поясняющую подпись, используется атрибут «frame»: | Чтобы сделать поясняющую подпись, используется атрибут «frame»: | ||
<div style="width:530px;"><pre>[[Файл: | <div style="width:530px;"><pre>[[Файл:nokia6110_b.jpg|frame|Пояснительная подпись]]</pre></div> | ||
Он заключает изображение в рамку и смещает изображение вправо. | Он заключает изображение в рамку и смещает изображение вправо. | ||
Строка 68: | Строка 68: | ||
===Справа=== | ===Справа=== | ||
[[Файл: | [[Файл:nokia6110_b.jpg|right|100px|Nokia 6110]] | ||
Кроме рассмотренных выше атрибутов «frame», прижать изображение вправо можно атрибутом «right» («справа»). | Кроме рассмотренных выше атрибутов «frame», прижать изображение вправо можно атрибутом «right» («справа»). | ||
<div style="width:530px;"> | <div style="width:530px;"> | ||
<pre>[[Файл: | <pre>[[Файл:nokia6110_b.jpg|right]]</pre> | ||
</div> | </div> | ||
В отличие от изображения с атрибутом «frame», в данном случае изображение не оказывается заключённым в рамку, и замещающий текст не указывается в видимой подписи. Однако он всё равно используется в качестве всплывающей подсказки (после наведения курсора мыши на изображение), а также показывается вместо картинки для тех читателей, которые отключили отображение изображений в своём браузере. Поэтому рекомендуется указывать замещающий текст после атрибута «right», за вертикальной чёрточкой. Пример: | В отличие от изображения с атрибутом «frame», в данном случае изображение не оказывается заключённым в рамку, и замещающий текст не указывается в видимой подписи. Однако он всё равно используется в качестве всплывающей подсказки (после наведения курсора мыши на изображение), а также показывается вместо картинки для тех читателей, которые отключили отображение изображений в своём браузере. Поэтому рекомендуется указывать замещающий текст после атрибута «right», за вертикальной чёрточкой. Пример: | ||
<div style="width:530px"> | <div style="width:530px"> | ||
<pre>[[Файл: | <pre>[[Файл:nokia6110_b.jpg|right|Nokia 6110]]</pre> | ||
</div> | </div> | ||
===Слева=== | ===Слева=== | ||
[[Файл: | [[Файл:nokia6110_b.jpg|left|100px|Nokia 6110]] | ||
<p>Чтобы прижать изображение к левому краю страницы, используйте атрибут «left» («слева»).</p> | <p>Чтобы прижать изображение к левому краю страницы, используйте атрибут «left» («слева»).</p> | ||
<div style="width:530px; margin-left: 110px;"> | <div style="width:530px; margin-left: 110px;"> | ||
<pre>[[Файл: | <pre>[[Файл:nokia6110_b.jpg|left]]</pre> | ||
</div> | </div> | ||
Это работает в том числе и для изображений с атрибутом «frame». Пример: | Это работает в том числе и для изображений с атрибутом «frame». Пример: | ||
<div style="width:530px; margin-left: 110px;"> | <div style="width:530px; margin-left: 110px;"> | ||
<pre>[[Файл: | <pre>[[Файл:nokia6110_b.jpg|left|Nokia 6110]]</pre> | ||
</div> | </div> | ||
Строка 100: | Строка 100: | ||
<gallery> | <gallery> | ||
Файл: | Файл:pegg1_b.jpg | ||
Файл: | Файл:pegg2_b.jpg|Подпись | ||
Файл: | Файл:pegg3_b.jpg|Подпись со [[Пасхальное яйцо 3|ссылкой]] | ||
</gallery> | </gallery> | ||
Текущая версия от 00:28, 6 августа 2016
Данная статья подскажет, как украсить статью яркой картинкой или подробной схемой. С более подробной информацией вы можете ознакомиться в статье иллюстрирование.
Требования к изображениям
Изображение, которое вы собираетесь поместить в свою статью, должно соответствовать ряду требований:
- Соблюдение авторского права.
- Используйте правильный формат изображений:
- SVG — для векторных изображений;
- JPEG — для неподвижных растровых изображений с преобладанием плавных цветовых переходов (фотографии);
- PNG — для неподвижных растровых изображений с резкими границами между цветными областями (схемы, карты, скриншоты программ);
- GIF — для подвижных (анимированных) растровых изображений;
- если ваши изображения имеют другие форматы, то конвертируйте их в рекомендуемые.
- Загружаемые изображения должны иметь максимально высокое разрешение. Максимальный размер файла в Ганджавики составляет 64 мегабайт, поэтому не уменьшайте их перед загрузкой на сервер! Лучше это сделать с помощью команд разметки Ганджавики непосредственно при вставке в статью. Старайтесь, чтобы размер файла с уменьшенной копией изображения, которая используется в статье, не превышал 35 килобайт (максимум 70 килобайт).
- Для каждого изображения имеется страница с его описанием.
Загрузка изображения
Для того, чтобы в статье появилось изображение необходимо следующее:
- воспользоваться викификатором, кликнув иконку
- появится текст
Файл:Example.jpg
, переименовываем название файла в необходимый намФайл:primer.jpg
, сохраняем изменения в статье (окно редактирования закроется) - кликаете текст правой кнопкой мыши
Файл:primer.jpg
, выбираем «Открыть в новой вкладке». Откроется форма загрузки изображения - выбираете на локальном диске файл primer.jpg, кликаем кнопку «загрузить файл», после загрузки закрываем вкладку
- возвращаемся к основной вкладке, обновляете страницу (F5), после чего отобразится загруженное изображение
Вставка файла в статью
Вставка без изменения размеров
Чтобы вставить загруженное изображение в статью, достаточно указать ссылку на него: [[Файл:Имя файла]].
«По умолчанию» изображение будет воспроизводиться слева в полную величину, а текст начинаться ниже его. Если вы хотите дать только ссылку на изображение, не приводя его на странице, то поставьте двоеточие перед словом «Файл»: [[:Файл:Имя файла]]. Щелчок на такую надпись загружает страницу самого изображения: Файл:nokia6110_b.jpg.
Замещающий текст
Некоторые читатели отключают функцию показа изображений. В качестве замены (вместо изображений) для таких читателей отображается специальный текст — пояснение к изображению, его вписывают в конце после вертикальной чёрточки: [[Файл:nokia6110_b.jpg|Замещающий текст для изображений]]
Кроме этого, даже при включённом отображении изображений, замещающий текст будет показываться в виде всплывающей подсказки при наведении курсора мыши на изображение.
Текст заголовка
Пояснительная подпись
Чтобы сделать поясняющую подпись, используется атрибут «frame»:
[[Файл:nokia6110_b.jpg|frame|Пояснительная подпись]]
Он заключает изображение в рамку и смещает изображение вправо.
Уменьшение размеров
Атрибуты «thumb», «thumbnail» (или «мини», «миниатюра»), вставленные между именем файла и пояснительной подписью, уменьшают ширину изображения (в зависимости от настроек пользователя — от 100px до 300px; высота изменяется пропорционально), прижимают его вправо и помещают в рамку:
[[Файл:port.jpg|thumb|Пояснительная подпись]]
Кроме того, справа от пояснительной подписи появляется специальный значок: щёлкнув по нему, можно перейти на страницу изображения и посмотреть его в натуральную величину. Текст располагается слева от значка.
Для получения изображения заданной ширины (высота изменяется пропорционально), запишите её в пикселах (в формате ЧИСЛОрх). При этом не следует злоупотреблять чрезмерно большими значениями параметра. Этот атрибут можно использовать как отдельно, так и совместно с атрибутом «мини» — тогда «мини» добавляет рамку и подпись, но не влияет на размер:
[[Файл:port.jpg|100px|Пояснительная подпись]]
Или
[[Файл:port.jpg|thumb|100px|Пояснительная подпись]]
Можно вписать изображение в прямоугольник заданного размера, указав его ширину и высоту:
[[Файл:port.jpg|thumb|200x100px|Пояснительная подпись]]
Отношение сторон изображения (ширины к высоте) при этом не изменяется. Иными словами, когда пропорции изображения не совпадают с пропорциями заданного прямоугольника, тогда либо высота, либо ширина уменьшенного изображения окажется меньше заданной для прямоугольника. Поэтому, если необходимо задать именно высоту изображения (и дать ему пропорционально растянуться по ширине), то для этого достаточно сделать ширину описанного прямоугольника заведомо большей, нежели высота : x200px.
Не забывайте о соразмерности изображения и текста. Если статья небольшая, то можно подобрать высоту изображения так, чтобы текст полностью охватывал его. В длинной статье не стоит делать изображения чрезмерно маленькими, иначе они «утонут» в тексте.
Расположение на странице
Справа
Кроме рассмотренных выше атрибутов «frame», прижать изображение вправо можно атрибутом «right» («справа»).
[[Файл:nokia6110_b.jpg|right]]
В отличие от изображения с атрибутом «frame», в данном случае изображение не оказывается заключённым в рамку, и замещающий текст не указывается в видимой подписи. Однако он всё равно используется в качестве всплывающей подсказки (после наведения курсора мыши на изображение), а также показывается вместо картинки для тех читателей, которые отключили отображение изображений в своём браузере. Поэтому рекомендуется указывать замещающий текст после атрибута «right», за вертикальной чёрточкой. Пример:
[[Файл:nokia6110_b.jpg|right|Nokia 6110]]
Слева
Чтобы прижать изображение к левому краю страницы, используйте атрибут «left» («слева»).
[[Файл:nokia6110_b.jpg|left]]
Это работает в том числе и для изображений с атрибутом «frame». Пример:
[[Файл:nokia6110_b.jpg|left|Nokia 6110]]
Галереи
Для вставки нескольких изображений в статью, применяется специальный служебный тег <gallery>, который группирует изображения в галерею.
<gallery> Файл:Egg1_b.jpg Файл:Egg2_b.jpg|Подпись Файл:Egg3_b.jpg|Подпись со [[Пасхальное яйцо 3|ссылкой]] </gallery>
-
-
Подпись
-
Подпись со ссылкой
Форматирование галерей
Есть следующие параметры, регулирующие форматирование галереи:
- perrow — количество элементов в строке
- widths — размер (каждой) картинки по горизонтали
- heights — размер (каждой) картинки по вертикали
Пример:
<gallery perrow=2 widths="200px" heights="200px"> Файл:budenovka_b.jpg Файл:sablya_b.jpg Файл:baraban_b.jpg Файл:loshadka_b.jpg </gallery>
Пример:
<gallery perrow=4 widths="100px" heights="100px"> Файл:budenovka_b.jpg Файл:sablya_b.jpg Файл:baraban_b.jpg Файл:loshadka_b.jpg </gallery>
Рекомендации
Нагромождение изображений
Статья может стать трудночитаемой и выглядеть неряшливо, если на странице расположено слишком много изображений при сравнительно малом объёме текста. По этой причине старайтесь включать в небольшую статью наиболее важные иллюстрации и лишь по мере её увеличения подключать дополнительные, либо включать дополнительные изображения в структурированные галереи.