ANLEITUNG: Bilder hochladen (Beispiel Google Drive)

#1
Photo 
Nun wird ja immer wieder Mal gekräht, dass "das mit den Bildern" nicht so funktioniert, wie man sich das eigentlich denkt. Daher mal eine Erklärung, warum und eine ganz kleine Anleitung, wie man Bilder in diesem Forum zeigen kann, ohne eine Maximalgröße beachten zu müssen oder sich auf Hosts verlassen zu müssen, die die Bilder wegen zu seltenem Zugriff oder einfach nach so und so vielen Jahren eventuell irgendwann löschen. Für den Inhalt eurer Clouds seid ihr selbst verantwortlich. Das heißt, ihr bestimmt, welche Bilder gelöscht werden und welche nicht.

Wen das hier alles nicht interessiert, der möge doch einfach bis zur eigentlichen Schritt-für-Schritt-Anleitung "Wie geht's?" nach unten scrollen.

Die Anleitung gilt speziell für Windows, Google Chrome und Google Drive. Alle anderen (Mac OS, Safari, MS Edge, iCloud, Dropbox,... ich könnte niemals alle nennen) funktionieren grundlegend gleich, aber im Detail doch eben anders.
Ich versuche es so zu schreiben, dass es auch jeder noch so computeraversive Mensch hinkriegen müsste.


Was ist Google Drive?
Für den Endanwender (uns) ist es prinzipiell ein Stückchen Festplatte, die nicht "in" unserem PC/Laptop steckt, sondern irgendwo am Arsch der Welt in einem Serverraum am Netz von Google hängt. Dasselbe Prinzip nutzt auch Dropbox und Apple mit seiner iCloud. Daher nenne ich es jetzt einfach "Cloud", um es allgemein zu halten.
Für euch Datenschutzliebhaber: Ja... Der Host (Google, Apple, Dropbox,...) hat auf die Daten Zugriff - inkl. Metadaten und allem Pipapo. Aber ganz ehrlich - juckt euch das bei einem Bild von eurer neuen Schweißnaht? Wenn ja, dann lest einfach nicht weiter...


Zugriff für andere?
Für jede (!) Datei, die in eurer Cloud gespeichert ist, wird automatisch ein kryptischer, eineindeutiger Link erzeugt. Den Zugriff auf die Datei haben alle, die diesen Link kennen. (Das ist so nicht ganz korrekt, aber bis hier her reicht das).
Mit anderen Worten: Wenn hier im Forum ein Bild eingefügt werden soll, muss das Forum diesen Link kennen.

Was ist der Vorteil davon?
Dezentralisierung. Klar - dieses Forum hier hat nicht den mega Traffic wie andere Foren es vielleicht haben. Aber stellen wir uns doch mal theoretisch vor, Cagiva kommt 2019 mit der affengeilsten Kiste zurück, die man für Geld kaufen kann. Jetzt kommen auf einmal 6000 neue Mitglieder dazu und jeder zeigt hier ein Bild von seiner Maschine, sich selbst und vielleicht seiner Garage. Knips knips mit dem Handy, das geht ja heute ganz fix. Handykamera hat 20 Megapixel - geil, alles schön scharf und tolle Bilder.
Jo... die sind aber jeweils 15 MB groß. Kurze Überschlagsrechnung: 6000 Mitglieder * 3 Bilder * 15 MB = 270 GB.

1. Der ganze Müll darf dann auf dem Server vom Forum gespeichert werden. -> Speicherplatz
2a. Deutschland hat eine Kupfer-Internet-Infrastruktur, die geradezu lächerliche Datenraten im Vergleich zu Asien hat. Das muss also erstmal auf den Server übertragen werden. -> Datenrate
2b. Jetzt ruft einer die Seite auf und möchte sie natürlich auch möglichst schnell angezeigt bekommen. Dann muss jedes Bild auf der Seite also auch wieder durch die Leitung vom Server zum Benutzer gesendet werden.
2c. Wenn nun mehrere Leute gleichzeitig zugreifen, wird die Datenrate sogar aufgeteilt.

