Bilder hochladen und verlinken

Um eigene Bilder in Kommentaren, im Forum oder im Profil verlinken zu können, ohne sie vorher auf externen Websites hochzuladen, eignet sich unsere Galerie am besten. Im folgenden Guide zeigen wir euch detailiert, wie ihr Bilder hochladen könnt und wie ihr sie anschließend korrekt verlinken könnt…

Bilder hochladen

1a. Im Profil

Es gibt zwei Ausgangspunkte, um Bilder hochzuladen, der Erste befindet sich direkt in eurem Profil, Tab “Bilder”:

1b. In der Galerie

Beginnen könnt ihr auch direkt in der Benutzergalerie. Der Link zum Userpanel befindet sich im oberen Bereich:

2. Der Userpanel

Bei eurer Anmeldung in unsere Community wurde bereits ein Album (auch Kategorie genannt) mit eurem Benutzernamen angelegt. Das Album wird erst angezeigt, wenn ihr Bilder hinzufügt. Solange es noch leer ist, ist euer Album in der Galerie nicht sichtbar. Klickt auf ‘Upload’ um in den Uploadbereich zu gelangen und Bilder hochzuladen:

3. Der Uploadbereich

Im Uploadbereich wird zuerst ein wichtiger Copyright-Hinweis angezeigt. Stellt bitte immer sicher, dass hochgeladene Bilder von euch aufgenommen wurden, oder dass sie die Rechte Dritter nicht verletzen. Anschließend könnt ihr die Entwicklung eures Uploadkontingents verfolgen. Ihr habt die Möglichkeit insgesamt 30 Bilder hochzuladen, die einzeln maximal 2 MB (2097152 byte) groß sein dürfen.

Der folgende Uploadpanel ist fast selbsterklärend, nur noch ein paar Anmerkungen dazu:

Kategorie: Dies ist euer Album und wird immer automatisch ausgewählt.
Beschreibung: Hier könnt ihr eine kurze Beschreibung eures Albums einfügen.
Veröffentlicht: Hier könnt ihr bestimmen, ob euer Album sichtbar (veröffentlicht) oder nicht sichtbar (nicht veröffentlicht) sein soll. Leere Alben sind standardmäßig nicht sichtbar in der Galerie, egal was hier eingestellt wird. Die Sichtbarkeit eines Albums könnt ihr erst ändern, wenn es Bilder enthält. Normalerweise wird diese Einstellung nicht benötigt, es sei denn, ihr wollt noch ‘unfertige’ Alben mit niemandem teilen.
Pfad zum Bild: Ihr habt hier die Möglichkeit in einem Rutsch gleich 5 Bilder hochzuladen. Wählt sie von ihrem Speicherort auf euer Festplatte aus. Als Bildtitel wird automatisch der Dateiname gewählt.
Transparente oder animierte Bilder: Um Qualitätsverluste solcher Bilder zu vermeiden, werden sie für die Detailansicht nicht zurecht geschnitten. Solche Bilder sollten nicht breiter als 700 Pixel sein, damit sie die Detailansicht nicht sprengen.
Debug Modus: Der Debug Modus ist erst wichtig, wenn Fehler beim Upload auftreten. Es ist empfehlenswert hier einen Haken zu setzen, um eine detaillierte Fehlermeldung zu bekommen. Anhand der Fehlermeldung könnt ihr den Fehler vielleicht schon selbst beheben (z.B. Verstöße gegen die Dateinamenskonvention oder Größenbeschränkung der Bilder). Wenn ihr mit der Fehlermeldung nichts anfangen könnt, dann leitet sie bitte mit einer kurzen Beschreibung des Problems an uns weiter: webmaster@wow-tiere.de

Mit einem Klick auf ‘Hochladen’ könnt ihr die ausgewählten Bilder auf unseren Server laden. Dieser Vorgang kann je nach Bildgröße und Anzahl einige Minuten dauern und sollte nicht unterbrochen werden. Ihr werdet anschließend wieder zum Userpanel umgeleitet, wo ihr eure weitere Vorgehensweise planen könnt. Klickt zum Beispiel auf ‘Upload’, wenn ihr noch mehr Bilder hochladen wollt, oder auf ‘Bild bearbeiten’, wenn ihr den Bildtitel ändern wollt, oder auf ‘Bild löschen’, wenn euch das Bild nicht mehr gefällt.

