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
  • …
 
<!DOCTYPE html>
<html>
​
<head>
​
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no" />
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
  <script src="jquery-1.7.1.min.js" type="text/javascript"></script>
​
  <title>Help:Images - Medien Wiki</title>
​
</head>
​
<body>
​
<script type="text/javascript">
    $(document).ready(function() {
        
        if( $(window).width()<600 ){
        
            $(".dh").toggle(
              function () {
                $(this).next().show();
              },
              function () {
                $(this).next().hide();
              }
            );
        
        }
 
    });
</script>
​
​
<div align="center">
    <!--header-->
    <div class="first" style="width:100%; height:36px;background:#6B6B6B;">
        <div align="center" style="width:1024px;">      
            <div class="headMenu">Webmail</div>
            <div class="headMenu">Course Catalogue</div>
            <div class="headMenu">Message Boards</div>
            <div class="headMenu">German</div>
            <div class="search">
                <form action="" method="get" id="searchbox">
                        <input type="text" value="Search Medien Wiki" maxlength="120" size="21" class="keyword"><input type="submit" class="searchbutton" value="Search">
            
                </form>                 
            </div>
            <div style="clear:both"></div>
            
        </div>
    </div>
     <div style="clear:both"></div>
    <!--cc-->
    <div align="center" class="second">
            <!--left munu-->
            <div class="menuDiv">
                <div class="menu">
                    <ul>
                        <li class="dh">STARTSEITEN</li>
                        <ul class="dhli">
                            <li><a href="http://www.uni-weimar.de/medien/wiki/Main_Page">Medien Wiki</a></li>
                            <li><a href="http://www.uni-weimar.de/medien/wiki/EKK:Start">Elektroakustische Komposition</a></li>
                            <li><a href="http://www.uni-weimar.de/medien/wiki/RADIO:Start">Experimentelles Radio</a></li>
                            <li><a href="http://www.uni-weimar.de/medien/wiki/EXPTV:Start">Experimentelle Television</a></li>
                            <li><a href="http://www.uni-weimar.de/medien/wiki/GMU:Start">Gestaltung medialer Umgebungen</a></li>
                            <li><a href="http://www.uni-weimar.de/medien/wiki/IMM:Start">Immersive Medien</a></li>
                            <li> <a href="http://www.uni-weimar.de/medien/wiki/FOTO:Start">Fotowerkstätten Medien</a></li>
                            <li> <a href="http://www.uni-weimar.de/medien/wiki/ME:Start">Medien-Ereignisse</a></li>
                            <li> <a href="http://www.uni-weimar.de/medien/wiki/MODEN:Start">Moden &amp; öffentl. Erscheinungsbilder</a></li>
                            <li> <a href="http://www.uni-weimar.de/medien/wiki/MME:Start">Multimediales Erzählen</a></li>            
                        </ul>
                        <li class="dh">WIKI</li>
                        <ul class="dhli">
                          <li><a href="http://www.uni-weimar.de/medien/wiki/Special:UserLogin?returnto=Help:Images">Log in</a></li>
                          <li><a accesskey="e" title="This page is protected.
            You can view its source [e]" href="http://www.uni-weimar.de/medien/wiki/index.php5?title=Help:Images&amp;action=edit">View source</a></li>
                          <li><a accesskey="h" title="Past revisions of this page [h]" href="http://www.uni-weimar.de/medien/wiki/index.php5?title=Help:Images&amp;action=history">History</a></li>
                          <li><a accesskey="c" title="View the help page [c]" href="http://www.uni-weimar.de/medien/wiki/Help:Images">Help</a></li>
                        </ul>
                    </ul>
            
                </div>
            </div>
            <!--right content-->
            <div  class="content" >
                <h1>Media Art & Design</h1>
                <div class="navigation">
                    <ul>
                        <li class="always-on-top"><a href="#intro">Intro</a></li>
                        <li class="always-on-top"><a href="#options">Placement Options</a></li>
                        <li class="always-on-top"><a href="#galleries">Image Galleries</a></li>
                        <li class="always-on-top"><a href="#panorama">Panorama</a></li>
                        <li class="always-on-top"><a href="#links">Link Images</a></li>                
                    </ul>                
                </div>