Für riesige Unternehmen wie Google, Facebook, amazon und wie sie alle heißen: scheißegal! Würde mich direkt mal interessieren, was die für Datenraten rein und raus an einer Serverfarm haben. Keine Ahnung.
Ich kenne Pogmohon nicht, aber gehe mal davon aus, dass der Server privat betrieben wird und somit an der privaten Leitung hängt (man korrigiere mich, falls das nicht stimmt), die - Stand 2018 - allerhöchstens 100 MBit/s rausbringt. Folgendes ist also nur eine erklärende Beispielrechnung.
Code:
1 Byte = 8 Bit -> 100 MBit/s = 12.5 MB/s
Ein Bild braucht bei idealen Bedingungen für Server und Benutzer eine ganze Sekunde für die Übertragung.

Nun zum eigentlichen Clou: Verlinkte Bilder sind für den Server gar kein Thema! Beim Abruf gibt er einfach nur den Link durch und der Browser des Benutzers kümmert sich um den Einbau ins Gesamtbild. Die einzige Information, die also gespeichert werden muss, ist der kryptische Link. Das ist vielleicht im Extremfall mal 1 kB, also ein Zehntausendstel (!) eines Bildes an Speicherplatz.


Wie geht's?
Der Ablauf ist Stand September 2018, kann sich daher immer Mal in Details ändern.
Wichtig: oftmals funktionieren solche JavaScript-Dinger, die über simples HTML und CSS hinaus gehen, gern mal nur mit bestimmten Browsern (gerade Drag&Drop, Rechtsklicks abfangen etc.).
Ich verwende momentan Google Chrome 68.

(0.) Zuerst einmal braucht es einen Google Account. Jeder, der ein Android Smartphone hat, hat auch schon einen Google Account. Wenn nicht, muss eben einer erstellt werden.
Bei Google anmelden.

  1. Auf diesen Link klicken und dafür ein neues Lesezeichen anlegen (Begründung kommt noch)
  2. Google Drive öffnen
  3. Oben links auf "Meine Ablage" klicken.
  4. Neuen Ordner anlegen 'Cagiva Forum' oder wie auch immer ihr wollt.
  5. Doppelklick auf den Ordner.
  6. Explorer öffnen (Windows-Taste + E)
  7. Zum Bild auf eurem PC navigieren
  8. Drag & Drop (also anklicken und mit der Maus ziehen) vom Explorer in den Google Drive Ordner.
  9. Rechtsklick auf das fertig hochgeladene Bild und "Link zum Freigeben abrufen" wählen.

    Toll. Jetzt ist das Bild schonmal da, wo es für den Gebrauch im Forum sein sollte. Jetzt vorbereiten zum Einbetten in einen Forumsbeitrag.

  10. Jetzt wird's leider etwas umständlich, da die Forensoftware das Bild nicht automatisch aus dem JavaScript WebViewer ziehen kann. Wenn man das aber drei-, viermal gemacht hat ist es simpel.

    So ein Share-Link sieht folgendermaßen aus:
    https://drive. google.com/open?id=abc123_def456ghi789jkl123mno
    Für uns ist nur der letzte Abschnitt - die 'ID' - wichtig, also alles nach dem Gleichheitszeichen.
    Den Abschnitt abc123_def456ghi789jkl123mno markieren und kopieren.

  11. Nun kommt das Lesezeichen ins Spiel: Öffnet es und es dürfte eine Fehlermeldung '400' kommen. Ans Ende der Adresse fügen wir nun aber die ID an. Jetzt nicht Enter drücken, sondern die neu zusammengesetzte Adresse markieren und kopieren
    (Ein anschließendes, testweises Enter lädt einfach nur das Bild, allerdings von einem Content Server mit Anmeldung, dessen Follow-up-Adresse mit doc-??-irgendwas losgeht. Diesen Link NICHT kopieren!)

    Das ganze sollte nun so aussehen:

    https://drive. google.com/uc?export=open&id=abc123_def456ghi789jkl123mno
    Der Link hat also endlich die richtige Form. Zurück zum Forum.

  12. Beim Erstellen des Beitrags ist in der Leiste direkt überm Textfeld relativ mittig ein Foto mit einem +. Draufklicken. Rechtsklick in das Feld "URL" und den Link "Einfügen".
  13. (und bitte nicht einfach überspringen, nur weil da "optional" steht) Das Bild auf eine sinnvolle Größe reduzieren. Nicht jeder hat einen 4K-Bildschirm, der riesige Fotos schön skaliert einpasst. Ein gutes Format für standardmäßige 4:3-Bilder wären 800 x 600 Pixel oder 1024 x 768. Wenn man diesen Schritt mit 20 Megapixel großen Bildern einfach überspringt, sieht man dann beim öffnen des Beitrags zwar wunderschön die obere linke Ecke des Bildes, darf dann aber in alle möglichen Richtungen scrollen, um was zu erkennen. Ersparen wir uns das.


