Справка:Изображения — различия между версиями

Версия 12:41, 24 сентября 2009

Загрузка файла изображения в CustisWiki

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

• для переименования изображения требуется новая загрузка файла. Старая версия должна быть стёрта администратором;
• при загрузке изображения более высокого качества под тем же названием старое изображение не стирается, а сохраняется в «Истории», как и любой файл;
• в названии файлов различается написание «ПРОПИСНЫМИ» и «строчными» буквами.
• так как пространство имен для всех изображений одно, желательно давать файлам дескриптивные (пусть и длинные) названия. Т.е. картинка с названием Image1.jpg не является дескриптивной, и повышает вероятность того, что в результате опечатки будет включена другая картинка и т.п.

Загрузка и удаление файлов отражаются в Special:Newimages. Просмотреть ранее загруженные файлы можно в списке загруженных изображений либо через категории изображений.

Описание изображения

После загрузки файла изображения появится ссылка на страницу описания этого изображения, которую желательно заполнить.

Вставка изображения в статью

Первоначальных размеров

Чтобы вставить загруженное изображение в статью, достаточно указать ссылку на него: [[Image:Файл]]. Изображение будет воспроизводится слева в полную величину, а текст начинаться ниже его. Если вы хотите дать только ссылку на изображение, не воспроизводя его, поставьте двоеточие перед словом «Image»: [[:Image:Файл]]. Щелчок на такую надпись загружает страницу самого изображения. Вот попробуйте: Image:2004-01-23-twins-computer-01-tmb.jpg.

С альтернативным текстом.

Чтобы в браузерах с отключённой функцией показа графики показывалось пояснение к изображению, его вписывают в конце после вертикальной чёрточки: [[Image: Файл|Альтернативный текст для изображений]]. При наведении курсора мыши на пустующее место эта подпись всплывает.

Пояснительная подпись.

Пояснительная подпись Чтобы сделать поясняющую подпись, используется атрибут «frame»: [[Image:2004-01-23-twins-computer-01-tmb.jpg|frame|Пояснительная подпись]] Он заключает изображение в рамку и смещает изображение вправо. В области «Пояснительная подпись» можно применять wiki-разметку.

Уменьшение размеров

Пояснительная подпись

[[Image:2004-01-23-twins-computer-01-tmb.jpg|thumb|Пояснительная подпись]]
Атрибуты «thumb» или «thumbnail», вставленные между именем файла и пояснительной подписью, уменьшают ширину изображения до 180рх (высота изменяется пропорционально), прижимают его вправо и помещают в рамку. Кроме того, справа от пояснительной подписи появляется значок, щёлкнув на который можно перейти на страницу изображения и посмотреть его в натуральную величину. Текст располагается слева от изображения.

Пояснительная подпись

[[Image:2004-01-23-twins-computer-01-tmb.jpg|thumb|100px|Пояснительная подпись]]
Для получения изображения заданной ширины (высота изменяется пропорционально), запишите её в пикселах (рх) за атрибутом «thumb». При этом не забывайте о соотношении изображения с текстом. Если статья небольшая, то можно подобрать высоту изображения так, чтобы текст полностью охватывал его. В длинной статье не стоит делать изображения маленькими, иначе они «утонут» в тексте.

Расположение на странице

Смещение вправо.

Кроме рассмотренных выше атрибутов «frame», «class=rimage», «thumb» и «thumbnail», прижать изображение вправо можно html-атрибутом «right»:

[[Image:2004-01-23-twins-computer-01-tmb.jpg|right|]] Текст, помещённый ниже, обтекает его слева. Не забудьте поставить вертикальную чёрточку «|» в конце. Это нужно для того, чтобы слово не воспринималось как альтернативный текст для изображения.

Смещение влево.

Чтобы прижать изображение к левому краю страницы, даже при наличии вышеперечисленных атрибутов, используйте html-атрибут «left» или «none».

Расположение по центру.

Для расположения изображения в центре странице используется html-атрибут «center»:

<center>[[Image:2004-01-23-twins-computer-01-tmb.jpg|thumb|Пояснительная подпись]]</center>

Пояснительная подпись

Пример

Комбинируя таблицы и изображения, можно представлять информацию, например, в таком виде:

Мои фото
Фото1		Фото2

Исходный текст для этой таблицы такой:

<center>
{| border="1" style="border-collapse:collapse"
!colspan="4"|Мои фото
|-
|Фото1|| [[Image:Stas-fomin.jpg]]
|Фото2|| [[Image:Stas-fomin.jpg]]
|}
</center>