​
                <!--main start-->    
                <div class="main">
                
                    <h2>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>
                    <div class="p"> Read more about where to find images you may use  under <a title="Sources/Images" href="http://www.uni-weimar.de/medien/wiki/Sources/Images">Sources/Images</a>.</div>
                    
                    
                    <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 class="image" href="http://www.uni-weimar.de/medien/wiki/File:Insert_File.png"><img src="http://www.uni-weimar.de/medien/wiki/images/Insert_File.png" alt="Insert File.png" height="81" width="323"></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 title="File:Not yet existant image.png" class="new" href="http://www.uni-weimar.de/medien/wiki/index.php5?title=Special:Upload&amp;wpDestFile=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>
                    <div class="panel panel-default">
                            <div class="panel-heading">
                              <h3 class="panel-title">[[File:Pelly.jpg]] </h3>
                            </div>
                            <div class="panel-body">
                              <div class="p">
                              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.
                              </div>
                              <a class="image" href="http://www.uni-weimar.de/medien/wiki/File:Pelly.jpg"><img src="http://www.uni-weimar.de/medien/wiki/images/thumb/Pelly.jpg/400px-Pelly.jpg" alt="Pelly.jpg" height="373" width="400"></a>
                            </div>
                     </div>
                    
                    <div class="panel panel-default">
                            <div class="panel-heading">
                              <h3 class="panel-title">[[File:Pelly.jpg|250px]] </h3>
                            </div>
                            <div class="panel-body">
                              <p>
                              Scales the image to exactly 250 pixels in width
                              </p>
                              <a class="image" href="http://www.uni-weimar.de/medien/wiki/File:Pelly.jpg"><img width="250" height="233" src="http://www.uni-weimar.de/medien/wiki/images/thumb/Pelly.jpg/250px-Pelly.jpg" alt="Pelly.jpg"></a>
                            </div>
                          </div>
                    
                    
                          <div class="panel panel-default">
                            <div class="panel-heading">
                              <h3 class="panel-title">[[File:Pelly.jpg|thumb]] </h3>
                            </div>
                            <div class="panel-body">
                              <p>
                              Scales the image to thumbnail size. It will be right aligned by default.
                              </p>
                              <div class="pull-right"><div style="width:182px;">
                              <a class="image" href="http://www.uni-weimar.de/medien/wiki/File:Pelly.jpg"><img width="180" height="168" class="thumbimage" src="http://www.uni-weimar.de/medien/wiki/images/thumb/Pelly.jpg/180px-Pelly.jpg" alt="Pelly.jpg"></a>  <div><div class="magnify"><a title="Enlarge" class="internal" href="http://www.uni-weimar.de/medien/wiki/File:Pelly.jpg"><img width="15" height="11" alt="" src="http://www.uni-weimar.de/medien/wiki/skins/common/images/magnify-clip.png"></a></div></div>
                              </div></div>
                            </div>
                          </div>
                    
                          <div class="panel panel-default">
                            <div class="panel-heading">
                              <h3 class="panel-title">[[File:Pelly.jpg|thumb|Caption for the Image]] </h3>
                            </div>
                            <div class="panel-body">
                              <p>
                              Scales the image to thumbnail size. A caption is placed below the image.
                              </p>
                              <div class="pull-right"><div style="width:182px;">
                              <a class="image" href="http://www.uni-weimar.de/medien/wiki/File:Pelly.jpg"><img width="180" height="168" class="thumbimage" src="http://www.uni-weimar.de/medien/wiki/images/thumb/Pelly.jpg/180px-Pelly.jpg" alt=""></a>  <div class="thumbcaption">
                              <div class="magnify"><a title="Enlarge" class="internal" href="http://www.uni-weimar.de/medien/wiki/File:Pelly.jpg"><img width="15" height="11" alt="" src="http://www.uni-weimar.de/medien/wiki/skins/common/images/magnify-clip.png"></a></div>Caption for the Image</div></div>
                              </div>
                            </div>
                          </div>
                    
                          <div class="panel panel-default">
                            <div class="panel-heading">
                              <h3 class="panel-title">[[File:Pelly.jpg|left|thumb|Caption for the Image]] </h3>
                            </div>
                            <div class="panel-body">
                              <p>
                              Places the thumbnail on the left side. A caption is placed below the image.
                              </p>
                              <div class="pull-left"><div style="width:182px;">
                              <a class="image" href="http://www.uni-weimar.de/medien/wiki/File:Pelly.jpg"><img width="180" height="168" class="thumbimage" src="http://www.uni-weimar.de/medien/wiki/images/thumb/Pelly.jpg/180px-Pelly.jpg" alt=""></a>  <div class="thumbcaption">
                              <div class="magnify"><a title="Enlarge" class="internal" href="http://www.uni-weimar.de/medien/wiki/File:Pelly.jpg"><img width="15" height="11" alt="" src="http://www.uni-weimar.de/medien/wiki/skins/common/images/magnify-clip.png"></a></div>Caption for the Image</div>
                              </div></div>
                            </div>
                          </div>
                    
                          <div class="panel panel-default">
                            <div class="panel-heading">
                              <h3 class="panel-title">[[:File:Pelly.jpg]] </h3>
                            </div>
                            <div class="panel-body">
                              <p>
                              Displays only the link to the image's page with credits and copyright information.
                              </p>
                               <a title="File:Pelly.jpg" href="http://www.uni-weimar.de/medien/wiki/File:Pelly.jpg">File:Pelly.jpg</a>
                            </div>
                          </div>
                    
                          <div class="panel panel-default">
                            <div class="panel-heading">
                              <h3 class="panel-title">[[Media:Pelly.jpg]] </h3>
                            </div>
                            <div class="panel-body">
                              <p>
                              Provides the download link for the image.
                              </p>
                               <a title="Pelly.jpg" class="internal" href="http://www.uni-weimar.de/medien/wiki/images/Pelly.jpg">Media:Pelly.jpg</a>
                            </div>
                          </div>
                    <h2 id="galleries"> Image Galleries </h2>
                     &lt;gallery&gt;
                      File:Pelly.jpg|the caption
                      File:verfremdeterkreis.jpg|another caption
                      File:patchrotation2.jpg|yet another
                    &lt;/gallery&gt; 
                    <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" cellpadding="0" cellspacing="0"><tbody><tr>
                                <td><div style="width: 90px;" class="gallerybox">
                                      <div style="padding: 17px 0; width: 90px;" class="thumb"><div style="margin-left: auto; margin-right: auto; width: 120px;"><a class="image" href="http://www.uni-weimar.de/medien/wiki/File:Pelly.jpg"><img src="http://www.uni-weimar.de/medien/wiki/images/thumb/Pelly.jpg/120px-Pelly.jpg" alt="" height="112" width="120"></a></div></div>
                                      <div class="gallerytext">
                                <p>the caption
                                </p>
                                      </div>
                                    </div></td>
                                    <td><div style="width: 90px;" class="gallerybox">
                                      <div style="padding: 13px 0; width: 90px;" class="thumb"><div style="margin-left: auto; margin-right: auto; width: 120px;"><a class="image" href="http://www.uni-weimar.de/medien/wiki/File:Verfremdeterkreis.jpg"><img src="http://www.uni-weimar.de/medien/wiki/images/thumb/Verfremdeterkreis.jpg/117px-Verfremdeterkreis.jpg" alt="" height="120" width="117"></a></div></div>
                                      <div class="gallerytext">
                                <p>another caption
                                </p>
                                      </div>
                                    </div></td>
                                    <td>
                                      <div style="width: 90px;" class="gallerybox">
                                      <div style="padding: 13px 0; width: 90px;" class="thumb"><div style="margin-left: auto; margin-right: auto; width: 120px;"><a class="image" href="http://www.uni-weimar.de/medien/wiki/File:Patchrotation2.jpg"><img src="http://www.uni-weimar.de/medien/wiki/images/thumb/Patchrotation2.jpg/118px-Patchrotation2.jpg" alt="" height="120" width="118"></a></div>
                                      </div>
                                        <div class="gallerytext">
                                      <p>yet another</p>
                                    </div>
                                  </div>
                                  </td>
                                </tr>
                              </tbody></table>
                    
                    
                            </div>
                     </div>
                     
                     <h2 id="panorama"> Panorama </h2>
                     &lt;div class="panorama"&gt;
                      [[File:Marktplatz.jpg|1500px]]
                    &lt;/div&gt; 
                     
                     <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 class="image" href="http://www.uni-weimar.de/medien/wiki/File:Marktplatz.jpg"><img src="http://www.uni-weimar.de/medien/wiki/images/thumb/Marktplatz.jpg/1500px-Marktplatz.jpg" alt="Marktplatz.jpg" height="282" width="700"></a>
                                </p>
                              </div>
                            </div>
                     </div>
                     
                     <h2 id="links"> Link Images </h2>
                      [[File:Farbkreis Itten 1961.png|100px|link=Farbe]]
                    [[File:Farbkreis Itten 1961.png|100px|
                    link=http://www.color.org]] 
                    <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 title="Farbe" href="http://www.uni-weimar.de/medien/wiki/Farbe"><img src="http://www.uni-weimar.de/medien/wiki/images/thumb/Farbkreis_Itten_1961.png/100px-Farbkreis_Itten_1961.png" alt="Farbkreis Itten 1961.png" height="100" width="100"></a>
                              <a href="http://www.color.org"><img src="http://www.uni-weimar.de/medien/wiki/images/thumb/Farbkreis_Itten_1961.png/100px-Farbkreis_Itten_1961.png" alt="Farbkreis Itten 1961.png" height="100" width="100"></a> <br></p>
                    
                            </div>
                    </div>
                    
                    <p><br>
                              For a detailed help see <a rel="nofollow" class="external text" href="http://www.mediawiki.org/wiki/Help:Images">the Mediawiki Help on Images</a> or read the <a title="wikipedia:Wikipedia:Picture tutorial" class="extiw" href="http://en.wikipedia.org/wiki/Wikipedia:Picture_tutorial">wikipedia:Wikipedia:Picture tutorial</a>.
                    </p>
                    <br>
                    <br>
                    <br>
                </div>
                <!--main end-->
                
                
            </div>
            <div style="clear:both"></div>
    </div> 
</div> 
​
​
</body>
​
</html>
Output 300px

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

Dismiss x
public
Bin info
Yatingpro
0viewers