Просмотр исходного текста страницы Справка:Изображения

==Загрузка файла изображения в {{SITENAME}}==
[[Category:{{SITENAME}}:Справка|Изображения]]


Загрузить любой файл может только зарегистрированный пользователь, представившийся системе. Последовательность действий описана на странице [[Special:Upload|Загрузить файл]]. При загрузке учитывайте некоторые особенности:
*для переименования изображения требуется новая загрузка файла. Старая версия должна быть стёрта администратором;
*при загрузке изображения более высокого качества под тем же названием старое изображение не стирается, а сохраняется в «Истории», как и любой файл;
*в названии файлов различается написание «ПРОПИСНЫМИ» и «строчными» буквами.
*так как пространство имен для всех изображений одно, желательно давать файлам дескриптивные (пусть и длинные) названия. Т.е. картинка с названием Image1.jpg не является дескриптивной, и повышает вероятность того, что в результате опечатки будет включена другая картинка и т.п.
Загрузка и удаление файлов отражаются в [[Special:Newimages]]. Просмотреть ранее загруженные файлы можно [[Special:Imagelist|в списке загруженных изображений]] либо через категории изображений.

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



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


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

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

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

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

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

===Расположение на странице===
'''Смещение вправо.'''

Кроме рассмотренных выше атрибутов «frame», «class=rimage», «thumb» и «thumbnail»,   прижать изображение вправо можно html-атрибутом «'''right'''»:
{|
|[[Image:2004-01-23-twins-computer-01-tmb.jpg|right|]]
<nowiki>[[Image:2004-01-23-twins-computer-01-tmb.jpg|right|]]</nowiki>

Текст, помещённый ниже, обтекает его слева. Не забудьте поставить вертикальную чёрточку «'''|'''»  в конце. Это нужно для того, чтобы слово не воспринималось как альтернативный текст для изображения.
|}
'''Смещение влево.'''

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

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

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

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

===Пример===
Комбинируя таблицы и изображения, можно представлять информацию, например, в таком виде:
<center>
{| border="1" style="border-collapse:collapse"
!colspan="4"|Мои фото
|-
|Фото1|| [[Image:Stas-fomin.jpg]]
|Фото2|| [[Image:Stas-fomin.jpg]]
|}
</center>
Исходный текст для этой таблицы такой:
<pre><nowiki>
<center>
{| border="1" style="border-collapse:collapse"
!colspan="4"|Мои фото
|-
|Фото1|| [[Image:Stas-fomin.jpg]]
|Фото2|| [[Image:Stas-fomin.jpg]]
|}
</center>
</nowiki></pre>


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