Bilder verlinken

In verschiedenen Bereichen unserer Community habt ihr die Möglichkeit Bilder zu verlinken, z.B. im Forum, in Kommentaren oder im Profil. Wenn ihr also vorher eure Bilder in die Galerie hochgeladen habt, ist es nicht mehr notwendig, sie von externen Quellen zu verlinken.

1. Das Bild aufrufen

Das Bild, das ihr verlinken wollt, könnt ihr wiederum aus zwei Quellen aufrufen.

1a. Im Profil

Das zuvor hochgeladene Bild befindet sich im Tab “Bilder” eures Profils:

1b. Im Userpanel

Ihr könnt das zuvor hochgeladene Bild auch in eurem Userpanel (“Meine Galerie”) aufrufen:

2. Bildlink finden

Klickt nun auf euer Bild, um in die sogenannte Detailansicht zu gelangen. Unter dem Bild befinden sich diverse Tabs, wie z.B. Bildinformation, Bildkommentare und weiter unten der für uns wichtige Tab “BBcode”. Wir möchten noch vorausschicken, dass im Forum und in Kommentaren BBcode verwendet wird, im ‘Über mich’ Feld eures Profils wird HTML-Code verwendet. Doch alles schön der Reihe nach, nachfolgend möchten wir euch erklären, was die zwei unterschiedlichen Links unter “BBcode” bedeuten.

Bild direkt einbinden: Das Bild wird auf der Stelle, wo dieser Code eingegeben wurde, direkt angezeigt.

Bild verlinken: Mit Hilfe dieses Codes wird ein Link zum Bild erzeugt. Das Bild wird erst sichtbar, wenn man auf den Link klickt.

3a. Bild direkt einbinden mit BBcode

Im folgenden Beispiel werden wir ein Bild in einen Kommentar einfügen (genauso geht es aber auch im Forum). Im Kommentar Textfeld ist die Eingabe von BBcode erlaubt. Klickt also unter eurem Bild in das Feld “Bild direkt einbinden”, damit wird der gesamte Code markiert. Macht nun einen Rechtsklick in das Feld und wählt “Kopieren”.

Ruft nun die Seite auf, wo ihr einen Kommentar hinterlassen wollt und fügt den Codeschnipsel an die Stelle ein, wo das Bild erscheinen soll:

Nach dem Absenden des Kommentars sieht das Ganze nun so aus:

3b. Bild direkt einbinden mit HTML-Code

Im “Über mich” Feld eures Profils ist HTML-Code erlaubt, ganz einfach nur aus dem Grund, weil es keinen BBcode-Editor für das Feld gibt. Keine Sorge, die Verlinkung eines Bildes ist hier aber nicht viel schwieriger. Der zuvor kopierte BBcode-Link muss nur geringfügig geändert werden, genauer gesagt, ihr müsst nur die [IMG]-Tags entfernen. Außerdem wird der Code nicht direkt im Text eingegeben, sondern über den Bild-Editor. Doch eins nach dem anderen und beginnen wir am Anfang…

Ruft nun die Profilverwaltung auf, indem ihr mit dem Mauszeiger über den Login-Button in der oberen Menüleiste fährt und auf “Profil bearbeiten” klickt:

Gleich auf der ersten Seite wird der Bereich dargestellt, in dem ihr die Inhalte des “Über mich”-Tabs ändern könnt. Ganz unten befindet sich der Editor, in den ihr Texte und Bilder einfügen könnt. Auch hier gilt, wie im BBcode Editor, dass das Bild an der Stelle erscheint, wo man den Bildlink eingibt. Schreiben wir nun etwas Text und fügen ein Bild ein, und zwar wie folgt:

Gibt im darauf erscheinenden Fenster unter “Adresse” den zuvor kopierten Bildlink ein und löscht die beiden [IMG]-Tags am Anfang und am Ende. Anschließend könnt ihr eine Bildbeschreibung und einen Bildtitel eingeben. Der Bildtitel erscheint, wenn man mit dem Mauszeiger über das Bild fährt. Die Bildbeschreibung dient dazu, dass auch sehbehinderte Menschen ‘erkennen’ können, was auf eurem Bild zu sehen ist, wenn sie die Bildbeschreibung von entsprechenden Programmen vorlesen lassen. So sollte das nun aussehen:

Klickt auf “Einfügen” um das Bild an der Stelle anzeigen zu lassen, wo ihr zuvor den Cursor gesetzt habt. So sieht das ganze nun im Editor aus:

Klickt nun auf “Aktualisieren” um die geänderten Inhalte zu speichern und sie in eurem Profil anzeigen zu lassen. Und so sieht das ganze im Profil aus:

Fertig! 🙂

Weiterführende Informationen

Die nachfolgenden Informationen sind für Interessierte gedacht oder für Leute, die aus dieser Funktion etwas mehr herausholen wollen.

Bildgröße und Ausrichtung verändern

Man kann einen längeren Text optisch sehr aufwerten, wenn er mit Bildern ‘unterbrochen’ wird. Dabei muss das Bild nicht sehr groß sein, um eine große Wirkung zu erzielen. Nachfolgend zeigen wir euch, wie ihr ein kleines Bild so in einen längeren Text einbinden könnt, so dass der Text es umfließen kann.

Der ‘Aussehen’ Tab im Bildeditor

Wir befinden uns nun in der Profilverwaltung, im Editor des “Über mich” Bereichs. Ich habe schon mal einen längeren Text vorbereitet. Nun fügen wir oben links ein Bild aus der Galerie ein und verändern gleichzeitig die Bildgröße und die Ausrichtung des Bildes:

Das Bild ist so im Original natürlich viel zu groß, drum rufen wir jetzt den “Aussehen”-Tab auf und ändern dies:

Wir haben nun Folgendes gemacht:

Ausrichtung: Hier könnt ihr bestimmen, wo im Text das Bild erscheinen soll. Wird hier keine Ausrichtung angegeben, erscheinen das Bild und der Text in verschiedenen Zeilen und das Bild ist automatisch linksbündig.
Ausmaße: Hier könnt ihr die Größe eines ansonsten zu großen Bildes ändern, ohne dass ihr es zuvor in einem Bildbearbeitungsprogramm verändern müsst. Die Vergrößerung eines kleinen Bildes ist nicht empfehlenswert. Die Ausgabe wird von schlechter Qualität und ‘pixelig’ sein.
Proportionen erhalten: Hier wird standardmäßig ein Haken gesetzt, damit das so verkleinerte Bild die selben Proportionen hat, wie das Original. Verändert ihr nun den ersten Wert (die Breite des Bildes) und wechselt dann mit der Tab-Taste in das Feld des nächsten Wertes, wird der zweite Wert (die Höhe) automatisch angepasst. Es funktioniert übrigens auch umgekehrt. Wenn ihr das Bild aufgrund der Höhe ausrichten wollt, dann verändert den zweiten Wert, der erste wird automatisch angepasst.
Vertikaler und Horizontaler Abstand: Hier wird der Abstand in Pixeln angeben, der zwischen Bild und Text sein soll.
Rahmen: Hier könnt ihr noch die Breite eines Rahmens um das Bild angeben, z.B. 1px für einen 1 Pixel starken Rahmen (die Farbe ist standardmäßig ‘schwarz’, lässt sich aber ändern)
CSS-Klasse: Dieses Feld könnt ihr getrost ignorieren. Es ist lediglich eine Liste der im Seitentemplate vorhandenen CSS-Klassen, fast ausnahmslos sind diese aber nicht für Bilder ausgelegt, sondern z.B. für Aufzählungszeichen, Zitatblöcke, etc.
Format: Dieses Feld muss/soll nicht geändert werden, hier werden lediglich die oben gemachten Angaben in HTML ausgegeben.

Auf “Einfügen” und “Aktualisieren” geklickt, sieht das Ganze im Profil wie folgt aus:

Weitere “Weiterführende Informationen” sind in Planung, u.a. werden wir euch demnächst eine kurze Einführung in HTML geben, euch ein paar Tricks vorstellen um Texte zu verschönern und die restlichen Buttons im HTML-Editor erklären.