Bitte bei Problemen, Aktualisierungen oder Verbesserungsvorschlägen nicht zögern. Einfach melden, ich würde dann diesen Text anpassen.





[Bild: uc?export=open&id=1cUHyk5Rl-abon-1kOA1yEHWmtBlx0UgC]

[Bild: uc?export=open&id=1j48IFBRg7zUav4JQyOXQMsKuNeYVc3no]
  Zitieren

#2
Moin Axel, 
besten Dank für Deine ausfühliche Beschreibung , ich werd mich am WE. dran setzen, das muss doch zu schaffen sein  Cool.

Beste Grüße aus Korschenbroich 

Matthias
  Zitieren

#3
(21.09.2018, 01:15)Æxel schrieb: Nun wird ja immer wieder Mal gekräht, dass "das mit den Bildern" nicht so funktioniert, wie man sich das eigentlich denkt. Daher mal eine Erklärung, warum und eine ganz kleine Anleitung, wie man Bilder in diesem Forum zeigen kann, ohne eine Maximalgröße beachten zu müssen oder sich auf Hosts verlassen zu müssen, die die Bilder wegen zu seltenem Zugriff oder einfach nach so und so vielen Jahren eventuell irgendwann löschen. Für den Inhalt eurer Clouds seid ihr selbst verantwortlich. Das heißt, ihr bestimmt, welche Bilder gelöscht werden und welche nicht.

Wen das hier alles nicht interessiert, der möge doch einfach bis zur eigentlichen Schritt-für-Schritt-Anleitung "Wie geht's?" nach unten scrollen.

Die Anleitung gilt speziell für Windows, Google Chrome und Google Drive. Alle anderen (Mac OS, Safari, MS Edge, iCloud, Dropbox,... ich könnte niemals alle nennen) funktionieren grundlegend gleich, aber im Detail doch eben anders.
Ich versuche es so zu schreiben, dass es auch jeder noch so computeraversive Mensch hinkriegen müsste.


Was ist Google Drive?
Für den Endanwender (uns) ist es prinzipiell ein Stückchen Festplatte, die nicht "in" unserem PC/Laptop steckt, sondern irgendwo am Arsch der Welt in einem Serverraum am Netz von Google hängt. Dasselbe Prinzip nutzt auch Dropbox und Apple mit seiner iCloud. Daher nenne ich es jetzt einfach "Cloud", um es allgemein zu halten.
Für euch Datenschutzliebhaber: Ja... Der Host (Google, Apple, Dropbox,...) hat auf die Daten Zugriff - inkl. Metadaten und allem Pipapo. Aber ganz ehrlich - juckt euch das bei einem Bild von eurer neuen Schweißnaht? Wenn ja, dann lest einfach nicht weiter...


