Anleitung: Bilder einfügen leicht gemacht

[almafan]

Img
Die Standartfunktion zum Einfügen von Bildern ist der Img-Tag. Dabei kopiert ihr den Bildlink (ergo, das Bild muss bereits irgendwo online sein) und fügt in ins Textfeld ein. Diesen Bildlink umschließt ihr mit dem Img-Tag.

Code:

[img]http://www.bildblog.de/wp-content/bild_weiter2.gif[/img]

imgz

Als erweiterte Bildeinbettung wurde die Funktion "imgz" kreiert. "imgz" steht dabei für Image Zoom. Mit dieser Funktion ist es möglich, dass Bilder in bestimmten, vom Beitragschreiber festgelegten Größen angezeigt werden.

Der Quellcode für "imgz" sieht wie folgendermaßen aus:

Code:

[imgz {NUMBER1} {NUMBER2}]{URL}[/imgz]

Für völlige Skriptneulinge wirkt dies natürlich erst einmal ziemlich befremdlich. Auf den zweiten Blick lässt sich das alles erklären.
Wie üblich werden die BBCode-Tags, also die Funktionen, in eckigen Klammern aufgeführt. Und ebenfalls üblich wird eine Funktion mit dem "/"-Zeichen geschlossen. Die Werte innerhalb der geschweiften Klammern stehen für Platzhalter. Sie markieren Stellen, die vom Beitragschreiber ausgefüllt werden sollen. Dabei werden auch die geschweiften Klammern überschrieben. Ein Beispielcode könnte wie folgt aussehen:

Code:

[imgz 400 250]http://www.deviantart.com/bildeins.jpg[/imgz]

Der Wert NUMBER1 steht für die angezeigte Breite eines Bildes in Pixel, in diesem Falle ersetzt durch 400. Und NUMBER2 steht für die angezeigte Höhe in Pixel, hier 250. Das fiktive Bild "bildeins.jpg" würde also mit 400x250 Pixeln angezeigt werden. Es würde auf diese Größe geschrumpft oder gestreckt werden. Dabei ist es eigentlich unerheblich, von welcher Quelle dieses Bild stammt.
Die Breite und die Höhe müssen immer angegeben werden.

[almafan]

Die Funktion "imgz" (Image Zoom) hat nun eine Zusatzkomponente erhalten.

Image Zoom ist nun nicht mehr nur ein verkleinertes (bzw. vergrößertes) Bild, sondern obendrein ein Link.
Dies möchte ich am oben genannten Image Zoom-Beispiel nochmals darstellen.

Der Quellcode für "imgz" sieht wie folgendermaßen aus:

Code:

[imgz {NUMBER1} {NUMBER2}]{URL}[/imgz]

Daran hat sich nicht geändert.
Wollte man aber darin bemeinte Bild in der Orginalgröße anschauen, so musste man mit der rechten Maustaste darauf klicken und auf "Bild/Grafik anzeigen" gehen (je nach Browser). Oder aber man musste das Bild mit dem "url"-Befehl umrahmen. In etwa so:

Code:

[url={URL}][imgz {NUMBER1} {NUMBER2}]{URL}[/imgz][/url]

In dem Beispiel hätte dies so ausgesehen:

Code:

[url=http://www.deviantart.com/bildeins.jpg][imgz 400 250]http://www.deviantart.com/bildeins.jpg[/imgz][/url]

Das ist für Laien schwierig, wie ich feststellen musste. Daher wurde die Funktion "imgz" erweitert.
Sie beinhaltet nun den Zoom und die Verlinkung in einer Funktion. Ein Bild mit dem "imgz"-Tag zu umrahmen reicht nun völlig aus, um mit einem Links-Klick der Maus, die Orginalgröße der Datei anzuzeigen. Es bilden sich obendrein keine Fehler, wenn man zusätzlich einen "url"-Tag um die "imgz"-Funktion setzt.

[almafan]

Eine neue Funktion hat Eingang gefunden.
Mit der dem Tag float können jetzt Texte neben Bilder gesetzt werden. Es ist nicht mehr zwingend erforderlich, dass ein Text über oder unter einem Bild ist.

Ein Bild ohne float:
Hier ist reichlich Platz für Schreibereien, aber es kann kaum genutzt werden: Dennoch wurde ich sehr für den Detailreichtum in diesem Bild gelobt. Wohlgemerkt wegen dem unteren Teil. Das obere Bild zierte das Cover des Albums Abbey Road.

Sieht irgendwie kacke aus.

Ein Bild mit float mit dem Attribute "links"/"left":
Obwohl das Bild größer ist, besteht mehr Fläche zum Schreiben. Das liegt daran, dass direkt an der oberen Bildkante angesetzt wird. Hier sehen wir den müden Joe (im Deutschen) / Trinity (im Italienischen) wie er sich mit Wildcat Hendricks, einem berühmten Falschspieler und Revolverhelden anlegt. Die komplette Szene findet sich hier (bis das VIdeo vom Rechteinhaber gelöscht wird: https://www.youtube.com/watch?v=q12rK-M_A9U

Damit ist automatisch mehr Platz für Texte eingeräumt und das Bild fließt in den Text mit ein.







Ein Bild mit float mit dem Attribute "rechts"/"right":
Das ist ein Bild aus dem damals sehr populären Thread Nibiru, als irgendwelche Leute unreflektiert pseudowissenschaftlichen Quatsch über das Ende der Welt postuliert haben. Die braune Bahn soll die vom Wunderplaneten Nibiru darstellen, wie sie gegenläufig zum Rest unserer Planeten gedacht war. https://almafan.iphpbb3.com/forum/38899908nx49134/der-kritiker-f23/nibiru-t148.html








Und wie gestaltet man selbst solche float-Bilder?

Code:

[float {SIMPLETEXT1}]{URL}[/float]

Wie immer, ist der Tag auch als solcher über dem Textfeld zu finden, das ihr gerade bearbeitet.
URL meint, wie sonst auch, den Online-Speicherort, an dem sich das Bild befindet.
SIMPLETEXT1 bezeichnet das Freifeld in dem ihr "left" für linksbündige Bilder und "right" für rechtsbündige Bilder eingebt. Andere Worte oder die deutsche Bezeichnung gehen nicht.