Видео

Совершенно аналогично операциям с картинками (загрузка, включение через [[Image:…]]), можно загружать и видео, в FLV-формате.

Чтобы преобразовать обычный AVI-файл в FLV, проще всего воспользоваться программой ffmpeg. Скачайте и установите ее (например, отсюда). Опции можно не учить, просто заведите bat-файл !avi-to-flv.bat, состоящий всего из двух строк:

ffmpeg -y -i %1 -vcodec libx264 -pass 1 -vpre fastfirstpass -r 10 -b 579k -f flv %1.flv
ffmpeg -y -i %1 -vcodec libx264 -pass 2 -vpre hq -r 10 -b 579k -f flv %1.flv

и пользуйтесь им.

SVG-графика

В дополнении к бинарным изображениям, есть возможность работы с векторными SVG-изображениями, как с обычным Wiki-текстом:

• хранить SVG-описания изображений в вики-тексте статьи (включая историю).
• по текстам SVG-графики ведется такая же diff-история, как и по текстам любой вики-статьи.
• тексты можно редактировать вручную (несмотря на некоторые сложности, это возможно, а при выполнении массовых операций, типа Replace/текста — это сверхэффективно).
• При редактировании статьи картинка растеризуется, и далее, в статье показывается ее растеризованный вариант. Если кликнуть по картинке, то будет показан исходный SVG-файл, для его просмотра, либо броузер должен поддерживать SVG (Developperская версия Mozilla Firefox, или Opera), либо должен быть установлен SVG-плагин от Adobe.

C IE плагин от Adobe, работает сразу, для работы под Mozilla Firefox, необходимо после установки плагина найти файлы

NPSVG6.dll
NPSVG6.zip

и положить их в каталог

\Mozilla Firefox\plugins 

С SVG-графикой работают графические редакторы «MS Visio» начиная с версии 2003, и бесплатный редактор Inkscape.

Размещение картинки

Для размещения SVG-изображения, нужно воспользоваться тэгом «pic-svg», внутрь которого разместить все содержимое корневого тэга «svg», включая сам тэг. (то есть начальную инструкцию «xml») включать не нужно:

В результате, генерируется растровая PNG-картинка, с которой идет ссылка на SVG-изображение. К сожалению, у распространенных броузеров — Mozilla Firefox и Internet Explorer существует проблема с просмотром PNG-картинок с прозрачностью через альфа-канал:

• IE не показывает прозрачность при просмотре, см. описание проблемы и решения http://homepage.ntlworld.com/bobosola/
• Mozilla Firefox показывает, но при печати, печатает «прозрачность» черным цветом: https://bugzilla.mozilla.org/show_bug.cgi?id=235097

Если нужна прозрачность, и, например, возможность распечатки, а жертвовать прозрачностью нежелательно — можно воспользоваться тэгом «pic-svg-gif», растеризующего SVG-изображение не в PNG, а в 256-цветовой, «палитровый» GIF.

Советы

Несмотря на текстовость описания и разумностью их хранения под системой контроля версий CustisWiki, SVG-картинки могут быть весьма большими, и их редактирование вместе с остальным текстом, как правило неудобно (в частности, нельзя запускать «викификатор»). Поэтому, разумно или размещать их в отдельных разделах (чтобы редактировать эти разделы отдельно от основного текста), либо в отдельных статьях, и включать их с помощью механизма шаблонов, например:

Кодировки

Важный момент — редакторы типа Visio или Inkscape, обычно хранят SVG-файлы в кодировке UTF-8 (что указывается в заголовке первой инструкции «xml»). При помещении текста SVG-картинки в CustisWiki, нужно перекодировать текст в кодировку броузера (то есть если вы вставляете CopyPastом под Windows — то в кодировку «windows−1251».

Загрузка произвольных файлов

Можно также загружать «бинарный» контент произвольных форматов — документы в форматах PDF, DOC, презентации PowerPoint, и т. п. Их нельзя просмотреть встроенными в верстку статьи (как с обычными изображениями), но на них можно дать ссылку, и броузер пользователя сам разберется с переданным файлом (просмотрит его с помощью плагина, откроет какое-либо внешнее приложение или просто сохранит его, расчитывая, что читатель найдет, что делать с этим файлом. Ссылаться на такие файлы нужно в формате

[[Media:<имя файла>]]

Пример:

[[Media:Leeward.pdf|Лекция на тему «наветренный»/«подветренный»]].

• Лекция на тему «наветренный»/«подветренный».