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: 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  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/imghttps://www.w3schools.com/tags/tag_img.asphttp://wiki.selfhtml.org/wiki/Referenz:HTML/img 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. 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> 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!  :-)          

MS WORD ALS EDITOR FÜR DIE BLOGENGINE VERWENDEN

Um was geht es?    Einleitung    Hintergrund    Fazit   Um was geht es? Die Software Blogendine.NET ist ein Aussenseiter gemessen an den bekannten Alternativen wie Wordpress. Einer der Vorteile ist, die Artikel können direkt mit MS Word erstellt werden. Oder mit «Open Live Writer» der OpenSource Variante von «Windows Live Writer» Einleitung Die Mehrheit der Benutzer sind .NET Entwickler. D.h. der MS Visual Studio Editor ist ohnehin ein bekanntes und täglich verwendetes Tool. Somit werden diese Benutzer die Artikel damit erstellen und publizieren. Welchen Weg gehen die anderen Benutzer? Wenn man die bekannten Suchmaschinen befragt, wird man zuerst die Hinweise auf den Windows Live Writer finden. Da die meisten Anwender ohnehin mit den Microsoft Office Produkten arbeiten, stellt sich die Frage warum nicht gleich Microsoft Word verwenden? Die DTP Fähigkeiten von Word gehen weit über MS Live Writer hinaus. Hintergrund Über eine Schnittstelle namens "metaweblog.axd" kann das realisiert werden. Nachfolgend mein Vorgehen mit MS Word 2010   Menu "Datei" Untermenü punkt "Speichern und Senden" Option "Als Blogbeitrag veröffentlichen" Klick auf den Button "Als Blogbeitrag veröffentlichen" Danach öffnet Word ein neues Dokument mit einer angepassten Menu Struktur. Im Dokument in der Kopfzeile wird ein Platzhalter für den Titel des Artikels eingeblendet. Der Klick auf "Veröffentlichen" führt auf den Dialog um ein Konto einzurichten. Den letzten Eintrag in der Liste "Andere" auswählen. API: "MetaWebLog" "Benutzername" und "Kennwort " beziehen sich auf die Blog Anmeldedaten. "URL für den Blogeintrag" ist das Verzeichnis, wo die Blogengine abgelegt wurde. Typischerweise ein Unterverzeichnis im lokal installierten IIS bzw. in der Website. Wichtig ist, den Pfad mit dem Abschluss "/metaweblog.axd" zu versehen. D.h. aus http://meineblog.ch wird dann http://meineblog.ch/metaweblog.axd" Wenn die angegebenen Daten nicht erfolgreich verarbeitet werden konnten, erhält man diese Fehlermeldung So sieht die Bestätigung aus, wenn es geklappt hat. Links oben auf "Veröffentlichen" klicken und der Artikel ist online ("geposted") Im Dokument wird der erfolgreiche Upload bestätigt.   Quellen: Blogengine:        Portal Microsoft:         Hilfe zum Bloggen in Word   Fazit Wordpress ist die mächtige Lösung, die mit diversen Plugins vieles abdeckt. Für kleinere Projekte reichen die Möglichkeiten dieses Frameworkes mehr als aus.   ELEMENT Wert Erstellt 25.02.2016 Letzte Änderung 25.02.2016 ID 000025 Kategorie   Tag   Autor Peter Gyger