Peter Gyger online

"Gring ache u seckle" (Quelle: A. Weyermann)

NAVIGATION - SEARCH

Bilder über HTML direkt einbinden

Der Blog ist u.a. auch eine Tech Spielwiese, wo ich verschiedene Technologien, Techniken etc. verwende. Frei nach dem Motto "Das Bessere ist der Feind des Guten".

Eine Baustelle die seit längerem besteht, war das einbinden von Bildern aus der Microsoft Cloud "OneDrive". Letzten Sonntag war es Zeit diese Baustelle anzugehen. Das Problem das es zu lösen gilt ist, dass die einbetten (HTML) Funktion nur bei einzelnen Bildern funktioniert. "Funktioniert" meint, dass man nach aktivieren der Option "HTML-Tags einschliessen" ein fertiges Stück HTLL Code hat. Wenn es funktioniert, dann wird die Maske wie links angezeigt. Wenn es nicht klappt, erhält man die Ansicht wie auf der rechten Seite. Beide Code Snippet kann man in ein HTML Gerüst wie die Blogengine hizufügen. Leider sieht es nach dem Wechsel zur Ansicht genau so aus, wie auf dem Bild unten...

Die Microsoft Community hat nach 4 Tagen und 28 (!) Views  von einem Neumoderator (dabei seit Mai 2017) als Antwort geschrieben: "OneDrive ist nicht geeignet. Nimm Sway". Ein Arbeitskollege - Jannis Meierhofer - mit HTML Developer Skills hat das Problem innert einer Stunde gelöst. Sein Workaround ignoriert die OneDrive Funktion, er extrahiert lediglich den Link der Bilddatei in OneDrie

Nachfolgend das Vorgehen:

    1. Den Link aus dem rechten Bild nehmen und sich die Grössenangaben ("width" / "height") merken: 
      https://onedrive.live.com/embed?cid=D35806969552E806&resid=D35806969552E806%21175133&authkey=AFyJ2dYcRxAvbFA 
    2. Das Bild kann mit über diesen Link in einem Browser ("Adresszeile") angezeigt werden. Wenn man das Bild über HTML Code in einem Browser anzeigen will, nimmt das "IMG" Tag:
      https://www.w3.org/wiki/Html/Elements/img
      https://www.w3schools.com/tags/tag_img.asp
      http://wiki.selfhtml.org/wiki/Referenz:HTML/img

    3. Mit den "width" / "height" Parametern aus dem Bild oben rechts sieht der Befehl so aus:
      <img src="https://pomelq-am3pap001.files.1drv.com/y4mbgmmiU2zd2Qtbnd2tYfgbYZHcp5RowKKgQHOwQdymLlWFnL79gJWvx0XRd09DCeKExq-vvsFLUxoSGmf-TlxGgzhulB-uHKeQ1fmrfqvlNShXHrsRe5_98C0iDHJknVii-PB4jOlcbRLCTeKIPTP8BsWryaC3LQOLSZlsyRnIWEf1OalYhSPnmdd1lA_1TfwXGC-kARekctOYiW_ZmwlYA/2017-08-01%20%284%29.png?psid=1" alt="" width="98" height="120" />
      Im Browser wird das Bild klein und verzehrt dargestellt.


      Wenn man dieses Bild im Browser Edge anzeigt, wechselt der Browser nach einem Klick mit linken Maustaste in die OneDrive Ansicht.

Die Grafik ist erheblich grösser und die URL kann direkt aus der Adresszeile des Browsers kopiert werden:
https://onedrive.live.com/?authkey=%21AFyJ2dYcRxAvbFA&cid=D35806969552E806&id=D35806969552E806%21175133&parId=D35806969552E806%21175085&o=OneUp
 

Wenn man auf den Button "Original anzeigen" klickt, wird die OneDrive Menustruktur ausgeblendet. D.h. das Bild in Vollbild anzeigt. I.d.R. wird der Mauszeiger über den Bild zur Lupe und ermöglicht so das Bild zu zoomen. Über F12 kann die Entwicklungstools von Edge starten und sehe mit welchem Befehl das Bild eingebunden wurde.

  1. Wechsel zur OneDrive Ansicht in Edge
    <iframe src="https://login.live.com/login.srf?wa=wsignin1.0&amp;rpsnv=11&amp;ct=1501949983&amp;rver=6.0.5286.0&amp;wp=MBI&amp;wreply=https:%2F%2Fwww.bing.com%2Fsecure%2FPassport.aspx%3Fnocontent%3D1&amp;lc=2055&amp;id=264960&amp;checkda=1" style="display: none;"></iframe>
  2. Nach anklicken von "Original anzeigen"
    <img src="https://pomelq-am3pap001.files.1drv.com/y4mgb5wiRfjByC91gRuGxqYtK4yiyyhMQCI95-KnaE0Cn_CVzk1j-DmN-si7DaDd-tbdLDgIqxacaFXlhJHi_cxXc4karIK1LMRK2_zv2SrGsBFjNyk67CdjpqS6DcSEeFjKDPkRGY5_5Qweq6VRTcotMq-b0eDKvGlucY10gLK6usyNKqgH7056BDp9ITF8lUd6wgAyITXbqynosleCXzNqw/2017-08-01%20%284%29.png?psid=1">

Mein Kollege empfiehlt hinsichtlich der HTML5 Kompatibilität das "iframe" Statment zu meiden. Mit "IMG" ist man diesbezüglich auf der sicheren Seite. Wenn ich den Code aus Punkt 2 nun im HTML Mode nachfolgend in diesen Artikel hinzufüge, sieht das so aus:

 Das Ziel erreicht. Erste Versuche mit direkten Freigaben schlugen fehl. OneDrive zeigt mit den Link zum Bild alle freigegeben Dateien des Verzeichnisses an. Wenn ich die Freigabe für "Faceboo" nehmer, erhalte ich im Browser das Bild angezeigt. Jedoch ist die HTML Angabe für den IMP Befehl zu kryptisch. D.h. kein Erfolg.

@jannismeierhofer THX für den tollen Tip!  :-)

 

 

 

 

 

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading