Bilder einfügen: Unterschied zwischen den Versionen

Aus BS-Wiki: Wissen teilen
Wechseln zu: Navigation, Suche
 
(25 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
Zum Einfügen von Bildern in Deinen Artikel gibt es verschiedene Möglichkeiten:<br>
+
Zum Einfügen von Bildern in Deinen Artikel gibt es verschiedene Möglichkeiten:
Einfach & schnell: Bild von einer Internetseite verlinken:<br>
+
== Einfach & schnell: Bild von einer Internetseite verlinken ==
[[Kopiere]] den [[Link]] zu einer Bilddatei ''<nowiki>http://www. ... .jpg</nowiki>'' und füge diesen [[Link]] einfach in Deinen Text ein.<br>
+
[[Kopiere]] den [[Link]] zu einer Bilddatei ''<nowiki>http://www. ... .jpg</nowiki>'' und [[Kopiere|füge]] diesen [[Link]] einfach in Deinen Text ein.
Profivariante zum Hochladen eigener Bilder: [[Spezial:Upload]]<br>
+
{{kasten_blau|1=Die [http://www.google.de/imghp?hl=de&tab=wi&q= Bildersuche über Google] ist zwar hilfreich, jedoch ist das [[Urheberrecht]] zu beachten !}}
  
Sofern ein Bild als Screenshot bzw. eines Bildschirmausschnitte benötigt wird, bietet sich folgender Umweg an:
+
Tipp: Suche Deine Bilder in freien Projekten, z. B.:
 +
* [http://commons.wikimedia.org/wiki/Hauptseite Wikimedia Commons], das einen zentralen, gemeinsamen Aufbewahrungsort von freien Multimedia-Dateien für beliebige Wikimedia-Projekte zur Verfügung stellt.
 +
* [http://www.openstockphotography.org/ Open Stock Photography] mehr als 2 Mio. Bilder zur freien Verfügung!
 +
* [http://www.unitedpictures.com/index.las?lang=de United Pictures]
 +
* [http://www.flickr.com Flickr] hat ein riesiges Bilderarchiv mit vielen Bildern zur freien Verwendung
 +
 
 +
== Profivariante: eigene Bilder auf den Wiki-Server hochladen ==
 +
Dein Bild sollte max. 800 Pixel breit sein, größere Bilder machen für die Darstellung auf unseren Internetseiten keinen Sinn.
 +
 
 +
[[Spezial:Upload|Lade Dein Bild auf den Wiki-Server]].<br>
 +
Sofern ein Bild als Screenshot bzw. eines Bildschirmausschnittes benötigt wird, bietet sich folgender Umweg an:
 
*Screenshot über die Drucktaste in die Zwischenablage kopieren:<br>
 
*Screenshot über die Drucktaste in die Zwischenablage kopieren:<br>
 
http://www.powerpoint.my1step.de/images/druck_taste.jpg
 
http://www.powerpoint.my1step.de/images/druck_taste.jpg
*Zeichenprogramm starten, z.B. Photoshop oder Windows Paint<br>[[Bild:paint.jpg]]
+
*Zeichenprogramm starten, z. B. [[GIMP]], [[IrfanView]] (Freeware), Photoshop oder Windows Paint<br>[[Bild:paint.jpg]]
 
*Bildteil festlegen, ausschneiden und abspeichern.
 
*Bildteil festlegen, ausschneiden und abspeichern.
 +
Nach dem [[Spezial:Upload|Hochladen auf den Wiki-Server]] kann das Bild wie folgt in den Text eingebunden werden:<br>
 +
*[[Kopiere]] den Namen der Bilddatei, z.B. ''<nowiki>Mein_Bild.jpg</nowiki>'' und füge diesen Dateinamen in Deinen Text ein.
 +
*[[Hilfe:Text markieren|Markiere]] den Dateinamen und klicke im Bearbeitungsmenü auf den Button "Bild-Verweis" {{SERVER}}/mediawiki/skins/common/images/button_image.png .
 +
*Als programmierter Text erscheint jetzt der fertige Link: <tt><nowiki>[[Bild:Mein_Bild.jpg]]</nowiki></tt>.
  
 +
== Feintuning: Verwenden von Vorschau-Bildern  ==
 +
Es kann vorkommen, dass man Bilder in einer gewissen Größe braucht, um Details besser zu erkennen. Leider stellt sich dann oft das Problem, dass Dein Artikel unübersichtlich aussieht oder das Bild größer als der sichtbare Monitorbereich ist.
 +
[[Bild:Porsche Speedster.jpg|thumb|Vorschaubild<br />Porsche Speedster]]
 +
=== Thumbnails ===
 +
Mit "Thumbnails", also kleinen Vorschaubildern, die etwa so groß sind wie ein Daumennagel, ist dies in den Griff zu bekommen:<br>
 +
Beim Klicken auf das Vorschaubild wird dieses dann größer dargestellt.<br>
 +
Als Quelltext schreibst Du: <nowiki>[[Bild:Mein_Bild.jpg|thumb]]</nowiki>.
  
 +
Des Weiteren kann man dem Bild noch eine Bildunterschrift (Abb.) hinzufügen, dies sieht dann wie folgt aus: <nowiki>[[Bild:Mein_Bild.jpg|thumb|Bildunterschrift]]</nowiki>.
  
 +
Auch das bewusste Positionieren (rechts oder links vom Text) von Bildern ist möglich. In der Befehlszeile nach "<nowiki>thumb</nowiki>" einfach "<nowiki>|right</nowiki>" bzw. "<nowiki>|left</nowiki>" ergänzen. Ohne Angabe einer Position werden die Thumbnails rechtsbündig ausgerichtet.
  
Um Bilder leichter einzubringen habt ihr im oberen Bereich eine Hilfestellung, sofern ihr in dem Bereich „Bearbeiten“ des Artikels seid.
+
[[Bild:Porsche Speedster.jpg|thumb|100px|Mini-Porsche mit 100 Pixel]]
Als Programmierter Text sieht es wie folgt aus [[ Bild: ''Name des Bildes''.jpg ]] dies könnt ihr so nicht übernehmen da es nur zur Anschauung dient.
+
'''Bilder skalieren'''
 
 
Es kann vorkommen das man Bilder in einer gewissen Größe braucht um Details besser zu erkennen, leider stellt sich dann oft das Problem das Eurer Beitrag unübersichtlich aussieht oder das Bild größer als der Sichtbare Monitorbereich ist.
 
 
 
Um dies in den Griff zu bekommen gibt es die Möglichkeit mit einem kleinen Trick zu Arbeiten. Der Befehl ''|thumb|'' aus dem engl. Daumen, denn nur so groß erscheint jetzt das Bild. Beim klicken des ''thum''-Bildes wird dieses dann größer dargestellt. Die Programmierung sieht dann wie folgt aus '' [ [ Bild: Name des Bildes.jpg|thumb| ] ] ''
 
 
 
Des Weiteren kann man dem Bild noch einen Namen bzw. Abbildungsverzeichnis (Abb.) beifügen, dies sieht dann wie folgt aus 
 
''[ [ Bild:Name des Bildes.jpg|thumb| Name des Bildes ] ]''.
 
[[Bild:Porsche Speedster.jpg|thumb|left|Porsche Speedster''Abb.1.1.'']]
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  
 +
Sofern eine ganz bestimmte Bildbreite gewünscht wird, an beliebiger Stelle der Befehlszeile die gewünschte Breite in Pixel angeben, z. B. "<nowiki>100px</nowiki>", als komplette Zeile:
 +
<nowiki>[[Bild:Cust ride porsche blk.jpg|thumb|100px|Replica]]</nowiki>
  
 
+
<br><br><br>
 
+
'''Galerien'''
 
+
Bei mehreren Bildern in der ''thumb''-Darstellung muss man diese anordnen, sofern sie nicht untereinander stehen sollen. Dies kann man durch eine ''[[Tabellen anlegen| Tabelle]]'' lösen:
 
 
Bei mehreren Bildern in der ''thumb'' Darstellung muss man sie anordnen sofern sie nicht untereinander stehen sollen. Dies kann man durch eine ''[[Tabellen anlegen| Tabelle]]'' lösen.
 
 
 
  
 
<table border = 2 cellpadding = 5>
 
<table border = 2 cellpadding = 5>
Zeile 46: Zeile 50:
 
</table>
 
</table>
  
 +
Hier wird ein guter Rahmen erzeugt, doch leider ist die Programmierung eher schwer umzusetzen.
  
 +
=== Bilder-Galerien ===
 +
Auch mit dem Befehl <nowiki><gallery></nowiki> lassen sich Thumbnails gruppieren.
 +
Vorteil: der ''thumb''-Befehl entfällt und die Struktur ist klarer.<br>
 +
Die Programmierung sieht wie folgt aus:
 +
<nowiki><gallery>
 +
  Bild:Bild_1.jpg|Bildunterschrift 1
 +
  Bild:Bild_2.jpg|Bildunterschrift 2
 +
  Bild:Bild_3.jpg|Bildunterschrift 3
 +
</gallery></nowiki>
  
Hier wird ein guter Rahmen erzeugt, doch leider ist die Programmierung eher schwer umzusetzen. Hier können wir jetzt mit der Gallery arbeiten, der Vorteil, der ''thumb'' Befehl entfällt und die Struktur ist klarer. Die Programmierung sieht wie folgt aus:
+
Umsetzung:
 
 
 
 
 
 
''< gallery>''
 
 
 
''Bild: Name des Bildes.jpg''
 
 
 
''Bild: Name des Bildes.jpg''
 
 
 
''< /gallery>''
 
 
 
 
 
 
 
 
 
Um einen Text den Bildern zuordnen zu können wird hinter dem Bildverweis einfach Senkrechter Strich gezogen '' |''
 
 
 
 
 
 
 
 
 
''< gallery>''
 
 
 
''Bild:Name des Bildes.jpg| Abb.1.1''
 
 
 
''Bild:Name des Bildes.jpg| Abb.1.2.''
 
 
 
''< /gallery>''
 
 
 
 
 
Umgesetzt sieht es wie folgt aus:
 
 
 
 
 
 
 
 
<gallery>
 
<gallery>
 
Bild:Porsche Speedster.jpg|Porsche Speedster
 
Bild:Porsche Speedster.jpg|Porsche Speedster
Zeile 87: Zeile 69:
 
</gallery>
 
</gallery>
  
 +
Weitere Tipps findest du auf der [[Wiki_der_BBS_Winsen:Hilfe|Hilfeseite]].
 +
 +
== Weblinks ==
  
 +
[http://aktuell.de.selfhtml.org/artikel/grafik/gif-jpeg/index.htm Format GIF & JPG im Vergleich]
  
Weitere Tipps findest Du auf der [[Wiki_der_BBS_Winsen:Hilfe|Hilfeseite]].
 
 
[[Kategorie:Wiki]]
 
[[Kategorie:Wiki]]

Aktuelle Version vom 18. April 2018, 22:30 Uhr

Zum Einfügen von Bildern in Deinen Artikel gibt es verschiedene Möglichkeiten:

Einfach & schnell: Bild von einer Internetseite verlinken

Kopiere den Link zu einer Bilddatei http://www. ... .jpg und füge diesen Link einfach in Deinen Text ein.

Die Bildersuche über Google ist zwar hilfreich, jedoch ist das Urheberrecht zu beachten !

Tipp: Suche Deine Bilder in freien Projekten, z. B.:

  • Wikimedia Commons, das einen zentralen, gemeinsamen Aufbewahrungsort von freien Multimedia-Dateien für beliebige Wikimedia-Projekte zur Verfügung stellt.
  • Open Stock Photography mehr als 2 Mio. Bilder zur freien Verfügung!
  • United Pictures
  • Flickr hat ein riesiges Bilderarchiv mit vielen Bildern zur freien Verwendung

Profivariante: eigene Bilder auf den Wiki-Server hochladen

Dein Bild sollte max. 800 Pixel breit sein, größere Bilder machen für die Darstellung auf unseren Internetseiten keinen Sinn.

Lade Dein Bild auf den Wiki-Server.
Sofern ein Bild als Screenshot bzw. eines Bildschirmausschnittes benötigt wird, bietet sich folgender Umweg an:

  • Screenshot über die Drucktaste in die Zwischenablage kopieren:

druck_taste.jpg

  • Zeichenprogramm starten, z. B. GIMP, IrfanView (Freeware), Photoshop oder Windows Paint
    Paint.jpg
  • Bildteil festlegen, ausschneiden und abspeichern.

Nach dem Hochladen auf den Wiki-Server kann das Bild wie folgt in den Text eingebunden werden:

  • Kopiere den Namen der Bilddatei, z.B. Mein_Bild.jpg und füge diesen Dateinamen in Deinen Text ein.
  • Markiere den Dateinamen und klicke im Bearbeitungsmenü auf den Button "Bild-Verweis" button_image.png .
  • Als programmierter Text erscheint jetzt der fertige Link: [[Bild:Mein_Bild.jpg]].

Feintuning: Verwenden von Vorschau-Bildern

Es kann vorkommen, dass man Bilder in einer gewissen Größe braucht, um Details besser zu erkennen. Leider stellt sich dann oft das Problem, dass Dein Artikel unübersichtlich aussieht oder das Bild größer als der sichtbare Monitorbereich ist.

Vorschaubild
Porsche Speedster

Thumbnails

Mit "Thumbnails", also kleinen Vorschaubildern, die etwa so groß sind wie ein Daumennagel, ist dies in den Griff zu bekommen:
Beim Klicken auf das Vorschaubild wird dieses dann größer dargestellt.
Als Quelltext schreibst Du: [[Bild:Mein_Bild.jpg|thumb]].

Des Weiteren kann man dem Bild noch eine Bildunterschrift (Abb.) hinzufügen, dies sieht dann wie folgt aus: [[Bild:Mein_Bild.jpg|thumb|Bildunterschrift]].

Auch das bewusste Positionieren (rechts oder links vom Text) von Bildern ist möglich. In der Befehlszeile nach "thumb" einfach "|right" bzw. "|left" ergänzen. Ohne Angabe einer Position werden die Thumbnails rechtsbündig ausgerichtet.

Mini-Porsche mit 100 Pixel

Bilder skalieren

Sofern eine ganz bestimmte Bildbreite gewünscht wird, an beliebiger Stelle der Befehlszeile die gewünschte Breite in Pixel angeben, z. B. "100px", als komplette Zeile: [[Bild:Cust ride porsche blk.jpg|thumb|100px|Replica]]




Galerien Bei mehreren Bildern in der thumb-Darstellung muss man diese anordnen, sofern sie nicht untereinander stehen sollen. Dies kann man durch eine Tabelle lösen:

Porsche Speedster
Porsche 356 MOD.
Replica

Hier wird ein guter Rahmen erzeugt, doch leider ist die Programmierung eher schwer umzusetzen.

Bilder-Galerien

Auch mit dem Befehl <gallery> lassen sich Thumbnails gruppieren. Vorteil: der thumb-Befehl entfällt und die Struktur ist klarer.
Die Programmierung sieht wie folgt aus:

<gallery>
  Bild:Bild_1.jpg|Bildunterschrift 1
  Bild:Bild_2.jpg|Bildunterschrift 2
  Bild:Bild_3.jpg|Bildunterschrift 3
</gallery>

Umsetzung:

Weitere Tipps findest du auf der Hilfeseite.

Weblinks

Format GIF & JPG im Vergleich