Чтобы преобразовать обычный AVI-файл в FLV, проще всего воспользоваться программой <tt>ffmpeg</tt>.
Скачайте и установите ее (например, [http://www.paehl.com/open_source/?Convert_Tools:FFMPEG отсюда]). Опции можно не учить, просто заведите bat-файл <tt>!avi-to-flv.bat</tt>, состоящий всего из двух строк:
 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-графика ==
В дополнении к бинарным изображениям, есть возможность работы с векторными [[lib:SVG]]-изображениями, как с обычным Wiki-текстом:
* хранить [[lib:SVG]]-описания изображений в вики-тексте статьи (включая историю).
* по текстам [[lib:SVG]]-графики ведется такая же diff-история, как и по текстам любой вики-статьи.
* тексты можно редактировать вручную (несмотря на некоторые сложности, это возможно, а при выполнении массовых операций, типа Replace/текста — это сверхэффективно).
* При редактировании статьи картинка растеризуется, и далее, в статье показывается ее растеризованный вариант. Если кликнуть по картинке, то будет показан исходный SVG-файл, для его просмотра, либо броузер должен поддерживать SVG (Developperская версия Mozilla Firefox, или Opera), либо должен быть установлен [http://www.adobe.com/SVG/ SVG-плагин от Adobe].

{{CONFIDENTIAL-BEGIN}}
У нас дистрибутив плагина от Adobe можно взять на [file:///x:/adobe.com/svgview/6.01]
{{CONFIDENTIAL-END}}

C IE плагин от Adobe, работает сразу, для работы под Mozilla Firefox, необходимо после установки плагина
найти файлы
 NPSVG6.dll
 NPSVG6.zip
и положить их в каталог
 \Mozilla Firefox\plugins 

С [[lib:SVG]]-графикой работают графические редакторы «MS Visio» начиная с версии 2003,
и бесплатный редактор [http://www.inkscape.org Inkscape].
{{CONFIDENTIAL-BEGIN}}
У нас его дистрибутив можно взять на [file:///x:/distrib/inkscape.org]
{{CONFIDENTIAL-END}}


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

<pic-svg>
<svg
   id="svg559"
   sodipodi:version="0.32"
   width="400pt"
   height="400pt"
   sodipodi:docname="inkscape.logo.svg"
   sodipodi:docbase="/home/phillipsjd/temp/inkscape-project/inkscape/samples"
   inkscape:version="0.37"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs
     id="defs561" />
  <sodipodi:namedview
     id="base"
     inkscape:zoom="0.77250000"
     inkscape:cx="200"
     inkscape:cy="200"
     inkscape:window-width="400"
     inkscape:window-height="499"
     inkscape:window-x="4"
     inkscape:window-y="50" />
  <g 
     id="g839"
     transform="translate(-109.7253,24.27184)">
    <path
       style="font-size:12;fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:0.936193pt;"
       d="M 397.64309 320.25301 L 280.39197 282.517 L 250.74227 124.83447 L 345.08225 29.146783 L 393.59996 46.667064 L 483.89679 135.61619 L 397.64309 320.25301 z "
       id="whiteSpace" />
    <path
       style="font-size:12;fill-rule:evenodd;stroke-width:1pt;fill:#000000;fill-opacity:1;"
       d="M 476.95792 339.17168 C 495.78197 342.93607 499.54842 356.11361 495.78197 359.87802 C 492.01856 363.6434 482.6065 367.40781 475.07663 361.76014 C 467.54478 356.11361 467.54478 342.93607 476.95792 339.17168 z "
       id="droplet01" />
    <path
       style="font-size:12;fill-rule:evenodd;stroke-width:1pt;fill:#000000;fill-opacity:1;"
       d="M 286.46194 340.42914 C 284.6277 340.91835 269.30405 327.71337 257.16909 333.8338 C 245.03722 339.95336 236.89276 353.65666 248.22676 359.27982 C 259.56184 364.90298 267.66433 358.41867 277.60113 351.44119 C 287.53903 344.46477 287.18046 343.1206 286.46194 340.42914 z "
       id="droplet02" />
    <path
       style="font-size:12;fill-rule:evenodd;stroke-width:1pt;fill:#000000;fill-opacity:1;"
       d="M 510.35756 306.92856 C 520.59494 304.36879 544.24333 306.92856 540.47688 321.98634 C 536.71354 337.04806 504.71297 331.39827 484.00371 323.87156 C 482.12141 308.81083 505.53237 308.13423 510.35756 306.92856 z "
       id="droplet03" />
    <path
       style="font-size:12;fill-rule:evenodd;stroke-width:1pt;fill:#000000;fill-opacity:1;"
       d="M 359.2403 21.362537 C 347.92693 21.362537 336.6347 25.683095 327.96556 34.35223 L 173.87387 188.41466 C 165.37697 196.9114 161.1116 207.95813 160.94269 219.04577 L 160.88418 219.04577 C 160.88418 219.08524 160.94076 219.12322 160.94269 219.16279 C 160.94033 219.34888 160.88418 219.53256 160.88418 219.71865 L 161.14748 219.71865 C 164.0966 230.93917 240.29699 245.24198 248.79866 253.74346 C 261.63771 266.58263 199.5652 276.01151 212.4041 288.85074 C 225.24316 301.68979 289.99433 313.6933 302.8346 326.53254 C 315.67368 339.37161 276.5961 353.04289 289.43532 365.88196 C 302.27439 378.72118 345.40201 362.67257 337.5908 396.16198 C 354.92909 413.50026 391.10302 405.2208 415.32417 387.88252 C 428.16323 375.04345 390.6948 376.17577 403.53397 363.33668 C 416.37304 350.49745 448.78128 350.4282 476.08902 319.71589 C 465.09739 302.62116 429.10801 295.34136 441.94719 282.50217 C 454.78625 269.66311 479.74708 276.18423 533.60644 251.72479 C 559.89837 239.78398 557.72636 230.71459 557.62567 219.71865 C 557.62356 219.48727 557.62567 219.27892 557.62567 219.04577 L 557.56716 219.04577 C 557.3983 207.95812 553.10345 196.9114 544.60673 188.41466 L 390.54428 34.35223 C 381.87515 25.683095 370.55366 21.362537 359.2403 21.362537 z M 357.92378 41.402939 C 362.95327 41.533963 367.01541 45.368018 374.98006 50.530832 L 447.76915 104.50827 C 448.56596 105.02498 449.32484 105.564 450.02187 106.11735 C 450.7189 106.67062 451.3556 107.25745 451.95277 107.84347 C 452.54997 108.42842 453.09281 109.01553 453.59111 109.62808 C 454.08837 110.24052 454.53956 110.86661 454.93688 111.50048 C 455.33532 112.13538 455.69164 112.78029 455.9901 113.43137 C 456.28877 114.08363 456.52291 114.75639 456.7215 115.42078 C 456.92126 116.08419 457.08982 116.73973 457.18961 117.41019 C 457.28949 118.08184 457.33588 118.75535 457.33588 119.42886 L 414.21245 98.598549 L 409.9118 131.16055 L 386.18512 120.04324 L 349.55654 144.50131 L 335.54288 96.1703 L 317.4919 138.4453 L 267.08369 143.47735 L 267.63956 121.03795 C 267.63956 115.64823 296.69685 77.915899 314.39075 68.932902 L 346.77721 45.674327 C 351.55594 42.576634 354.90608 41.324327 357.92378 41.402939 z M 290.92738 261.61333 C 313.87149 267.56365 339.40299 275.37038 359.88393 275.50997 L 360.76161 284.72563 C 343.2235 282.91785 306.11346 274.45012 297.36372 269.98057 L 290.92738 261.61333 z "
       id="mountainDroplet" />
  </g>
</svg>
</pic-svg>

В результате, генерируется растровая 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.

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

{{:orav.svg}}
----
{{:ribbon.svg}}
----
{{:tux.svg}}
----

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

== Загрузка произвольных файлов ==
Можно также загружать «бинарный» контент произвольных форматов — документы в форматах PDF, DOC, презентации PowerPoint, и т. п.
Их нельзя просмотреть встроенными в верстку статьи (как с обычными изображениями), но на них можно дать ссылку, и броузер пользователя сам разберется с переданным файлом (просмотрит его с помощью плагина, откроет какое-либо внешнее приложение или просто сохранит его, расчитывая, что читатель найдет, что делать с этим файлом. 
Ссылаться на такие файлы нужно в формате
 <nowiki>[[Media:<имя файла>]]</nowiki>
Пример:
 <nowiki>[[Media:Leeward.pdf|Лекция на тему «наветренный»/«подветренный»]].</nowiki>
* [[Media:Leeward.pdf|Лекция на тему «наветренный»/«подветренный»]].


{{replicate-from-custiswiki-to-lib}}
{{replicate-from-custiswiki-to-all}}