{"id":6367,"date":"2022-05-15T23:03:20","date_gmt":"2022-05-15T21:03:20","guid":{"rendered":"https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/?p=6367"},"modified":"2022-06-02T21:17:09","modified_gmt":"2022-06-02T19:17:09","slug":"lightbox","status":"publish","type":"post","link":"https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/lightbox\/","title":{"rendered":"Lightbox"},"content":{"rendered":"\n<div class=\"wp-block-image\"><figure class=\"alignright is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-content\/uploads\/2022\/05\/chrome_Gv3Ly78J8J-300x300.png\" alt=\"\" class=\"wp-image-6381\" width=\"191\" height=\"191\" srcset=\"https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-content\/uploads\/2022\/05\/chrome_Gv3Ly78J8J-300x300.png 300w, https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-content\/uploads\/2022\/05\/chrome_Gv3Ly78J8J-150x150.png 150w, https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-content\/uploads\/2022\/05\/chrome_Gv3Ly78J8J-768x768.png 768w, https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-content\/uploads\/2022\/05\/chrome_Gv3Ly78J8J-800x800.png 800w, https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-content\/uploads\/2022\/05\/chrome_Gv3Ly78J8J.png 1123w\" sizes=\"auto, (max-width: 191px) 85vw, 191px\" \/><\/figure><\/div>\n\n\n\n<p>Een lightbox is een full-screen kader dat over een pagina heen verschijnt. Dit gebeurt bijvoorbeeld wanneer je op een thumbnail (een kleine weergave) van een foto klikt. In deze opdracht gaan we met behulp van de <strong>selector :target<\/strong> zelf een lightbox coderen.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p class=\"clearboth\"><div class=\"su-tabs su-tabs-style-default su-tabs-mobile-stack\" data-active=\"1\" data-scroll-offset=\"0\" data-anchor-in-url=\"no\"><div class=\"su-tabs-nav\"><span class=\"\" data-url=\"\" data-target=\"blank\" tabindex=\"0\" role=\"button\">Intro<\/span><span class=\"\" data-url=\"\" data-target=\"blank\" tabindex=\"0\" role=\"button\">Opdracht<\/span><span class=\"\" data-url=\"\" data-target=\"blank\" tabindex=\"0\" role=\"button\">1<\/span><span class=\"\" data-url=\"\" data-target=\"blank\" tabindex=\"0\" role=\"button\">2<\/span><span class=\"\" data-url=\"\" data-target=\"blank\" tabindex=\"0\" role=\"button\">3<\/span><span class=\"\" data-url=\"\" data-target=\"blank\" tabindex=\"0\" role=\"button\">4<\/span><span class=\"\" data-url=\"\" data-target=\"blank\" tabindex=\"0\" role=\"button\">Theorie<\/span><\/div><div class=\"su-tabs-panes\"><div class=\"su-tabs-pane su-u-clearfix su-u-trim\" data-title=\"Intro\">\n\n\n\n<h5 class=\"wp-block-heading\">Wat is een selector?<\/h5>\n\n\n\n<p>Met een selector kun je in css aangeven wat je wilt stylen. Er zijn een <a rel=\"noreferrer noopener\" href=\"https:\/\/www.w3schools.com\/cssref\/css_selectors.asp\" target=\"_blank\">heleboel soorten selectoren<\/a>. Een van de bekendere is <strong>:hover<\/strong>. Wanneer je deze selector op bijvoorbeeld een anchor toepast (<strong>a:hover)<\/strong>, dan wordt de css actief wanneer er over het anchor wordt &#8216;ge-hovered&#8217;. Dus als je cursor boven een link hangt, verandert de stijl.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Selector :target<\/h5>\n\n\n\n<p>Met de <a href=\"https:\/\/www.w3schools.com\/cssref\/sel_target.asp\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"selector :target (opent in een nieuwe tab)\">selector :target<\/a> kun je een element selecteren met behulp van een link. De link bevat een # gevolgd door een <strong>id<\/strong>. Wanneer de link wordt geklikt wordt de css met dit <strong>id<\/strong> actief.<\/p>\n\n\n\n<pre class=\"wp-block-code jhtml\"><code>&lt;a href=\"#element-01\">linktekst&lt;\/a>\n&lt;div id=\"element-01\">content&lt;\/div><\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code jcss\"><code>#element-01:target {background:red}<\/code><\/pre>\n\n\n\n<p>De bovenstaande code maakt dat wanneer de link geklikt wordt de &lt;div&gt; een rode achtergrond krijgt. <\/p>\n\n\n\n<p>Eenmaal geklikt blijft de &lt;div&gt; het actieve element en wordt de stijl #element-01:target toegepast, totdat er een ander element actief wordt.<\/p>\n\n\n\n<\/div>\n<div class=\"su-tabs-pane su-u-clearfix su-u-trim\" data-title=\"Opdracht\">\n\n\n\n<p class=\"has-background has-yellow-background-color\"><strong>Opdracht <\/strong>\u25ba Maak een webpagina met drie thumbnails die linken naar een lightbox met respectievelijk een afbeelding, een video en een tekst. <\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Beoordeling<\/h5>\n\n\n\n<ul class=\"wp-block-list\"><li>De webpagina is opgezet met display:grid<\/li><li>De webpagina bevat drie thumbnails die elk linken naar een lightbox.<\/li><li>De thumbnails zijn verticaal of horizontaal in het midden uitgelijnd.<\/li><li>De thumbnails openen respectievelijk een afbeelding, een video en tekst.<\/li><li>De lightbox heeft een padding van minimaal 5vh.<\/li><li>De lightbox wordt met de selector :target getoond<\/li><li>De lightbox sluit door er op (of in de padding) te klikken.<\/li><\/ul>\n\n\n\n<\/div>\n<div class=\"su-tabs-pane su-u-clearfix su-u-trim\" data-title=\"1\">\n\n\n\n<h5 class=\"wp-block-heading\">Lightbox<\/h5>\n\n\n\n<p>We linken een klein plaatje (een thumbnail) naar een grote versie van het plaatje (de lightbox). De grote versie is in eerste instantie verborgen, maar deze wordt met behulp van de selector :target zichtbaar. Maar&#8230; dit doen we in stap vier. First things first&#8230;<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Thumbnail plaatsen<\/h5>\n\n\n\n<ol class=\"wp-block-list\"><li>Download een leuke afbeelding (JPG) van ongeveer 1920&#215;1080 px.<\/li><li>Maak hiervan met Photoshop een kleine versie (JPG) van 200px breed.<\/li><li>Download het <a href=\"https:\/\/www.dropbox.com\/s\/nbigxw7ck8oiygl\/index.html?dl=1\">html basisbestand<\/a> en open dit in een code editor.<\/li><\/ol>\n\n\n\n<p>Plaats de afbeelding in een div met class &#8216;container&#8217; in de html:<\/p>\n\n\n\n<pre class=\"wp-block-code jhtml\"><code>&lt;div class=\"container\">\n   &lt;img src=\"jouw-thumbnail-url\">\n&lt;\/div><\/code><\/pre>\n\n\n\n<p>Met behulp van display:grid kunnen we de afbeelding eenvoudig in het midden van de viewport plaatsen:<\/p>\n\n\n\n<pre class=\"wp-block-code jcss\"><code>.container {\n    display: grid;\n    height: 100vh;\n    align-items: center;\n    justify-items: center;\n}<\/code><\/pre>\n\n\n\n<p>Om er zeker van te zijn dat de thumbnail niet groter wordt dan 200px voegen we deze css toe: <\/p>\n\n\n\n<pre class=\"wp-block-code jcss\"><code>.container img {\n    max-width:200px;\n}<\/code><\/pre>\n\n\n\n<p>Deze thumbnail-afbeelding linkt naar zijn eigen lightbox. Voor iedere thumbnail gebruiken we een link naar een unieke lightbox id, in dit geval &#8220;box01&#8221;.<\/p>\n\n\n\n<pre class=\"wp-block-code jhtml\"><code>&lt;div class=\"container\">\n    &lt;a href=\"#box01\">\n        &lt;img src=\"jouw-thumbnail-url\">\n    &lt;\/a>\n&lt;\/div><\/code><\/pre>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-content\/uploads\/2016\/10\/let-op.png\" alt=\"\" class=\"wp-image-223\" width=\"45\" height=\"40\"\/><\/figure><\/div>\n\n\n\n<p>Het plaatsen van meerdere thumbnails en het uitlijnen hiervan met behulp van het grid wordt in deze oefening niet uitgelegd. Meer informatie over grid en uitlijnen kun je vinden bij de theorie van de <a href=\"https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/grid\/\">oefening Grid<\/a>.<\/p>\n\n\n\n<\/div>\n<div class=\"su-tabs-pane su-u-clearfix su-u-trim\" data-title=\"2\">\n\n\n\n<h5 class=\"wp-block-heading\">De Lightbox maken<\/h5>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignright is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-content\/uploads\/2022\/05\/image-1-800x552.png\" alt=\"\" class=\"wp-image-6374\" width=\"220\" height=\"151\" srcset=\"https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-content\/uploads\/2022\/05\/image-1-800x552.png 800w, https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-content\/uploads\/2022\/05\/image-1-300x207.png 300w, https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-content\/uploads\/2022\/05\/image-1-768x530.png 768w, https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-content\/uploads\/2022\/05\/image-1.png 963w\" sizes=\"auto, (max-width: 220px) 85vw, 220px\" \/><\/figure><\/div>\n\n\n\n<p>De lightbox valt over het hele scherm. We willen dat er een kleine rand overblijft, waarachter de pagina zichtbaar blijft. De achterliggende pagina moet worden gedimd. De lightbox sluit wanneer je er op klikt.<\/p>\n\n\n\n<p><em>De lightbox sluit wanneer je er op klikt<\/em>. Dat betekent dus dat de hele lightbox een link is. We beginnen daarom met het maken van een link. <\/p>\n\n\n\n<pre class=\"wp-block-code jhtml\"><code>&lt;a id=\"box01\" href=\"#\" class=\"lightbox\">&lt;\/a><\/code><\/pre>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"alignleft is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-content\/uploads\/2016\/10\/let-op.png\" alt=\"\" class=\"wp-image-223\" width=\"41\" height=\"36\"\/><\/figure><\/div>\n\n\n\n<p>Let op: het bovenstaande element heeft als ID &#8220;box01&#8221;. Dit is dus om aan te geven dat de link van de thumbnail (tabblad 1) hier naar toe gaat.<\/p>\n\n\n\n<p>We willen dat de lightbox de hele viewport overspant en niet scrollt. We doen dat met de volgende code:<\/p>\n\n\n\n<pre class=\"wp-block-code jcss\"><code>.lightbox {\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n  }<\/code><\/pre>\n\n\n\n<p>We voegen nog de volgende 3 eigenschappen toe:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Het dimmen van de achtergrond doen we door de lightbox een half transparante achtergrondkleur te geven. <\/li><li>Daarnaast geven we de lightbox een <a href=\"https:\/\/www.w3schools.com\/css\/css_padding.asp\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"padding (opent in een nieuwe tab)\">padding<\/a>, zodat de afbeelding niet tegen de schermranden komt te liggen en een deel van de pagina in de achtergrond zichtbaar blijft. Ook kunnen we in de padding klikken om de lightbox weer te sluiten.<\/li><li>We geven de lightbox een <a rel=\"noreferrer noopener\" aria-label=\"z-index (opent in een nieuwe tab)\" href=\"https:\/\/www.w3schools.com\/cssref\/pr_pos_z-index.asp\" target=\"_blank\">z-index<\/a> van 999, zodat deze altijd bovenop verschijnt.<\/li><\/ol>\n\n\n\n<pre class=\"wp-block-code jcss\"><code>.lightbox {\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-color: rgba(0,0,0,0.8);  \/\/dit is zwart, 80% dekking\n    padding: 5vh; \/\/vijf procent van de viewport height\n    z-index: 999;\n  }<\/code><\/pre>\n\n\n\n<\/div>\n<div class=\"su-tabs-pane su-u-clearfix su-u-trim\" data-title=\"3\">\n\n\n\n<h5 class=\"wp-block-heading\">Lightbox met een afbeelding<\/h5>\n\n\n\n<p>We willen dat de afbeelding zo groot mogelijk en in zijn geheel te zien is. Dit kan het makkelijkst door de afbeelding te plaatsen als een achtergrond-afbeelding van een ander element. Je gebruikt hiervoor een <a rel=\"noreferrer noopener\" aria-label=\" (opent in een nieuwe tab)\" href=\"https:\/\/www.w3schools.com\/tags\/tag_span.asp\" target=\"_blank\">&lt;span&gt;<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code jhtml\"><code>&lt;a href=\"#\" id=\"box01\" class=\"lightbox\">\n    &lt;span>&lt;\/span>\n&lt;\/a><\/code><\/pre>\n\n\n\n<p>Met de bijbehorende css:<\/p>\n\n\n\n<pre class=\"wp-block-code jcss\"><code> #box01 span {\n    display: block;\n    width: 100%;\n    height: 100%;\n    background-image: url('grote-afbeelding-url');\n    background-position: center;\n    background-repeat: no-repeat;\n    background-size: contain; \/\/passend in hoogte of breedte, volledig in beeld\n  }<\/code><\/pre>\n\n\n\n<p>Omdat de afbeelding in de lightbox een achtergrond is van het &lt;span&gt; element kun je er tekst en andere elementen overheen zetten. <\/p>\n\n\n\n<pre class=\"wp-block-code jhtml\"><code>&lt;a href=\"#\" id=\"box01\" class=\"lightbox\">\n    &lt;span>\n        &lt;h1>Deze titel staat bovenop de afbeelding&lt;\/h1>\n    &lt;\/span>\n&lt;\/a><\/code><\/pre>\n\n\n\n<h5 class=\"wp-block-heading\">Lightbox met een video<\/h5>\n\n\n\n<p>Een video plaats je het makkelijkst door deze ergens te hosten (bv. Youtube) en dan de embed-code in de lightbox te zetten:<\/p>\n\n\n\n<pre class=\"wp-block-code jhtml\"><code>&lt;a href=\"#\" id=\"box02\" class=\"lightbox\">\n    &lt;iframe>&lt;\/iframe> \/\/plaats hier de volledige embed code\n&lt;\/a>   <\/code><\/pre>\n\n\n\n<p>Probeer de embedcode aan te passen, en de breedte en hoogte van het iframe op 100% te zetten. <\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Lightbox met een tekst<\/h5>\n\n\n\n<p>Een tekst gaat op dezelfde wijze. Je kunt hier gebruik maken van &lt;h&gt; en &lt;p&gt; tags. <\/p>\n\n\n\n<pre class=\"wp-block-code jhtml\"><code>&lt;a href=\"#\" id=\"box02\" class=\"lightbox\">\n    &lt;h1>Een koptitel&lt;\/h1>\n    &lt;p>Lorem Ipsum&lt;\/p>\n&lt;\/a>  <\/code><\/pre>\n\n\n\n<p>Uiteraard kun je nog veel verder gaan en div&#8217;s en &lt;img&gt; toevoegen. Bijvoorbeeld om een sluit-knop te maken, of &#8216;vorige&#8217; en volgende&#8217; links toe te voegen, of een slider van alle thumbs. Als je wilt kun je een zelfs hele pagina opmaken in de lightbox.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"690\" height=\"526\" src=\"https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-content\/uploads\/2022\/05\/lightbox-0_5-preview-1.png\" alt=\"\" class=\"wp-image-6380\" srcset=\"https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-content\/uploads\/2022\/05\/lightbox-0_5-preview-1.png 690w, https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-content\/uploads\/2022\/05\/lightbox-0_5-preview-1-300x229.png 300w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\" \/><\/figure>\n\n\n\n<\/div>\n<div class=\"su-tabs-pane su-u-clearfix su-u-trim\" data-title=\"4\">\n\n\n\n<p>De laatste stap is om ervoor te zorgen dat de lightbox pas zichtbaar wordt als we de thumbnail klikken. Bij het laden van de pagina start de lightbox dus onzichtbaar. Voeg de volgende code toe aan de bestaande class lightbox in je css:<\/p>\n\n\n\n<pre class=\"wp-block-code jcss\"><code>display: none;<\/code><\/pre>\n\n\n\n<h5 class=\"wp-block-heading\">De lightbox tonen<\/h5>\n\n\n\n<p>We gebruiken de link van de thumbnail naar de lightbox om deze aan te zetten. Deze link gaat naar href=&#8221;#box01&#8243;.  Wanneer er geklikt wordt op een link naar een ID, dan wordt het element met dit ID &#8216;actief&#8217;. Met de selector kan je dit element dan stylen. <\/p>\n\n\n\n<p>Hier gebruiken we dus de selector :target. <\/p>\n\n\n\n<pre class=\"wp-block-code jcss\"><code>#box01:target {\n    display:block;\n}<\/code><\/pre>\n\n\n\n<p>De css wordt toegepast op het element met id &#8216;box01&#8217; (de lightbox) en <em>overruled<\/em> de code display:none, waardoor de lightbox zichtbaar wordt.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">De lightbox sluiten<\/h5>\n\n\n\n<p>De lightbox zelf is een link naar &#8220;#&#8221; (zie stap 1). Dit herlaadt de pagina. Hierdoor is de selector :target niet meer actief en krijgt de lightbox weer display:none, waardoor deze niet zichtbaar is. <\/p>\n\n\n\n<\/div>\n<div class=\"su-tabs-pane su-u-clearfix su-u-trim\" data-title=\"Theorie\">\n\n\n\n<ul class=\"wp-block-list\"><li>W3 Schools: <a href=\"https:\/\/www.w3schools.com\/cssref\/css_selectors.asp\">Selectors<\/a><\/li><li>W3 Schools: <a href=\"https:\/\/www.w3schools.com\/cssref\/sel_target.asp\">Selector :target<\/a><\/li><li>W3 Schools: <a rel=\"noreferrer noopener\" aria-label=\"Z-Index (opent in een nieuwe tab)\" href=\"https:\/\/www.w3schools.com\/cssref\/pr_pos_z-index.asp\" target=\"_blank\">Z-Index<\/a><\/li><li>Codepen: <a rel=\"noreferrer noopener\" aria-label=\"Pure CSS lightbox (opent in een nieuwe tab)\" href=\"https:\/\/codepen.io\/gschier\/pen\/kyRXVx\" target=\"_blank\">Pure CSS lightbox<\/a><\/li><li>Design Shack: <a rel=\"noreferrer noopener\" aria-label=\"What is the deal with :target selector? (opent in een nieuwe tab)\" href=\"https:\/\/designshack.net\/articles\/css\/targetcss\/\" target=\"_blank\">What is the deal with :target in CSS?<\/a><\/li><\/ul>\n\n\n\n<\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Tijd: 2 uur<\/p>\n","protected":false},"author":1,"featured_media":6381,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[73,67],"tags":[356,333,352,353,355,357],"class_list":["post-6367","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html-css","category-niveau-2","tag-target","tag-centreren","tag-displaygrid","tag-lightbox","tag-selector","tag-thumbnail"],"rttpg_featured_image_url":{"full":["https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-content\/uploads\/2022\/05\/chrome_Gv3Ly78J8J.png",1123,1123,false],"landscape":["https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-content\/uploads\/2022\/05\/chrome_Gv3Ly78J8J.png",1123,1123,false],"portraits":["https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-content\/uploads\/2022\/05\/chrome_Gv3Ly78J8J.png",1123,1123,false],"thumbnail":["https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-content\/uploads\/2022\/05\/chrome_Gv3Ly78J8J-150x150.png",150,150,true],"medium":["https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-content\/uploads\/2022\/05\/chrome_Gv3Ly78J8J-300x300.png",300,300,true],"large":["https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-content\/uploads\/2022\/05\/chrome_Gv3Ly78J8J-800x800.png",800,800,true],"1536x1536":["https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-content\/uploads\/2022\/05\/chrome_Gv3Ly78J8J.png",1123,1123,false],"2048x2048":["https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-content\/uploads\/2022\/05\/chrome_Gv3Ly78J8J.png",1123,1123,false],"post-thumbnail":["https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-content\/uploads\/2022\/05\/chrome_Gv3Ly78J8J.png",1123,1123,false]},"rttpg_author":{"display_name":"Jof","author_link":"https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/author\/jof\/"},"rttpg_comment":0,"rttpg_category":"<a href=\"https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/category\/html-css\/\" rel=\"category tag\">HTML-CSS<\/a> <a href=\"https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/category\/niveau-2\/\" rel=\"category tag\">Niveau 2 - Basis<\/a>","rttpg_excerpt":"Tijd: 2 uur","_links":{"self":[{"href":"https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-json\/wp\/v2\/posts\/6367","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-json\/wp\/v2\/comments?post=6367"}],"version-history":[{"count":32,"href":"https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-json\/wp\/v2\/posts\/6367\/revisions"}],"predecessor-version":[{"id":6415,"href":"https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-json\/wp\/v2\/posts\/6367\/revisions\/6415"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-json\/wp\/v2\/media\/6381"}],"wp:attachment":[{"href":"https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-json\/wp\/v2\/media?parent=6367"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-json\/wp\/v2\/categories?post=6367"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/neuj.hosts1.ma-cloud.nl\/wp\/wp-json\/wp\/v2\/tags?post=6367"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}