Bilder nach GoogleDrive hochladen
Wie im letzten Abschnitt beschrieben, kann jede Datei in Ihrem öffentlichen Ordner über die Kombination https://öffentlicherordner/unterverzeichnis/dateiname für eine Verwendung in HTML-Befehlen herangezogen werden.
Bevor dies jedoch möglich ist, muss das Bild zunächst nach GoogleDrive hochgeladen werden. Hierfür gibt es zwei Möglichkeiten:
Schritt 5: Dateien nach GoogleDrive hochladen
- Melden Sie sich bei GoogleDrive Online mit Ihrem GoogleAccount an.
- Klicken Sie innerhalb von GoogleDrive links auf Meine Ablage und wählen Sie den Ordner an, in den Sie eine neue Datei hochladen möchten (z.B. images).
- Klicken Sie oben auf Erstellen und dann auf Dateien. (Bild)
- Wählen Sie im folgenden Auswahlbildschirm die Bilddatei aus, die Sie im Blog verwenden und anzeigen möchten. Beantworten Sie die Sicherheitsabfrage „In freigegebenen Ordner hochladen und freigeben?“, indem Sie auf Hochladen und freigeben klicken. (Bild)
- Schließen Sie nach erfolgtem Hochladen das Upload-Fenster. (Bild)
Alternatives Hochladen via GoogleDriveSync
Falls Sie in Schritt 2 das Synchronisierungsprogramm googledrivesync installiert haben, können Sie eine Datei noch einfacher hochladen.
Kopieren/Speichern Sie dazu einfach das hochzuladende Bild in den gewünschten Zielordner (z.B. Google Drive / Public / images) auf Ihrer Festplatte. Das Synchronisierungsprogramm wird sofort im Hintergrund damit beginnen, die Datei in das gleiche Verzeichnis nach GoogleDrive Online zu kopieren. Nach wenigen Sekunden steht das Bild online für eine Blog-Einbindung zur Verfügung.
Bilder manuell im Blog einbinden (ohne Scriptunterstützung)
Haben Sie ein Bild erfolgreich über eine der o.g. Methoden hochgeladen, können Sie es sofort in Ihrem Blog nutzen. Fügen Sie einfach die vollständige Linkadresse bestehend aus öffentlicher Ordner (z.B. https://googledrive.com/host/0B87rILWxyzIJTkpNZXF4VlNxyz/), dem Unterverzeichnis (z.B. images) und dem Dateinamen (z.B. meinbild.jpg) in den Image-Befehl ein:
<img src="https://googledrive.com/host/0B87rILWxyzIJTkpNZXF4VlNxyz/images/meinbild.jpg" alt="Mein Bild" width="720" height="300" />
Ziemlich einfach — wenn da nicht diese lange Adresse des öffentlichen GoogleDrive-Ordners wäre, die sich garantiert niemand merken kann. Man kann sich diesen kryptischen Link z.B. jedes Mal aus einer vorbereiteten Textdatei kopieren, die sich schnell erreichbar auf dem Desktop befindet. Noch eleganter ist jedoch die Nutzung eines kleinen Scripts, das ich nachfolgend vorstelle.
Verlinkung von Bildern mit Scriptunterstützung
Das Script gdimages wird durch den Browser bei jeder Aufbereitung einer Blogseite ausgeführt und vervollständigt die Bildadresse in jedem Image-Befehl, der sich auf ein GoogleDrive-Bild bezieht. Hierdurch wird ein Image-Befehl sehr viel übersichtlicher, da Sie nur noch den Dateinamen im alt-Parameter angeben müssen. Damit das Script weiß, welche Image-Befehle es vervollständigen muss, geben Sie diesen IMG-Befehlen eine Klasse googledrive mit:
<img class="googledrive" alt="meinbild.jpg" />
Um das Script einmalig in Ihr Blog zu integrieren, führen Sie folgende Schritte durch:
Schritt 6: jQuery aktivieren (einmalig)
- Aktivieren Sie das Standard-Twoday-Modul jQuery. Klicken Sie dazu nach Ihrer Anmeldung bei Twoday oben im Menü auf Admin → Module → Extension Module.
- Klicken Sie ganz unten auf der Seite neben JQuery Integration auf Einstellungen (Bild), wählen Sie Ja aus und Sichern Sie Ihre Einstellung (Bild).
Schritt 7: Hilfsscript aktivieren (einmalig)
Einbindung von GoogleDrive-Bildern mit aktiviertem Hilfsscript
Da Sie Ihren öffentlichen Ordner und das Bildunterverzeichnis einmalig dem Script bekannt gemacht haben, brauchen Sie diese Informationen nun nicht mehr beim einzelnen Bild aufzuführen.
Beispiel 1: Um ein Bild wald.jpg aus dem Ordner images in einem Beitrag anzuzeigen, schreiben Sie folgenden IMG-Befehl:
<img class="googledrive" alt="wald.jpg" />
Beispiel 2: Wenn Sie in Ihrem Bilderverzeichnis images zur besseren Organisation weitere Unterverzeichnisse angelegt haben (z.B. urlaub für Urlaubsbilder), so können Sie Bilder aus diesen Teilverzeichnissen folgendermaßen anzeigen:
<img class="googledrive" alt="urlaub/strand.jpg" />
Wichtig ist, dass Sie den Bildnamen für GoogleDrive-Bilder stets im alt-Parameter übergeben, nicht wie üblich im src-Parameter!
Würde der Bildname im src-Parameter übergeben, würde der Browser bereits versuchen, dieses zu laden, obwohl die korrekte Adresse noch nicht vervollständigt wurde. Damit würde unnötig Ladezeit verbraucht.
Selbstverständlich stehen Ihnen weiterhin alle anderen bekannten Bildparameter zur Verfügung, z.B. width (Breite), height (Höhe) oder title (Titel).
Beispiel 3: In Ihrem images-Verzeichnis existiert ein weiteres Unterverzeichnis buchcover, das unter anderem ein Bild argo.jpg enthält. Dieses soll in der Größe 40 x 62 (BxH) Pixel angezeigt werden.
<img class="googledrive" alt="buchcover/argo.jpg" width="40" height="62" />
Weiterführende Referenzen
- Google Drive Hilfe (deutsch)
- Google Drive Blog (englisch)
- gdimages Quellcode (unkomprimiert)
© 2014 NeonWilderness — gdimages ist OpenSource und lizensiert unter MIT.