Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<html lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html;charset=UTF-8" >
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
  <title>Help:Images</title>
    <link rel="stylesheet" type="text/css" href="./nana_project_files/style.css">
</head>
​
<body>
<div id="navcont"> 
  <div id="nav"> 
    <ul>
     <li class="borderleft"><a href="http://www.uni-weimar.de" target="_blank">Bauhaus-Universität Weimar</a></li>
     <li><a href="http://www.uni-weimar.de/cms/medien.html" target="_blank">Faculty of Media</a></li>
     <li><a href="http://www.uni-weimar.de/medien/wiki/Main_Page" target="_blank">Startseiten</a>
      <ul>
       <li class="top"><a href="http://www.uni-weimar.de/medien/wiki/Main_Page" target="_blank">Medien Wiki</a></li>
       <li><a href="http://www.uni-weimar.de/medien/wiki/EKK:Start" target="_blank">Elektroakustische Komposition ...</a></li>
       <li><a href="http://www.uni-weimar.de/medien/wiki/RADIO:Start" target="_blank">Experimentelles Radio</a></li>
       <li><a href="http://www.uni-weimar.de/medien/wiki/EXPTV:Start" target="_blank">Experimentelle Television</a></li>
       <li><a href="http://www.uni-weimar.de/medien/wiki/GMU:Start" target="_blank">Gestaltung medialer Umgebungen</a></li>
       <li><a href="http://www.uni-weimar.de/medien/wiki/IMM:Start" target="_blank">Immersive Medien</a></li>
       <li><a href="http://www.uni-weimar.de/medien/wiki/IFD:Start" target="_blank">Interface Design</a></li>
       <li><a href="http://www.uni-weimar.de/medien/wiki/FOTO:Start" target="_blank">Fotowerkstätten Medien</a></li>
       <li><a href="http://www.uni-weimar.de/medien/wiki/ME:Start" target="_blank">Medien-Ereignisse</a></li>
       <li><a href="http://www.uni-weimar.de/medien/wiki/MODEN:Start" target="_blank">Moden &amp; öffentl. Erscheinungsbilder</a></li>
       <li><a href="http://www.uni-weimar.de/medien/wiki/MME:Start" target="_blank">Multimediales Erzählen</a></li>
      </ul>
     </li> 
     <li><a href="http://www.uni-weimar.de/medien/wiki/Category:WS14" target="_blank">Wiki Related</a>
       <ul>
        <li class="top"><a href="http://www.uni-weimar.de/medien/wiki/Category:WS14" target="_blank">Wintersemester 2014</a></li>
        <li><a href="http://www.uni-weimar.de/medien/wiki/Category:SS14" target="_blank">Sommersemester 2014</a></li>
        <li><a href="http://www.uni-weimar.de/medien/wiki/Special:RecentChanges" target="_blank">Recent changes</a></li>
        <li><a href="http://www.uni-weimar.de/medien/wiki/Special:NewPages" target="_blank">New pages</a></li>
        <li><a href="http://www.uni-weimar.de/medien/wiki/Help:Editing" target="_blank">Help</a></li>
       </ul>
     </li>
    <li><a href="http://www.uni-weimar.de/medien/wiki/Special:UserLogin?returnto=Help:Images" target="_blank">Log In</a>
    </ul>
​
    <div id="search_box"> 
    <form id="search_form" method="post" action="#"> 
    <input type="text" id="s" value="Search" class="swap_value" /> 
    </form> 
    </div> 
  </div>
</div>
​
<div id="topic">
  <div id="design_logo_line">
    <div id="design_logo">
      <a href="http://www.uni-weimar.de/cms/medien/medienkunstmediengestaltung.html">
        Media Art &amp; Design
      </a>
    </div>
  </div>
​
  <div>
    <h1 id="firstHeading">Help:Images</h1>
  </div>
​
</div>
​
​
​
<div class="main">
​
<h2 id="intro">Intro</h2>
​
    <p> This is a short introduction how to use images in this wiki. It quickly highlights the principles when using images in the wiki.</p>
    <p> Before you upload anything to this wiki, you must </p>
