{"id":362,"date":"2026-09-08T16:07:05","date_gmt":"2026-09-08T16:07:05","guid":{"rendered":"https:\/\/delindvanwijngaarden.com\/?page_id=362"},"modified":"2026-09-09T11:19:29","modified_gmt":"2026-09-09T11:19:29","slug":"projecten-concept-test","status":"publish","type":"page","link":"https:\/\/delindvanwijngaarden.com\/en\/","title":{"rendered":"Projecten (concept test)"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"362\" class=\"elementor elementor-362\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0f2cd97 e-flex e-con-boxed e-con e-parent\" data-id=\"0f2cd97\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3f32d7d elementor-widget elementor-widget-html\" data-id=\"3f32d7d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n  #fg-projectgrid{\n    --paper:#faf3e6;\n    --card:#fffdf8;\n    --ink:#2a2622;\n    --ink-soft:#6b6459;\n    --line:#e7ddc9;\n    --accent:#b5502f;\n    font-family:'Afacad', 'Helvetica Neue', Arial, sans-serif;\n    color:var(--ink);\n  }\n  #fg-projectgrid *{box-sizing:border-box;}\n  #fg-projectgrid .fg-grid{\n    margin:0 auto;\n    display:flex;\n    gap:22px;\n    align-items:flex-start;\n    max-width:1180px;\n  }\n  #fg-projectgrid .fg-col{\n    flex:1 1 0;\n    min-width:0;\n    display:flex;\n    flex-direction:column;\n    gap:22px;\n  }\n  #fg-projectgrid .fg-card{\n    background:var(--card);\n    border:1px solid var(--line);\n    border-radius:14px;\n    overflow:hidden;\n    box-shadow:0 1px 2px rgba(40,30,10,0.04);\n  }\n  #fg-projectgrid .fg-thumb{\n    position:relative;\n    display:block;\n    width:100%;\n    padding:0;\n    margin:0;\n    border:0;\n    border-radius:0;\n    background:none;\n    cursor:pointer;\n    line-height:0;\n    overflow:hidden;\n  }\n  #fg-projectgrid .fg-thumb img{\n    width:100%;\n    display:block;\n    transition:filter .25s ease;\n  }\n  #fg-projectgrid .fg-thumb:hover img{\n    filter:brightness(0.94);\n  }\n  #fg-projectgrid .fg-dots{\n    display:flex;\n    justify-content:center;\n    gap:6px;\n    margin-bottom:14px;\n  }\n  #fg-projectgrid .fg-dot{\n    width:7px;\n    height:7px;\n    border-radius:50%;\n    border:0;\n    padding:0;\n    background:var(--line);\n    cursor:pointer;\n  }\n  #fg-projectgrid .fg-dot:hover{background:var(--ink-soft);}\n  #fg-projectgrid .fg-dot.active{background:var(--accent);}\n  #fg-projectgrid .fg-panel{\n    display:block;\n    max-height:0;\n    overflow:hidden;\n    transition:max-height .45s ease;\n  }\n  #fg-projectgrid .fg-card.open .fg-panel{\n    max-height:2000px;\n    transition:max-height .6s ease;\n  }\n  @media (prefers-reduced-motion: reduce){\n    #fg-projectgrid .fg-panel, #fg-projectgrid .fg-card.open .fg-panel, #fg-projectgrid .fg-thumb img, #fg-projectgrid .fg-hint{\n      transition:none;\n    }\n  }\n  #fg-projectgrid .fg-panel-inner{\n    padding:16px 18px 20px;\n  }\n  #fg-projectgrid .fg-extra-shots{\n    display:flex;\n    flex-wrap:wrap;\n    gap:8px;\n    margin-bottom:14px;\n  }\n  #fg-projectgrid .fg-shot-wrap{\n    display:block;\n    height:150px;\n    border-radius:8px;\n    overflow:hidden;\n    cursor:pointer;\n    transition:box-shadow .15s ease;\n    flex:1 1 42%;\n  }\n  #fg-projectgrid .fg-shot-wrap img{\n    display:block;\n    width:100%;\n    height:100%;\n    object-fit:cover;\n  }\n  #fg-projectgrid .fg-shot-wrap:nth-child(4n+1){flex-basis:58%;}\n  #fg-projectgrid .fg-shot-wrap:nth-child(4n+3){flex-basis:58%;}\n  #fg-projectgrid .fg-shot-wrap:hover{\n    box-shadow:0 0 0 2px var(--accent);\n  }\n  #fg-projectgrid .fg-shot-wrap.is-main{\n    box-shadow:0 0 0 2px var(--accent);\n  }\n  #fg-projectgrid .fg-panel h2{\n    font-size:1.05rem;\n    font-weight:600;\n    margin:0 0 8px;\n  }\n  #fg-projectgrid .fg-panel p{\n    font-size:0.93rem;\n    line-height:1.55;\n    color:var(--ink-soft);\n    margin:0 0 14px;\n  }\n  #fg-projectgrid .fg-more-text{\n    display:none;\n  }\n  #fg-projectgrid .fg-more-text.shown{\n    display:block;\n  }\n  #fg-projectgrid .fg-read-more{\n    display:inline-block;\n    font-size:0.78rem;\n    color:#a39c8d;\n    cursor:pointer;\n    text-decoration:underline;\n    text-underline-offset:2px;\n    margin:-8px 0 14px;\n    background:none;\n    border:0;\n    padding:0;\n    font-family:inherit;\n  }\n  #fg-projectgrid .fg-read-more:hover{\n    color:var(--accent);\n  }\n  #fg-projectgrid .fg-status{\n    text-align:center;\n    color:var(--ink-soft);\n    font-size:0.9rem;\n    padding:40px 0;\n    width:100%;\n  }\n  #fg-projectgrid .fg-grid{\n    margin-top:14px;\n  }\n  .fg-header-inject{\n    display:inline-flex;\n    align-items:center;\n    gap:8px;\n    margin-left:10px;\n    vertical-align:middle;\n  }\n  .header__col-left .fg-bio-text-left{\n    display:block;\n    font-family:'Afacad', 'Helvetica Neue', Arial, sans-serif;\n    font-size:12px;\n    line-height:1.4;\n    color:#6b6459;\n    text-align:left;\n    max-width:420px;\n    margin-top:4px;\n  }\n  .fg-header-inject .fg-icon-btn{\n    width:30px;\n    height:30px;\n    flex:0 0 auto;\n    border-radius:50%;\n    background:#fffdf8;\n    border:1px solid #e7ddc9;\n    display:flex;\n    align-items:center;\n    justify-content:center;\n    font-size:15px;\n    text-decoration:none;\n    color:#2a2622;\n    box-shadow:0 1px 2px rgba(40,30,10,0.06);\n    transition:transform .15s ease, border-color .15s ease;\n  }\n  .fg-header-inject .fg-icon-btn:hover{\n    transform:scale(1.06);\n    border-color:#b5502f;\n  }\n  .fg-header-inject .fg-icon-btn svg{\n    display:block;\n  }\n<\/style>\n\n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/css2?family=Afacad:wght@400;600&display=swap\">\n\n<div id=\"fg-projectgrid\">\n  <div class=\"fg-grid\" id=\"fg-grid\">\n    <div class=\"fg-status\">Laden\u2026<\/div>\n  <\/div>\n<\/div>\n\n<script>\n(function(){\n  const gridEl = document.getElementById('fg-grid');\n  let currentProjects = null;\n  let currentCols = null;\n  let openCardId = null;\n\n  (function injectHeaderBits(){\n    const headerLeft = document.querySelector('.header__col-left');\n    const headerBrand = headerLeft ? headerLeft.querySelector('.header__brand') : null;\n    if (headerBrand && !document.querySelector('.fg-header-inject')){\n      const CAMERA_SVG = '<svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"6.5\" width=\"12\" height=\"11\" rx=\"2\"\/><path d=\"M15 10 L20.5 6.5 L20.5 17.5 L15 14 Z\"\/><\/svg>';\n      const ANTENNA_SVG = '<svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"5\" y=\"10\" width=\"14\" height=\"9\" rx=\"2\"\/><line x1=\"12\" y1=\"10\" x2=\"12\" y2=\"4\"\/><circle cx=\"12\" cy=\"3\" r=\"1.3\" fill=\"currentColor\" stroke=\"none\"\/><circle cx=\"8.5\" cy=\"14.5\" r=\"0.9\" fill=\"currentColor\" stroke=\"none\"\/><circle cx=\"12\" cy=\"14.5\" r=\"0.9\" fill=\"currentColor\" stroke=\"none\"\/><circle cx=\"15.5\" cy=\"14.5\" r=\"0.9\" fill=\"currentColor\" stroke=\"none\"\/><\/svg>';\n      const wrap = document.createElement('span');\n      wrap.className = 'fg-header-inject';\n      wrap.innerHTML = `\n        <a href=\"https:\/\/delindvanwijngaarden.com\/?page_id=362\" class=\"fg-icon-btn\" title=\"Films\" aria-label=\"Bekijk films\">${CAMERA_SVG}<\/a>\n        <a href=\"https:\/\/delindvanwijngaarden.com\/?page_id=542\" class=\"fg-icon-btn\" title=\"Installaties\" aria-label=\"Bekijk installaties\">${ANTENNA_SVG}<\/a>\n        <a href=\"https:\/\/delindvanwijngaarden.com\/?page_id=489\" class=\"fg-icon-btn\" title=\"Tekeningen\" aria-label=\"Bekijk tekeningen\">&#9998;<\/a>\n        <a href=\"mailto:annekedelindvanwijngaarden@gmail.com?subject=Bericht%20via%20de%20website\" class=\"fg-icon-btn\" title=\"Stuur een berichtje\" aria-label=\"Stuur Anneke een berichtje\">&#9993;<\/a>\n      `;\n      headerBrand.insertAdjacentElement('afterend', wrap);\n    }\n    if (headerLeft && !document.querySelector('.fg-bio-text-left')){\n      const bio = document.createElement('div');\n      bio.className = 'fg-bio-text-left';\n      bio.textContent = 'is een documentairemaker uit Amsterdam.';\n      headerLeft.appendChild(bio);\n    }\n  })();\n  let layoutPending = false;\n\n  function decodeHtml(html){\n    const el = document.createElement('div');\n    el.innerHTML = html;\n    return el.textContent.trim();\n  }\n\n  function extractExtras(contentHtml){\n    const el = document.createElement('div');\n    el.innerHTML = contentHtml;\n    const imgs = Array.from(el.querySelectorAll('img')).map(img => img.getAttribute('src')).filter(Boolean);\n    const paragraphs = Array.from(el.querySelectorAll('p'))\n      .map(p => p.textContent.trim())\n      .filter(t => t.length > 0);\n    return { extraPhotos: imgs, moreText: paragraphs.join('\\n\\n') };\n  }\n\n  function closeAll(exceptId){\n    document.querySelectorAll('#fg-projectgrid .fg-card.open').forEach(c => {\n      if (c.id !== exceptId){\n        c.classList.remove('open');\n        c.querySelector('.fg-thumb').setAttribute('aria-expanded','false');\n      }\n    });\n  }\n\n  function columnCountForWidth(){\n    const w = gridEl.getBoundingClientRect().width || window.innerWidth;\n    if (w <= 640) return 1;\n    return 2;\n  }\n\n  function buildCard(p){\n    const card = document.createElement('article');\n    card.className = 'fg-card';\n    card.id = 'fg-card-' + p.id;\n\n    const photos = [p.cover, ...p.extraPhotos];\n    card.dataset.photos = JSON.stringify(photos);\n\n    const dotsHtml = photos.length > 1\n      ? `<div class=\"fg-dots\">${photos.map((_, i) => `<button type=\"button\" class=\"fg-dot${i === 0 ? ' active' : ''}\" data-idx=\"${i}\" aria-label=\"Foto ${i + 1} van ${photos.length}\"><\/button>`).join('')}<\/div>`\n      : '';\n\n    const moreHtml = p.moreText ? `\n        <p class=\"fg-more-text\">${p.moreText.replace(\/\\n\\n\/g, '<\/p><p class=\"fg-more-text\">')}<\/p>\n        <button type=\"button\" class=\"fg-read-more\">lees meer<\/button>` : '';\n\n    card.innerHTML = `\n      <button class=\"fg-thumb\" aria-expanded=\"false\">\n        <img decoding=\"async\" src=\"${p.cover}\" alt=\"${p.title}\" loading=\"lazy\">\n      <\/button>\n      <div class=\"fg-panel\">\n        <div class=\"fg-panel-inner\">\n          ${dotsHtml}\n          <h2>${p.title}<\/h2>\n          <p>${p.excerpt}<\/p>${moreHtml}\n        <\/div>\n      <\/div>\n    `;\n    return card;\n  }\n\n  function estimatedHeight(p){\n    \/\/ Rough relative height estimate so columns start reasonably balanced.\n    \/\/ Uses cover aspect ratio when known, else a default.\n    const ratio = (p.coverHeight && p.coverWidth) ? (p.coverHeight \/ p.coverWidth) : 1.2;\n    return 300 * ratio + 40;\n  }\n\n  function layout(){\n    if (!currentProjects) return;\n    if (openCardId){\n      \/\/ Never rebuild columns while a card is open: that would move it to a\n      \/\/ different column mid-read. Try again once it's closed.\n      layoutPending = true;\n      return;\n    }\n    const cols = columnCountForWidth();\n    if (cols === currentCols) return; \/\/ no structural change needed\n    currentCols = cols;\n    layoutPending = false;\n\n    gridEl.innerHTML = '';\n    if (!currentProjects.length){\n      gridEl.innerHTML = '<div class=\"fg-status\">Nog niets toegevoegd.<\/div>';\n      return;\n    }\n\n    const colEls = [];\n    const colHeights = [];\n    for (let i = 0; i < cols; i++){\n      const colEl = document.createElement('div');\n      colEl.className = 'fg-col';\n      gridEl.appendChild(colEl);\n      colEls.push(colEl);\n      colHeights.push(0);\n    }\n\n    currentProjects.forEach(p => {\n      \/\/ place into the currently-shortest column, keeping already-open cards intact on rebuild\n      let shortest = 0;\n      for (let i = 1; i < cols; i++){\n        if (colHeights[i] < colHeights[shortest]) shortest = i;\n      }\n      const card = buildCard(p);\n      colEls[shortest].appendChild(card);\n      colHeights[shortest] += estimatedHeight(p);\n    });\n  }\n\n  gridEl.addEventListener('click', (e) => {\n    const dotBtn = e.target.closest('.fg-dot');\n    const thumbBtn = e.target.closest('.fg-thumb');\n    const moreBtn = e.target.closest('.fg-read-more');\n\n    if (moreBtn){\n      const paras = [];\n      let sib = moreBtn.previousElementSibling;\n      while (sib && sib.classList && sib.classList.contains('fg-more-text')){\n        paras.unshift(sib);\n        sib = sib.previousElementSibling;\n      }\n      const hidden = paras.filter(el => !el.classList.contains('shown'));\n      if (hidden.length){\n        hidden[0].classList.add('shown');\n      }\n      const stillHidden = paras.filter(el => !el.classList.contains('shown'));\n      if (stillHidden.length){\n        moreBtn.textContent = 'Lees nog meer';\n      } else {\n        moreBtn.remove();\n      }\n      return;\n    }\n    if (dotBtn){\n      const card = dotBtn.closest('.fg-card');\n      let photos = [];\n      try { photos = JSON.parse(card.dataset.photos || '[]'); } catch(e){ photos = []; }\n      const idx = parseInt(dotBtn.dataset.idx, 10);\n      if (photos[idx]){\n        const mainImg = card.querySelector('.fg-thumb img');\n        mainImg.src = photos[idx];\n        card.querySelectorAll('.fg-dot').forEach(d => d.classList.toggle('active', d === dotBtn));\n      }\n      return;\n    }\n    if (thumbBtn){\n      const card = thumbBtn.closest('.fg-card');\n      const isOpen = card.classList.contains('open');\n      closeAll(card.id);\n      card.classList.toggle('open', !isOpen);\n      thumbBtn.setAttribute('aria-expanded', String(!isOpen));\n      openCardId = isOpen ? null : card.id;\n      if (!openCardId && layoutPending) layout();\n    }\n  });\n\n  let resizeTimer = null;\n  window.addEventListener('resize', () => {\n    clearTimeout(resizeTimer);\n    resizeTimer = setTimeout(layout, 200);\n  });\n\n  async function load(){\n    try{\n      const catRes = await fetch('\/wp-json\/wp\/v2\/categories?slug=projecten');\n      const cats = await catRes.json();\n      if (!cats.length){\n        gridEl.innerHTML = '<div class=\"fg-status\">Categorie niet gevonden.<\/div>';\n        return;\n      }\n      const catId = cats[0].id;\n      const instCatRes = await fetch('\/wp-json\/wp\/v2\/categories?slug=installaties');\n      const instCats = await instCatRes.json();\n      const excludeParam = instCats.length ? '&categories_exclude=' + instCats[0].id : '';\n      const postsRes = await fetch('\/wp-json\/wp\/v2\/posts?categories=' + catId + excludeParam + '&per_page=100&_embed&orderby=date&order=asc');\n      const posts = await postsRes.json();\n\n      currentProjects = posts.map(post => {\n        const media = post._embedded && post._embedded['wp:featuredmedia'] ? post._embedded['wp:featuredmedia'][0] : null;\n        const cover = media ? media.source_url : '';\n        const details = media && media.media_details ? media.media_details : null;\n        const { extraPhotos, moreText } = extractExtras(post.content.rendered);\n        return {\n          id: post.id,\n          title: decodeHtml(post.title.rendered),\n          excerpt: decodeHtml(post.excerpt.rendered),\n          moreText: moreText,\n          cover: cover,\n          coverWidth: details ? details.width : null,\n          coverHeight: details ? details.height : null,\n          extraPhotos: extraPhotos\n        };\n      }).filter(p => p.cover);\n\n      currentCols = null; \/\/ force initial layout\n      layout();\n    } catch(err){\n      gridEl.innerHTML = '<div class=\"fg-status\">Er ging iets mis bij het laden.<\/div>';\n    }\n  }\n\n  load();\n})();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Laden\u2026<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_eb_attr":"","footnotes":""},"categories":[],"tags":[],"class_list":["post-362","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/delindvanwijngaarden.com\/en\/wp-json\/wp\/v2\/pages\/362","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/delindvanwijngaarden.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/delindvanwijngaarden.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/delindvanwijngaarden.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/delindvanwijngaarden.com\/en\/wp-json\/wp\/v2\/comments?post=362"}],"version-history":[{"count":79,"href":"https:\/\/delindvanwijngaarden.com\/en\/wp-json\/wp\/v2\/pages\/362\/revisions"}],"predecessor-version":[{"id":640,"href":"https:\/\/delindvanwijngaarden.com\/en\/wp-json\/wp\/v2\/pages\/362\/revisions\/640"}],"wp:attachment":[{"href":"https:\/\/delindvanwijngaarden.com\/en\/wp-json\/wp\/v2\/media?parent=362"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/delindvanwijngaarden.com\/en\/wp-json\/wp\/v2\/categories?post=362"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/delindvanwijngaarden.com\/en\/wp-json\/wp\/v2\/tags?post=362"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}