Zugriff für andere?
Für jede (!) Datei, die in eurer Cloud gespeichert ist, wird automatisch ein kryptischer, eineindeutiger Link erzeugt. Den Zugriff auf die Datei haben alle, die diesen Link kennen. (Das ist so nicht ganz korrekt, aber bis hier her reicht das).
Mit anderen Worten: Wenn hier im Forum ein Bild eingefügt werden soll, muss das Forum diesen Link kennen.

Was ist der Vorteil davon?
Dezentralisierung. Klar - dieses Forum hier hat nicht den mega Traffic wie andere Foren es vielleicht haben. Aber stellen wir uns doch mal theoretisch vor, Cagiva kommt 2019 mit der affengeilsten Kiste zurück, die man für Geld kaufen kann. Jetzt kommen auf einmal 6000 neue Mitglieder dazu und jeder zeigt hier ein Bild von seiner Maschine, sich selbst und vielleicht seiner Garage. Knips knips mit dem Handy, das geht ja heute ganz fix. Handykamera hat 20 Megapixel - geil, alles schön scharf und tolle Bilder.
Jo... die sind aber jeweils 15 MB groß. Kurze Überschlagsrechnung: 6000 Mitglieder * 3 Bilder * 15 MB = 270 GB.

1. Der ganze Müll darf dann auf dem Server vom Forum gespeichert werden. -> Speicherplatz
2a. Deutschland hat eine Kupfer-Internet-Infrastruktur, die geradezu lächerliche Datenraten im Vergleich zu Asien hat. Das muss also erstmal auf den Server übertragen werden. -> Datenrate
2b. Jetzt ruft einer die Seite auf und möchte sie natürlich auch möglichst schnell angezeigt bekommen. Dann muss jedes Bild auf der Seite also auch wieder durch die Leitung vom Server zum Benutzer gesendet werden.
2c. Wenn nun mehrere Leute gleichzeitig zugreifen, wird die Datenrate sogar aufgeteilt.

Für riesige Unternehmen wie Google, Facebook, amazon und wie sie alle heißen: scheißegal! Würde mich direkt mal interessieren, was die für Datenraten rein und raus an einer Serverfarm haben. Keine Ahnung.
Ich kenne Pogmohon nicht, aber gehe mal davon aus, dass der Server privat betrieben wird und somit an der privaten Leitung hängt (man korrigiere mich, falls das nicht stimmt), die - Stand 2018 - allerhöchstens 100 MBit/s rausbringt. Folgendes ist also nur eine erklärende Beispielrechnung.
Code:
1 Byte = 8 Bit -> 100 MBit/s = 12.5 MB/s
Ein Bild braucht bei idealen Bedingungen für Server und Benutzer eine ganze Sekunde für die Übertragung.

Nun zum eigentlichen Clou: Verlinkte Bilder sind für den Server gar kein Thema! Beim Abruf gibt er einfach nur den Link durch und der Browser des Benutzers kümmert sich um den Einbau ins Gesamtbild. Die einzige Information, die also gespeichert werden muss, ist der kryptische Link. Das ist vielleicht im Extremfall mal 1 kB, also ein Zehntausendstel (!) eines Bildes an Speicherplatz.


Wie geht's?
Der Ablauf ist Stand September 2018, kann sich daher immer Mal in Details ändern.
Wichtig: oftmals funktionieren solche JavaScript-Dinger, die über simples HTML und CSS hinaus gehen, gern mal nur mit bestimmten Browsern (gerade Drag&Drop, Rechtsklicks abfangen etc.).
Ich verwende momentan Google Chrome 68.