​
    <ol>
      <li> be absolutely sure to either be the copyright owner of the file, have a written approval that you can upload the file, or the file is under a license which allows you to use it.</li>
      <li> choose which licence you want to put your image under if you are the copyright holder or obey and mention the license the image is under if you can use it.</li>
    </ol>
    <p> Read more about where to find images you may use  under <a href="http://www.uni-weimar.de/medien/wiki/Sources/Images" title="Sources/Images">Sources/Images</a>.</p>
​
    <ol>
      <li> First thing you do is to <b>edit the page where you want to use a picture</b>. Do the uploading later. </li>
      <li> Type <tt>[[File:Your descriptive filename here.jpg]]</tt> or <b>use the insert file button in the tool bar</b><br><a href="http://www.uni-weimar.de/medien/wiki/File:Insert_File.png" class="image"><img alt="Insert File.png" src="http://www.uni-weimar.de/medien/wiki/images/Insert_File.png" width="323" height="81"></a><br> If you use the tool bar, you must <b>change the default file name</b> to a name that briefly describes your Image. </li>
      <li> <b>Add the layout options</b>. The table below gives you an overview on which options you have when including images. </li>
      <li> Once you edited and saved your page you have a greyed out image link like this one <a href="http://www.uni-weimar.de/medien/wiki/index.php5?title=Special:Upload&amp;wpDestFile=Not_yet_existant_image.png" class="new" title="File:Not yet existant image.png">File:Not yet existant image.png</a>. If you click on it it will direct you to the upload page. Where you can <b>Upload the yet missing File</b>. The filename of the uploaded image will be renamed to the one you have written in the article, it is not necessary that they match. (Example: you write in the wiki <tt>[[File:Michael Mustermann Projekt XY.png]]</tt> and later you can upload a file called DSC894732.png. Your File will be renamed automatically, just the filetype needs to match) Make sure you upload in a resolution so it can also be used for printing at a later point. A reasonable file size is from 1 to 5 MB for a jpeg file depending on the pixel size. Important: choose the license you want to put your image under. </li>
    </ol>
​
    <h2 id="options">Placement Options</h2>
​
    <table border="1">
      <tbody>
        <tr>
          <td>
            <h3 class="panel-title">TYPE: [[File:Pelly.jpg]] </h3>
            <p>
            DESCRIPTION: Places an image in 100%. (The <span class="tooltip"><span class="tooltip_abbr">dpi</span><span class="tooltip_tipwrapper"><span class="tooltip_tip"><span>[[Druckvorstufe|dots per inch]]</span></span></span></span> of the image will be ignored, every pixel information will be displayed) If you have a high-res image this will be too huge and exceed the boundaries of the page.
            </p>            
          </td>
          <td id="pic_newline">
            <a href="http://www.uni-weimar.de/medien/wiki/File:Pelly.jpg" class="image"><img alt="Pelly.jpg" src="http://www.uni-weimar.de/medien/wiki/images/thumb/Pelly.jpg/400px-Pelly.jpg" width="300" height="280"></a>
          </td>
        </tr>
​
        <tr>
          <td>
            <h3 class="panel-title">TYPE: [[File:Pelly.jpg|250px]] </h3>
            <p>
            DESCRIPTION: Scales the image to exactly 250 pixels in width
            </p>
          </td>
          <td id="pic_newline">
            <a href="http://www.uni-weimar.de/medien/wiki/File:Pelly.jpg" class="image"><img alt="Pelly.jpg" src="http://www.uni-weimar.de/medien/wiki/images/thumb/Pelly.jpg/250px-Pelly.jpg" width="250" height="233"></a>
          </td>
        </tr>
