Гайд: различия между версиями

Версия от 02:28, 31 декабря 2024

Пособие по wiki.ilsat.ru - независимой селькупской википедии.

Вставка изображений

Локальные файлы

Пока что загрузка изображений на вики невозможна. Файл загрузится, но использовать его не получится.

Тег cimg

Тег <cimg> позволяет вставить изображение с Flickr, OneDrive, Dropbox, SlideShare, Speaker Deck или imgur и используется практически аналогично тегу <img>.

Изображение из Flickr:

<cimg src="https://www.flickr.com/photos/kimagurenote/26817918388/in/album-72157649433330773/" width="400" height="300">test</cimg>

Изображение из Dropbox:

<cimg src="https://www.dropbox.com/s/9qwyhjuliy2whlu/18m4362_1920x1200.jpg?dl=0" width="400" height="300">[[w:Ванжилькынак|Ванжилькынак]] in winter</cimg>

Изображение из Imgur:

<cimg src="https://i.imgur.com/4l13cuG.jpeg" width="200" height="250"></cimg>

Полный синтаксис тега <cimg> на сайте.

Тег flickr

Данный тег позволяет при помощи более простого кода вставить изображение из Flickr по его ID. Пример: Unable to decode Flickr response to flickr.photos.getInfo request: <!DOCTYPE html> <html> <head>

body { height:100%; margin:0; padding:0; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300; color: #000; background: white url(/flickr_panda_error_pages/bg_error_hold_your_clicks.jpg) no-repeat center center; background-size: cover; background-attachment: fixed; }

#Main { width: 100%; }

body.new-footer #main, body.new-footer #Main { margin-bottom: 0; }

#bg { width: 100%; height: 100%; min-width: 600px; min-height: 445px;

}

#bg p { line-height: .8em; }

#bg p, #bg span{ text-shadow: 0px 1px 1px rgba(255,255,255,0.5), 0px 0px 2px #fff; }

.content { position: relative; z-index: 1; padding: 10% 30px 0 34%;

}

.content span { line-height: 1.6em; font-size: 17px; }

h1 { margin: 0; font-weight: 400; font-size: 2.1em; margin-bottom: 24px; }

a.attribution { position: absolute; bottom: 0; right: 10px; background-color: #000; background: rgba(0,0,0,0.45); font-size: 11px; padding: 7px 13px; color: #dfdfdf; }

.TheError {background:#000;color:#0F0;padding:1em;position:absolute;bottom:30px;width:60%;margin: 0 20% 0 20%;} .TheError pre {margin:0;}

#global-nav .logo { display: block; height: 100%; position: absolute; left: 10px; top: 0; } #global-nav .logo .refresh-logo-2013, #global-nav .logo .refresh-logo-2013-2x { text-indent: -9999px; display: block; position: absolute; left: 0; height: 100%; width: 100%; background-position: center center; background-image: url(/flickr_panda_error_pages/flickr_logo_small_white.png); background-image: -webkit-image-set(url(/flickr_panda_error_pages/flickr_logo_small_white.png) 1x, url(/flickr_panda_error_pages/flickr_logo_large_white.png) 2x); background-repeat: no-repeat; } #global-nav .logo a { display: block; height: 100%; width: 100%; } #global-nav .logo a img { display: block; position: absolute; left: 0; bottom: 12px; }

#global-nav { color: #000; /* to preserve line-height and selector appearance */ /* because legend doesn't inherit in IE */ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: fixed; top: 0; left: 0; z-index: 1000; height: 46px; width: 100%; min-width: 975px; margin: auto; padding: 0; text-align: left; background: rgba(0, 0, 0, 0.8); background: url(/flickr_panda_error_pages/iefallbacktrans.png) repeat scroll \9; box-shadow: none; /* Profile */ } #global-nav * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #global-nav div, #global-nav ul, #global-nav ol, #global-nav li, #global-nav form, #global-nav fieldset, #global-nav legend, #global-nav input, #global-nav textarea { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; color: #666666; }

</style> </head> <body> <div id="global-nav"> <div class="logo" style="width: 70px;"> <a href="/" title="Flickr logo. If you click it, you'll go home" > <span class="refresh-logo-2013"> Flickr logo. If you click it, you'll go home </span> </a> </div> </div> <div id="bg">

<a class="attribution" href="/photos/toyokazu/8644384737/">by Toyokazu</a> <div class="content"> <h1>Bad, bad panda!</h1> <p><span>We’re aware of the problem and are fixing it.<br>Thanks for your patience.</span></p> <p><span>Nous connaissons ce problème et nous travaillons à le résoudre.</span><br>Merci pour votre patience et pour votre compréhension.</p> <p><span>Estamos al tanto del problema y estamos intentando solucionarlo.</span><br>Gracias por tu paciencia.</p> <p><span>Wir sind über das Problem informiert und arbeiten an einer Lösung.</span><br>Vielen Dank für Ihre Geduld.</p> <p><span>Siamo al corrente del problema e ce ne stiamo occupando.</span><br>Ti ringraziamo per la pazienza.</p> <p><span>Já sabemos qual é o problema e vamos resolvê-lo.</span><br>Obrigado pela paciência.</p> <p><span>문제를 알고 살펴보는 중입니다.</span><br>기다려 주셔서 감사합니다.</p> <p><span>我們已經意識到該問題，並正在盡快解決。</span><br>多謝你的耐心等候！</p> <p><span>Chúng tôi đă nhận ra sự cố và đang tìm hiểu chúng.</span><br>Cảm ơn vì sự kiên nhẫn của bạn.</p> <p><span>Kami mengetahui masalah ini dan sedang mengatasinya.</span><br>Terima kasih atas kesabaran Anda.</p>

</div> </div> </body> </html>

<flickr>7012208003</flickr>

ID изображения находится в ссылке на Flickr: www.flickr.com/photos/43899573@N06/7012208003/in/photolist-bFDp8Z-Gr8TE6-f4tU5t ID изображения — это часть перед последним слэшем, то есть 7012208003 в этом примере. Добавить дополнительные данные: Flickr Error ( Not a valid ID ): PhotoID not numeric

@@ Строка 27: / Строка 27: @@
 <pre><flickr>7012208003</flickr></pre>
 ID изображения находится в ссылке на Flickr:
-<pre>www.flickr.com/photos/43899573@N06/7012208003/in/photolist-bFDp8Z-Gr8TE6-f4tU5t</pre>
+<code>www.flickr.com/photos/43899573@N06/7012208003/in/photolist-bFDp8Z-Gr8TE6-f4tU5t</code>
 ID изображения — это часть перед последним слэшем, то есть '''7012208003''' в этом примере.
+Добавить дополнительные данные: <code><flickr>id|type|location|size|caption</flickr></code>