Anklickbare Vorschaubilder in Beiträgen - Anleitung

Dies und das und allerlei

Moderator: Schrauber

Antworten
theylmdl
Buntbahner
Buntbahner
Beiträge: 5812
Registriert: Fr 14. Jan 2005, 01:01
Wohnort: Frankfurt a.M.
Kontaktdaten:

Anklickbare Vorschaubilder in Beiträgen - Anleitung

Beitrag von theylmdl »

Hallo!

Timme hat diese Frage gestellt:
Wie bekomme ich denn die Bilder so eingestellt, daß sie klein sind und wenn ich daraufklicke größer werden? Ich würde den ISDN-Nutzern gern die langen Ladezeiten ersparen.
Hier die Antwort.

Was wird gebraucht?
  • Etwas Geduld und guter Wille, das Forum für alle besser nutzbar zu machen.
  • Etwas mehr Zeit als beim "normalen" Verfassen der Beiträge.
  • Ein Textbearbeitungsprogramm.
  • Eventuell ein Lesezeichen im bevorzugten Browser auf diesen Beitrag - zur Erinnerung ;-) .
Die Anleitung

Diese Anleitung weicht von meinen bisherigen Ratschlägen zum Thema ab, darum verweise ich auch nicht auf diese.
  • Ladet Eure Bilder in eine Eurer Benutzer-Galerien hoch. Dazu aus dem Hauptmenü "Foto-Galerie" aufrufen und dann dem Link "meine Galerie" folgen. Habt Ihr noch keine eigenen Galerien, dann benutzt an dieser Stelle bitte den Link "Album Admin" (Album-Verwalter oder -Verwaltung) und legt Euch zunächst eine eigene, neue Galerie an.
  • Vergesst bitte nicht, dass ein Titel wie "dscn0999" sehende und blinde Besucher wie die Google-Roboter nicht unbedingt motiviert. Gut sind beim Einstellen von Bildern kurze Titel ("Steuerung 05") und Beschreibungen ("Der linke Kreuzkopf mit der Schubstange zur gekoppelten Knirschbremse") ;-) .
  • Wenn das Bild hochgeladen ist, wird es Euch angezeigt. Prüft Eure Texte. Okay so? Dann weiter im nächsten Punkt. Nicht zufrieden? Dann unten rechts "Foto bearbeiten" anclicken, die gewünschten Änderungen eintragen oder das Bild ersetzen und "Änderungen speichern" klicken.
  • Jetzt Stopp! Ihr benötigt drei URLs (Internet-Adressen) für Euren Beitrag. Die müssen nun ermittelt werden, und um sie zwischenzuspeichern, benötigt Ihr das Textbearbeitungsprogramm. Davon sind zwei ganz leicht zu haben.
    • Erstens die Bild-Adresse des Originalbilds. Firefox & Co.: Rechtsklick mit der Maus und Grafikadresse kopieren, Tastatur: Kontextmenü aufrufen. Internet Explorer: Rechtklick oder Kontextmenü aufrufen, "Eigenschaften" wählen und den Inhalt von "Adresse (URL):" kopieren (der Text lässt sich markieren und mit Strg+C kopieren). Die so gewonnene Adresse fügt Ihr im Textverarbeitungs-Programm ein.
    • Zweitens: Klickt auf das Bild (Tipp: das braucht Ihr nur zum Testen ein einziges Mal zu machen). Schwupps, seht Ihr ein von der Forums-Software automatisch erzeugtes Vorschaubild. Diese Bild hat nur eine miese Qualität, lässt aber noch gut erkennen, worum es sich dreht. Der einzige Unterschied zu der vorab von Euch kopierten Bild-Adresse ist der Unterschied, dass hinten vor der Dateinamenserweiterung noch ein "-med" dran hängt. Aus

      Code: Alles auswählen

      http://www.buntbahn.de/fotos/data/7178/75620090405-2721.jpg
      wird also zum Beispiel

      Code: Alles auswählen

      http://www.buntbahn.de/fotos/data/7178/75620090405-2721-med.jpg
      - das gilt für alle Bilder. Das braucht Ihr nicht im Texteditor einzufügen, es genügt, wenn Ihr Euch das Verfahren merkt.
    • Drittens, und nun wird es blöd. Nach dem Upload seht Ihr oben in einer dunkelblauen Leiste den Pfad zu Eurem Bild in der Galerie, zum Beispiel "Übersicht > Mitglied > theylmdl > 99021 > Bildtitel". Ruft Euer Benutzer-Album auf (hier: "99021") und sucht das Vorschaubildchen zu dem hochgeladenen Bild. Mit einem Rechtsklick oder Aufruf des Kontextmenüs kopiert Ihr diesmal nicht die Bildadresse, sondern die Link-Adresse (Firefox & Co: "Link-Adresse kopieren", Internet Explorer: "Verknüpfung kopieren"). Das fügt Ihr wieder in Eurem Textbearbeitungs-Programm ein.
  • Im Texteditor solltet Ihr nun mindestens zwei Dinge stehen haben, hier ein Beispiel:

    Code: Alles auswählen

    http://www.buntbahn.de/fotos/data/7178/75620090405-2721.jpg
    http://www.buntbahn.de/fotos/showphoto.php?photo=59740&size=big&password=&sort=7&thecat=7178
    Das erste ist der Link zum Großbild, das zweite der Link zur Galerie-Seite des Großbilds.
    Ich weiß, das klingt alles sehr kompliziert, aber in der Praxis ist es ganz einfach!
  • Wir basteln uns einen Vorschau-Link!
    Wichtig: In Eurem Profil (Hauptmenü des Forums) muss im dritten Abschnitt "BBCode immer aktivieren" angekreuzt sein, sonst wird das nichts :D .
    • In dem hier verwendeten BBCode (einer Art HTML-Pseudocode) gibt es die URL-Funktion. Die funktioniert mit Bildern genauso gut wie mit Text. Das Ziel des erzeugten Links ist nun wahlweise das Großbild alleine oder der Link darauf in der Galerie. Mit Text sähe das so aus:

      Code: Alles auswählen

      [url=http://www.buntbahn.de/fotos/data/7178/75620090405-2721.jpg]Mein prima Bild[/url]
      An Stelle des Link-Ziels könnt Ihr auch den Link aus der Galerie einfügen, also so:

      Code: Alles auswählen

      [url=http://www.buntbahn.de/fotos/showphoto.php?photo=59740&size=big&password=&sort=7&thecat=7178]Mein prima Bild[/url]
      Beachtet dabei, dass "&size=big&password=&sort=7&thecat=7178" überflüssig ist, dies tut's auch:

      Code: Alles auswählen

      [url=http://www.buntbahn.de/fotos/showphoto.php?photo=59740]Mein prima Bild[/url]
    • Damit haben wir schon 'mal den Link auf wahlweise nur das Bild (eher doof) oder die Galerieseite (schon besser, denn da werden Titel und Beschreibung ja auch angezeigt).
    • Nun ersetzen wir "Mein prima Bild" durch die Grafik-Adresse des von der Forums-Software erzeugten Vorschaubildchens:

      Code: Alles auswählen

      http://www.buntbahn.de/fotos/data/7178/75620090405-2721-med.jpg
      Das sieht zusammen dann so aus, wenn die nötigen Bild-Tags ("img" in eckigen Klammern) drum herum gesetzt werden, das zweite mit einem Schrägstrich vor "img":

      Code: Alles auswählen

      [url=http://www.buntbahn.de/fotos/showphoto.php?photo=59740][img]http://www.buntbahn.de/fotos/data/7178/75620090405-2721-med.jpg[/img][/url]
  • Das Ergebnis der Mühe:
    Bild
Ich weiß, das klingt alles schrecklich kompliziert. Wenn Ihr das aber einmal durchgekaut habt, ist es plötzlich doch einfach!

Beste Grüße,
Thomas Hey'l - info@themt.de - www * themt * de
Antworten