(0.) Zuerst einmal braucht es einen Google Account. Jeder, der ein Android Smartphone hat, hat auch schon einen Google Account. Wenn nicht, muss eben einer erstellt werden.
Bei Google anmelden.

  1. Auf diesen Link klicken und dafür ein neues Lesezeichen anlegen (Begründung kommt noch)
  2. Google Drive öffnen
  3. Oben links auf "Meine Ablage" klicken.
  4. Neuen Ordner anlegen 'Cagiva Forum' oder wie auch immer ihr wollt.
  5. Doppelklick auf den Ordner.
  6. Explorer öffnen (Windows-Taste + E)
  7. Zum Bild auf eurem PC navigieren
  8. Drag & Drop (also anklicken und mit der Maus ziehen) vom Explorer in den Google Drive Ordner.
  9. Rechtsklick auf das fertig hochgeladene Bild und "Link zum Freigeben abrufen" wählen.

    Toll. Jetzt ist das Bild schonmal da, wo es für den Gebrauch im Forum sein sollte. Jetzt vorbereiten zum Einbetten in einen Forumsbeitrag.

  10. Jetzt wird's leider etwas umständlich, da die Forensoftware das Bild nicht automatisch aus dem JavaScript WebViewer ziehen kann. Wenn man das aber drei-, viermal gemacht hat ist es simpel.

    So ein Share-Link sieht folgendermaßen aus:
    https://drive. google.com/open?id=abc123_def456ghi789jkl123mno
    Für uns ist nur der letzte Abschnitt - die 'ID' - wichtig, also alles nach dem Gleichheitszeichen.
    Den Abschnitt abc123_def456ghi789jkl123mno markieren und kopieren.

  11. Nun kommt das Lesezeichen ins Spiel: Öffnet es und es dürfte eine Fehlermeldung '400' kommen. Ans Ende der Adresse fügen wir nun aber die ID an. Jetzt nicht Enter drücken, sondern die neu zusammengesetzte Adresse markieren und kopieren
    (Ein anschließendes, testweises Enter lädt einfach nur das Bild, allerdings von einem Content Server mit Anmeldung, dessen Follow-up-Adresse mit doc-??-irgendwas losgeht. Diesen Link NICHT kopieren!)

    Das ganze sollte nun so aussehen:

    https://drive. google.com/uc?export=open&id=abc123_def456ghi789jkl123mno
    Der Link hat also endlich die richtige Form. Zurück zum Forum.

  12. Beim Erstellen des Beitrags ist in der Leiste direkt überm Textfeld relativ mittig ein Foto mit einem +. Draufklicken. Rechtsklick in das Feld "URL" und den Link "Einfügen".
  13. (und bitte nicht einfach überspringen, nur weil da "optional" steht) Das Bild auf eine sinnvolle Größe reduzieren. Nicht jeder hat einen 4K-Bildschirm, der riesige Fotos schön skaliert einpasst. Ein gutes Format für standardmäßige 4:3-Bilder wären 800 x 600 Pixel oder 1024 x 768. Wenn man diesen Schritt mit 20 Megapixel großen Bildern einfach überspringt, sieht man dann beim öffnen des Beitrags zwar wunderschön die obere linke Ecke des Bildes, darf dann aber in alle möglichen Richtungen scrollen, um was zu erkennen. Ersparen wir uns das.


Bitte bei Problemen, Aktualisierungen oder Verbesserungsvorschlägen nicht zögern. Einfach melden, ich würde dann diesen Text anpassen.





[Bild: uc?export=open&id=1cUHyk5Rl-abon-1kOA1yEHWmtBlx0UgC]

[Bild: uc?export=open&id=1j48IFBRg7zUav4JQyOXQMsKuNeYVc3no]
Prima, sehr gut erklärt !
  Zitieren



Gehe zu:


Benutzer, die gerade dieses Thema anschauen:
1 Gast/Gäste

User Panel

Welcome guest, not a member yet?

Why not sign up today and start posting on out community forums.


  Register

Navigation


Latest Topics

Forum software by © MyBB Theme © iAndrew 2016