Problem dabei: Durch die langsame Netzwerkverbindung war das submit noch nicht fertig als das Fenster geschlossen wurde, so dass in manchen F\u00e4llen die Bilder nicht hochgeladen wurden.<\/p>\n
Aufgrund dessen, habe ich erst einmal die beiden letzen Befehle ausgebaut.
\nTja, dann lief zwar der Bilderupload, aber bei gr\u00f6\u00dferen Bildern (>60K) musste man schon so seine 2-3 Sekunden warten, bis das Bild dann endlich angezeigt wurde.
\nDa das eher unbefriedigend ist und ein Benutzer dann eher doppelt und dreifach klickt wenn nichts passiert, habe ich \u00fcberlegt ein Ladefenster nach dem Web2.0-Gedanken einzublenden. Aber wie machen? Scriptaculous, Prototype und Modalbox f\u00fcr solch ein simples Fenster zu installieren, einzurichten, mich darin einzuarbeiten und es auszuprogrammieren war mir dann doch etwas zu aufw\u00e4ndig. Also habe ich ein wenig gegoogelt, einige meiner Kenntnisse aufgefrischt und entstanden ist dieses Tutorial:<\/p>\n
Bevor wir anfangen sollten wir ein schickes Lade-Fenster entwerfen. Dazu einen Bild-Editor wie Gimp, Photoshop, Paint Shop Pro, Artweaver oder was auch immer \u00f6ffnen. Damit das Fenster nicht zu gro\u00df wird, erstellen wir ein Bild mit 200 x 80 Pixeln. Das sollte eigentlich f\u00fcr unsere Zwecke reichen. F\u00fcr die Erstellung des Bildes nutze ich Artweaver. Das ist kostenlos und kann sogar auf einem USB-Stick installiert und somit \u00fcberall mitgenommen werden. Au\u00dferdem ist es f\u00fcr Photoshop-Kenner genauso zu bedienen, auch wenn viele Funktionen fehlen. Aber f\u00fcr unsere Zwecke reichts.
\nWie schon gesagt, wir erstellen erst mal ein 200 x 80 gro\u00dfes Bild. Der Hintergrund ist egal<\/p>\n
\u00dcber File->New bzw. Datei->Neu wird ein neues Bild angelegt:<\/p>\n
![\"\"](\"http:\/\/devblog.cssec.de\/wp-content\/uploads\/2018\/11\/loadingscreen_neuesbild-300x202.png\")
<\/p>\n
Nun markieren wir mit dem Auswahl-Symbol: ![\"\"](\"http:\/\/devblog.cssec.de\/wp-content\/uploads\/2018\/11\/loadingscreen_auswahlicon.png\")
die ersten ca 20 Pixel auf der gesamten Breite. ( Bei mir sind es glaube ich 21 Pixel geworden, aber das ist irrelevant). Besonders gute weiche Bilder lassen sich durch Einstellen von Feather und dem eingeschalteten Anti-Aliasing erreichen.<\/p>\n
Nun w\u00e4hlen wir das Verlauf-Symbol und die passenden Verlauf-Farben f\u00fcr Vorder- und Hintergrund. Da mein zu entwickelnder Webshop als Basisfarbe verschieden Graut\u00f6ne besitzt, habe ich einen mittleren Grauton f\u00fcr die Hintergrund und einen etwas helleren Grauton als Vordergrund genutzt.
\nDen Verlauf von oben nach unten zeichnen und es d\u00fcrfte sich ein Bild \u00e4hnlich wie dieses ergeben:<\/p>\n
![\"\"](\"http:\/\/devblog.cssec.de\/wp-content\/uploads\/2018\/11\/loadingscreen_auswahl-300x158.png\")
<\/p>\n
Nun mit Ctrl+Shift+I die Auswahl invertieren, die Farben heller machen und dann noch einmal den Verlauf von unten nach oben (oder auch von oben nach unten, wie es beliebt) durchf\u00fchren.<\/p>\n
Als Ergebnis erh\u00e4lt man dann einen Bildschirm, der zwar nicht nach Hightec aber immerhin auch nicht so schlimm aussieht:<\/p>\n
![\"\"](\"http:\/\/devblog.cssec.de\/wp-content\/uploads\/2018\/11\/loadingbackground.png\")
<\/p>\n
<\/p>\n
Ggf. kann man den Bildschirm noch umrahmen, aber das k\u00f6nnen wir auch direkt in der Webseite machen.<\/p>\n
Mit dem so vorbereiteten Bildschirm schauen wir erst mal unser Formular an. Das Formular wird in ein PHP-Script eingebettet, entweder mit einer Template-Engine oder in unserem simplen Fall direkt ausgegeben.
\nWir speichern das Script als bildUpload.php ab und k\u00f6nnen es anschlie\u00dfend auch schon mal aufrufen.<\/p>\n
\r\n\u00a0\r\n\u00a0\u00a0\u00a0Test-Formular\u00a0zum\u00a0Bilder-Upload<\/title>\r\n\u00a0<\/head>\r\n\u00a0<body>\r\n\u00a0\u00a0\u00a0\u00a0<form\u00a0action=\"bildUpload.php\"\u00a0method=\"POST\"\u00a0enctype=\"multipart\/form-data\"\u00a0style=\"width:\u00a0500px;\u00a0border:\u00a01px\u00a0solid\u00a0black;\u00a0height:\u00a0400px;\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<p><img\u00a0src=\"getImage.php\"\u00a0style=\"max-height:\u00a0300px;\u00a0max-width:\u00a03000px\"><\/p>\u00a0<!--\u00a0Das\u00a0Bild\u00a0wird\u00a0dynamisch\u00a0\u00fcber\u00a0PHP\u00a0geladen\u00a0-->\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input\u00a0type=\"file\"\u00a0id=\"uploadBild\"\u00a0name=\"uploadBild\"\u00a0accept=\"images\/*\"\u00a0>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<input\u00a0type=\"submit\"\u00a0id=\"submitButton\"\u00a0name=\"submitButton\"\u00a0value=\"Bild\u00a0hochladen\"\u00a0\/>\r\n\u00a0\u00a0\u00a0\u00a0<\/form>\r\n\u00a0<\/body>\r\n<\/html>';?><\/pre>\n<p>Hm, nat\u00fcrlich fehlt die Verarbeitung und das Script getTestImage.php haben wir auch noch nicht geschrieben. Die<br \/>\nDarstellung des Bildes kommt sp\u00e4ter.<br \/>\nFangen wir mal mit der Verarbeitung an. F\u00fcr das Tutorial speichere ich das Bild erst mal nur in der Session ab. Prinzipiell sollte man Bilder aber lieber auf dem Dateisystem oder in der Datenbank speichern. Um die Logik einfach zu halten, mache ich es aber trotzdem:<\/p>\n<p>Dazu legen wir als erstes eine Klasse an, in der unsere Bilddaten gespeichert werden kann.<\/p>\n<pre lang=\"php\"><?php\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\/\/wir\u00a0legen\u00a0mal\u00a0eine\u00a0Klasse\u00a0an,\u00a0die\u00a0uns\u00a0alle\u00a0Bild-Informationen\u00a0kompakt\u00a0in\u00a0einem\u00a0Objekt\u00a0speichert\r\n\u00a0\u00a0\u00a0class\u00a0Bild\r\n\u00a0\u00a0\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/**\u00a0Name\u00a0des\u00a0Bildes,\u00a0den\u00a0k\u00f6nnen\u00a0wir\u00a0dann\u00a0beim\u00a0Auslesen\u00a0ggf.\u00a0mitgeben*\/\r\n\t\u00a0\u00a0public\u00a0$name;\r\n\t\u00a0\u00a0\r\n\t\u00a0\u00a0\/**\u00a0Content-Type\u00a0des\u00a0Bildes*\/\r\n\t\u00a0\u00a0public\u00a0$contentType;\r\n\t\u00a0\u00a0\r\n\t\u00a0\u00a0\/**\u00a0Inhalt\u00a0des\u00a0Bildes\u00a0als\u00a0Bin\u00e4r-Stream\u00a0*\/\r\n\t\u00a0\u00a0public\u00a0$content;\r\n\u00a0\u00a0\u00a0}\r\n?><\/pre>\n<p>Dieses Klasse wird in der Datei: Bild.class.php abgespeichert.<br \/>\nAls n\u00e4chstes wird unser Script zum Bilderupload soweit erweitert, dass sie die Files aufnimmt und in einer Session speichert. Die nachfolgenden Zeilen werden vor Ausgabe der HTML-Daten eingef\u00fcgt:<\/p>\n<pre lang=\"php\">require_once('Bild.class.php');\r\n\r\n\u00a0\u00a0\u00a0\/\/Als\u00a0erstes\u00a0pr\u00fcfen\u00a0wir\u00a0mal,\u00a0ob\u00a0\u00fcberhaupt\u00a0ein\u00a0Bild\u00a0hochgeladen\u00a0wurde\u00a0und\u00a0ob\u00a0der\u00a0Name\u00a0des\u00a0Bildes\u00a0nicht\u00a0leer\u00a0ist\r\n\u00a0\u00a0\u00a0if\u00a0(isset($_FILES['uploadBild']['name'])\u00a0&&\u00a0strlen($_FILES['uploadBild']['name'])>0)\r\n\u00a0\u00a0\u00a0{\r\n\u00a0\u00a0\u00a0\t\u00a0\u00a0\/\/Nun\u00a0legen\u00a0wir\u00a0ein\u00a0Bild\u00a0als\u00a0Objekt\u00a0an\r\n\u00a0\u00a0\u00a0\t\u00a0\u00a0$bild\u00a0=\u00a0new\u00a0Bild();\r\n\t\u00a0\u00a0\/\/Der\u00a0Content-Type\u00a0des\u00a0Bildes\u00a0wird\u00a0gesetzt\r\n\u00a0\u00a0\u00a0\t\u00a0\u00a0$bild->contentType\u00a0=\u00a0$_FILES['uploadBild']['type'];\r\n\t\u00a0\u00a0\/\/Der\u00a0Name\u00a0des\u00a0Bildes\u00a0wird\u00a0gesetzt\r\n\u00a0\u00a0\u00a0\t\u00a0\u00a0$bild->name\u00a0=\u00a0$_FILES['uploadBild']['name'];\r\n\u00a0\u00a0\u00a0\t\u00a0\u00a0\r\n\t\u00a0\u00a0\/\/Der\u00a0Content\u00a0des\u00a0Bildes\u00a0wird\u00a0aus\u00a0der\u00a0Tempor\u00e4ren\u00a0Datei\u00a0gelesen,\u00a0die\u00a0der\u00a0Upload\u00a0per\u00a0HTML\u00a0anlegt.\u00a0Weiterhin\u00a0gibt\u00a0der\u00a0Upload\u00a0auch\u00a0die\u00a0Gr\u00f6\u00dfe\u00a0des\u00a0Files\u00a0mit,\u00a0so\u00a0dass\u00a0wir\u00a0\r\n\t\u00a0\u00a0\/\/ohne\u00a0umst\u00e4ndliche\u00a0weitere\u00a0Befehle\u00a0den\u00a0Inhalt\u00a0direkt\u00a0in\u00a0einen\u00a0String\u00a0lesen\u00a0k\u00f6nnen.\r\n\t\u00a0\u00a0$bild->content\u00a0=\u00a0fread(fopen($_FILES['uploadBild']['tmp_name'],\u00a0\"r\"),\u00a0$_FILES['uploadBild']['size']);\r\n\t\u00a0\u00a0\r\n\t\u00a0\u00a0\/\/F\u00fcr\u00a0Testzwecke\u00a0packen\u00a0wir\u00a0das\u00a0gelesene\u00a0Bild\u00a0einfach\u00a0\u00a0in\u00a0die\u00a0Session,\u00a0normalerweise\u00a0speichert\u00a0man\u00a0das\u00a0aber\u00a0in\u00a0ein\u00a0File\u00a0oder\u00a0in\u00a0die\u00a0Datenbank\r\n\t\u00a0\u00a0session_start();\r\n\t\u00a0\u00a0$_SESSION['uploadBild']\u00a0=\u00a0$bild;\r\n\u00a0\u00a0\u00a0}<\/pre>\n<p>So sieht die Verarbeitung aus. Als erstes wird die von uns angelegte Klasse geladen und wir schauen im $_FILES-Array nach, ob dort Dateien mitgeschickt wurden. Ist dies der Fall, werden die Informationen des Files ausgelesen und in Klassen-Member-Variablen gespeichert.<\/p>\n<p>Anschlie\u00dfend wird eine Session gestartet (oder wiederaufgenommen) und das Bild mit Hilfe des Objektes in der Session abgelegt.<\/p>\n<p>Nun kommen wir zur Implementierung des getImage-Scriptes:<\/p>\n<pre lang=\"php\"><?php\r\n\u00a0\u00a0\/\/Laden\u00a0der\u00a0Bild-Klasse,\u00a0soweit\u00a0nicht\u00a0bereits\u00a0geschehen\r\n\u00a0\u00a0require_once('Bild.class.php');\r\n\u00a0\u00a0\r\n\u00a0\u00a0\/\/Session\u00a0starten,\u00a0um\u00a0an\u00a0das\u00a0hochgeladene\u00a0Bild\u00a0zu\u00a0kommen\r\n\u00a0\u00a0session_start();\r\n\u00a0\u00a0\/\/Wenn\u00a0ein\u00a0Bild\u00a0gesetzt\u00a0wurde,\u00a0wird\u00a0das\u00a0Bild\u00a0ausgegeben\r\n\u00a0\u00a0if\u00a0(isset($_SESSION['uploadBild']))\r\n\u00a0\u00a0{\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/Der\u00a0Header-Eintrag\u00a0sagt\u00a0dem\u00a0Browser,\u00a0um\u00a0was\u00a0f\u00fcr\u00a0ein\u00a0Bild\u00a0es\u00a0sich\u00a0handelt,\u00a0somit\u00a0kann\u00a0er\u00a0es\u00a0dann\u00a0auch\u00a0anzeigen\r\n\u00a0\u00a0\u00a0\u00a0\u00a0header('Content-Type:\u00a0'.$_SESSION['uploadBild']->contentType);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\/\/Die\u00a0Ausgabe\u00a0des\u00a0eigentlichen\u00a0Inhalts\r\n\u00a0\u00a0\u00a0\u00a0\u00a0print($_SESSION['uploadBild']->content);\r\n\u00a0\u00a0}\r\n?><\/pre>\n<p>Bitte beachtet, dass ihr Bilder, die in die Datenbank geladen werden sollen ggf. mit base_64_encode gespeichert und nach dem Laden mit base_64_decode wieder zur\u00fcckgewandelt werden m\u00fcssen.<\/p>\n<p>Last but not least erstellen wir eine HTML-Seite, die unser Formular als Popup aufrufen soll.<\/p>\n<pre lang=\"html5\"><html>\r\n <head><title>Test-Popup<\/title><\/head>\r\n <body>\r\n <p><img decoding=\"async\" src=\"getImage.php\" style=\"max-height: 500px; max-width: 500px\" \/><\/p>\r\n <a href=\"#\" onclick=\"window.open('bildUpload.php','test','width=550 height=300,scrollbars=no,location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=yes');\" >Hier klicken<\/a>\r\n <\/body>\r\n<\/html><\/pre>\n<p>Zur Veranschaulichung der reload-Funktionalit\u00e4t wird das Bild auch hier hinterlegt.<\/p>\n<p>Sch\u00f6n und gut, nun haben wir erst einmal die Grundlagen geschafft. Wie schlie\u00dfen wir aber unser Popup <strong>NACH<\/strong> dem Upload und wie binden wir unser Wartefenster ein?<\/p>\n<p>Um das Wartefenster einzublenden machen wir ein wenig von CSS und Javascript Gebrauch.<br \/>\nAls erstes definieren wir zwei Stylesheet-Klassen, eine \u201cloadingInvisible\u201d f\u00fcr das Wartefenster, wenn es nicht aktiv ist und eine Klasse f\u00fcr ein aktives Fenster.<br \/>\nDas ist total simpel und wird einfach in den Header des HTML-Teils geschrieben:<\/p>\n<pre lang=\"css\"><style type=\"text\/css\">\r\n.loadingInvisible\r\n{\r\n display: none;\r\n}\r\n.loading\r\n{\r\n background: url(\"loadingBackground.png\") no-repeat bottom right;\r\n color: white;\r\n font-size: medium;\r\n font-weight: bolder;\r\n display: block;\r\n z-index: 1;\r\n position: absolute;\r\n left: 180px;\r\n top: 200px;\r\n width: 200px;\r\n height: 80px;\r\n text-align: center;\r\n margin: auto; \r\n}\r\n<\/style><\/pre>\n<p>Der Trick bei der loading-Klasse ist der z-index. Ich habe lange gebraucht, um die Eigenschaft z-index zu verstehen, aber mit Hilfe von absoluter Positionierung, kann man diese Eigenschaft nutzen, um \u00fcberlagernde Fenster darzustellen.<\/p>\n<p>Als n\u00e4chstes m\u00fcssen wir noch unser div-Tag einbetten. An welcher Stelle im HTML-Code das kommt ist prinzipiell egal, packen wir es am besten ans Ende.<\/p>\n<pre lang=\"html5\">\r\n <div class=\"loadingInvisible\" id=\"loading\">\r\n <p>Bitte warten<\/p>\r\n <p align=\"center\"><img decoding=\"async\" src=\"ajax-loader.gif\" \/><\/p>\r\n <\/div><\/pre>\n<p>Ich habe noch das \u00fcbliche ajax-Loader-Image in den Bildschirm gepackt, dann wirkt das ganze noch etwas besser.<\/p>\n<p>Was noch fehlt ist das Zusammenspiel und das Refresh der Master-Seite und das Schlie\u00dfen des Popups. Aber immer sch\u00f6n nacheinander.<\/p>\n<p>Um die Seite anzuzeigen, wird der Submit-Button zu einem \u201cnormalen\u201d Button umgewandelt und ein Javascript in beim Klick aufgerufen.<\/p>\n<p>Das javascript wird im Header definiert und sieht folgenderma\u00dfen aus:<\/p>\n<pre lang=\"javascript\"> <script type=\"text\/javascript\">\r\n function showLoading()\r\n {\r\n document.getElementById(\"loading\").className=\"loading\";\r\n \t\/\/Firefox & Co\r\n\tif (window.innerWidth)\r\n\t{\r\n\t document.getElementById(\"loading\").style.left = new Number(window.innerWidth \/ 2 -100).toString()+\"px\";\r\n document.getElementById(\"loading\").style.top = new Number(window.innerHeight \/ 2 - 40).toString()+\"px\";\r\n\t}\r\n\t\/\/IE\r\n else\r\n\t{\r\n\t\tdocument.getElementById(\"loading\").style.left = new Number(document.body.offsetWidth \/ 2 - 100).toString()+\"px\";\r\n\t\tdocument.getElementById(\"loading\").style.top = new Number(document.body.offsetHeight \/ 2 - 100).toString()+\"px\";\r\n\t}\r\n return true;\r\n \r\n }\r\n function submitBilderUpload()\r\n {\r\n showLoading();\r\n document.forms[0].submit();\r\n }\r\n<\/script><\/pre>\n<p>Die erste Funktion setzt die Klasse des loading-Div-Tags auf loading, dadurch wird das Fenster inkl. einem Ladesymbol angezeigt. Die nachfolgenden Zeilen in der showLoading-Funktion sorgen daf\u00fcr, dass das Fenster mittig im Popup angezeigt wird. Hierbei ist zu beachten, dass Microsoft IE und die anderen Browser mal wieder voneinander abweichen, da in Firefox & Co die Eigenschaften innerWidth und innerHeight definiert sind, w\u00e4hrenddessen diese Eigenschaft im Internet Explorer nicht existiert. Daf\u00fcr wird dann offsetWidth und offsetHeight genutzt.<br \/>\nDas zweite Script zeigt erst das Ladefenster an und submittet dann das Formular. Ist das Formular submittet, verschwindet der Ladebalken automatisch, da die Seite neu aufgebaut wird.<\/p>\n<p>Nun muss noch der Submit-Button ersetzt werden durch:<\/p>\n<pre lang=\"html5\"><input type=\"button\" id=\"submitButton\" name=\"submitButton\" value=\"Bild hochladen\" onclick=\"submitBilderUpload()\"\/><\/pre>\n<p>Wird nun auf den Button geklickt, wird nicht sofort submittet, sondern der Submit erfolgt \u00fcber die Javascript-Methode.<\/p>\n<p>So, das w\u00e4rs doch fast. Noch das selbst erstellte Bild und das ajax-Loader-Gif\u00a0 <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-50\" src=\"http:\/\/devblog.cssec.de\/wp-content\/uploads\/2018\/11\/ajax-loader.gif\" alt=\"\" width=\"32\" height=\"32\" \/> in das Verzeichnis packen und dann\u2026.<\/p>\n<p>\u2026 stimmt, das Geheimnis des Schlie\u00dfens ist noch zu l\u00fcften. Eigentlich ist das ganz einfach. L\u00f6sung bietet wiederum Javascript und PHP.<\/p>\n<p>Beim Schreiben des HTML-Codes stellt ihr einfach eine Bedingung mit ein, unter der ein bestimmter Code-Teil eingef\u00fcgt wird.<\/p>\n<p>Das sieht folgenderma\u00dfen aus:<\/p>\n<pre lang=\"php\">echo '<html>.... usw <\/div>';\r\nif isset($_FILES['uploadBild']) {echo '<script type=\"text\/javascript\"> window.opener.location.reload(); window.close(); <\/script>';}\r\necho '<\/body><\/html>';<\/pre>\n<p>Im Endeffekt wird das Schlie\u00dfen beim Neuladen des Fensters gemacht und zwar genau dann, wenn ein neues Bild hochgeladen wurde.<\/p>\n<p>Viel Spa\u00df beim Ausprobieren und verfeinern.<br \/>\nHier dann noch mein Beispielcode im gesamten:<\/p>\n<p><a href=\"http:\/\/devblog.cssec.de\/wp-content\/uploads\/2018\/11\/loadingscreen.zip\" target=\"_blank\" rel=\"noopener\">Download Beispielcode<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Gestern ist bei meiner Webshop-Entwicklung mal wieder ein Problem aufgetreten, an dass ich auf Anhieb nie gekommen w\u00e4re. Es geht um einen Bilderupload in einem separaten Popup mit anschlie\u00dfendem Schlie\u00dfen des Popups. Frech wie ich bin, habe ich den Aufruf des Submit-Buttons einfach \u00fcber ein Javascript simuliert mit: \u00a0document.forms[0].submit();\u00a0\/\/erstes\u00a0Form\u00a0submitten \u00a0window.opener.location.reload();\u00a0\u00a0\/\/refresh\u00a0des\u00a0aufrufenden\u00a0Fensters \u00a0window.close(); Problem dabei: Durch die […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[],"_links":{"self":[{"href":"https:\/\/www.cssec.de\/blog\/wp-json\/wp\/v2\/posts\/49"}],"collection":[{"href":"https:\/\/www.cssec.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cssec.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cssec.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cssec.de\/blog\/wp-json\/wp\/v2\/comments?post=49"}],"version-history":[{"count":5,"href":"https:\/\/www.cssec.de\/blog\/wp-json\/wp\/v2\/posts\/49\/revisions"}],"predecessor-version":[{"id":65,"href":"https:\/\/www.cssec.de\/blog\/wp-json\/wp\/v2\/posts\/49\/revisions\/65"}],"wp:attachment":[{"href":"https:\/\/www.cssec.de\/blog\/wp-json\/wp\/v2\/media?parent=49"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cssec.de\/blog\/wp-json\/wp\/v2\/categories?post=49"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cssec.de\/blog\/wp-json\/wp\/v2\/tags?post=49"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}