​
        <tr>
          <td>
            <h3 class="panel-title">TYPE: [[File:Pelly.jpg|thumb]] </h3>
            <p>
            DESCRIPTION: Scales the image to thumbnail size. It will be right aligned by default.
            </p>
          </td>
          <td id="pic_newline">
            <a href="http://www.uni-weimar.de/medien/wiki/File:Pelly.jpg" class="image"><img alt="Pelly.jpg" src="http://www.uni-weimar.de/medien/wiki/images/thumb/Pelly.jpg/180px-Pelly.jpg" width="180" height="168" class="thumbimage"></a>  <div><div class="magnify"><a href="http://www.uni-weimar.de/medien/wiki/File:Pelly.jpg" class="internal" title="Enlarge"><img src="http://www.uni-weimar.de/medien/wiki/skins/common/images/magnify-clip.png" width="15" height="11" alt=""></a>
          </td>
        </tr>
​
        <tr>
          <td>
            <h3 class="panel-title">TYPE: [[File:Pelly.jpg|thumb|Caption for the Image]] </h3>
            <p>
            DESCRIPTION: Scales the image to thumbnail size. A caption is placed below the image.
            </p>
          </td>
          <td id="pic_newline">
            <a href="http://www.uni-weimar.de/medien/wiki/File:Pelly.jpg" class="image"><img alt="" src="http://www.uni-weimar.de/medien/wiki/images/thumb/Pelly.jpg/180px-Pelly.jpg" width="180" height="168" class="thumbimage"></a>
            <div class="thumbcaption">
            <div class="magnify"><a href="http://www.uni-weimar.de/medien/wiki/File:Pelly.jpg" class="internal" title="Enlarge"><img src="http://www.uni-weimar.de/medien/wiki/skins/common/images/magnify-clip.png" width="15" height="11" alt=""></a></div>Caption for the Image</div>
          </td>
        </tr>
​
        <tr>
          <td>
            <h3 class="panel-title">TYPE: [[File:Pelly.jpg|left|thumb|Caption for the Image]] </h3>
            <p>
            DESCRIPTION: Places the thumbnail on the left side. A caption is placed below the image.
            </p>
          </td>
          <td id="pic_newline">
            <a href="http://www.uni-weimar.de/medien/wiki/File:Pelly.jpg" class="image"><img alt="" src="http://www.uni-weimar.de/medien/wiki/images/thumb/Pelly.jpg/180px-Pelly.jpg" width="180" height="168" class="thumbimage"></a>
            <div class="thumbcaption">
            <div class="magnify"><a href="http://www.uni-weimar.de/medien/wiki/File:Pelly.jpg" class="internal" title="Enlarge"><img src="http://www.uni-weimar.de/medien/wiki/skins/common/images/magnify-clip.png" width="15" height="11" alt=""></a></div>Caption for the Image</div>
          </td>
        </tr>
​
        <tr>
          <td>
            <h3 class="panel-title">TYPE: [[:File:Pelly.jpg]] </h3>
            <p>
            DESCRIPTION: Displays only the link to the image's page with credits and copyright information.
            </p>
          </td>
          <td id="pic_newline">
            <a href="http://www.uni-weimar.de/medien/wiki/File:Pelly.jpg" title="File:Pelly.jpg">File:Pelly.jpg</a>
          </td>
        </tr>
​
        <tr>
          <td>
            <h3 class="panel-title">TYPE: [[Media:Pelly.jpg]] </h3>
            <p>
            DESCRIPTION: Provides the download link for the image.
            </p>
          </td>
          <td id="pic_newline">
            <a href="http://www.uni-weimar.de/medien/wiki/images/Pelly.jpg" class="internal" title="Pelly.jpg">Media:Pelly.jpg</a>
          </td>
        </tr>
​
      </tbody>
    </table>
​
​
    <h2 id="galleries"> Image Galleries </h2>
​
    <blockquote>
      <pre>
      &lt;gallery&gt;
      File:Pelly.jpg|the caption
      File:verfremdeterkreis.jpg|another caption
      File:patchrotation2.jpg|yet another
      &lt;/gallery&gt;</pre>
    </blockquote>
​
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">Above wikicode renders as:</h3>
      </div>
      <div class="panel-body">
​
​
        <table class="gallery" cellspacing="0" cellpadding="0"><tr>
          <td id="pic_newline2"><div class="gallerybox" style="width: 155px;">
                <div class="thumb" style="padding: 17px 0; width: 150px;"><div style="margin-left: auto; margin-right: auto; width: 120px;"><a href="http://www.uni-weimar.de/medien/wiki/File:Pelly.jpg" class="image"><img alt="" src="http://www.uni-weimar.de/medien/wiki/images/thumb/Pelly.jpg/120px-Pelly.jpg" width="120" height="112"></a></div></div>
                <div class="gallerytext">
          <p>the caption
          </p>
                </div>
              </div></td>
              <td id="pic_newline2"><div class="gallerybox" style="width: 155px;">
                <div class="thumb" style="padding: 13px 0; width: 150px;"><div style="margin-left: auto; margin-right: auto; width: 120px;"><a href="http://www.uni-weimar.de/medien/wiki/File:Verfremdeterkreis.jpg" class="image"><img alt="" src="http://www.uni-weimar.de/medien/wiki/images/thumb/Verfremdeterkreis.jpg/117px-Verfremdeterkreis.jpg" width="117" height="120"></a></div></div>
                <div class="gallerytext">
          <p>another caption
          </p>
                </div>
              </div></td>
              <td id="pic_newline2">
                <div class="gallerybox" style="width: 155px;">
                <div class="thumb" style="padding: 13px 0; width: 150px;"><div style="margin-left: auto; margin-right: auto; width: 120px;"><a href="http://www.uni-weimar.de/medien/wiki/File:Patchrotation2.jpg" class="image"><img alt="" src="http://www.uni-weimar.de/medien/wiki/images/thumb/Patchrotation2.jpg/118px-Patchrotation2.jpg" width="118" height="120"></a></div>
                </div>
                  <div class="gallerytext">
                <p>yet another</p>
              </div>
            </div>
            </td>
          </tr>
        </table>
​
​
      </div>
    </div>
​
    <h2 id="panorama"> Panorama </h2>
    <blockquote><pre>&lt;div class="panorama"&gt;[[File:Marktplatz.jpg|1500px]]&lt;/div&gt;</pre></blockquote>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">Above wikicode renders as:</h3>
      </div>
      <div class="panel-body">
        <div class="panorama">
          <p>
            <a href="http://www.uni-weimar.de/medien/wiki/File:Marktplatz.jpg" class="image"><img id="building_img" alt="Marktplatz.jpg" src="http://www.uni-weimar.de/medien/wiki/images/thumb/Marktplatz.jpg/1500px-Marktplatz.jpg" width="1000" height="168"></a>
          </p>
        </div>
      </div>
    </div>
​
​
    <h2 id="links"> Link Images </h2>
​
    <blockquote><pre>
[[File:Farbkreis Itten 1961.png|100px|link=Farbe]]
[[File:Farbkreis Itten 1961.png|100px|link=http://www.color.org]]</pre></blockquote>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title">Above wikicode renders as:</h3>
      </div>
      <div class="panel-body">
​
        <p><a href="http://www.uni-weimar.de/medien/wiki/Farbe" title="Farbe"><img alt="Farbkreis Itten 1961.png" src="http://www.uni-weimar.de/medien/wiki/images/thumb/Farbkreis_Itten_1961.png/100px-Farbkreis_Itten_1961.png" width="100" height="100"></a>
        <a href="http://www.color.org"><img alt="Farbkreis Itten 1961.png" src="http://www.uni-weimar.de/medien/wiki/images/thumb/Farbkreis_Itten_1961.png/100px-Farbkreis_Itten_1961.png" width="100" height="100"></a> <br></p>
​
      </div>
    </div>
​
        <p><br>
        For a detailed help see <a href="http://www.mediawiki.org/wiki/Help:Images" class="external text" rel="nofollow">the Mediawiki Help on Images</a> or read the <a href="http://en.wikipedia.org/wiki/Wikipedia:Picture_tutorial" class="extiw" title="wikipedia:Wikipedia:Picture tutorial">wikipedia:Wikipedia:Picture tutorial</a>.
        </p><br><br><br>
​
  </div>
​
​
</div>
​
​
​
</body>
​
</html>
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
YanaWangpro
0viewers