{"id":80,"date":"2026-08-14T16:44:38","date_gmt":"2026-08-14T16:44:38","guid":{"rendered":"https:\/\/phillincolorful.site\/?page_id=80"},"modified":"2026-08-14T17:45:06","modified_gmt":"2026-08-14T17:45:06","slug":"gallery","status":"publish","type":"page","link":"https:\/\/phillincolorful.site\/","title":{"rendered":"Drip Disc Dyes Gallery"},"content":{"rendered":"\n<!-- Google Fonts: Poppins -->\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700;800&#038;display=swap\" rel=\"stylesheet\">\n\n<style>\n  .dg-hero-section {\n    width: 100%;\n    max-width: 1200px;\n    margin: 0 auto;\n    text-align: center;\n    padding: 32px 16px 40px;\n    box-sizing: border-box;\n    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n    border-bottom: 1px solid #e0f2fe; \/* Pale blue subtle divider *\/\n  }\n\n  \/* Poppins Hero Paragraph \/ Lead Text *\/\n  .dg-hero-text {\n    font-family: 'Poppins', sans-serif;\n    font-size: clamp(16px, 1.8vw, 19px);\n    line-height: 1.6;\n    max-width: 820px;\n    margin: 0 auto 28px;\n    color: #475569;\n    font-weight: 400;\n  }\n\n  .dg-hero-buttons {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n    align-items: center;\n    gap: 16px;\n  }\n\n  .dg-btn {\n    font-family: 'Poppins', sans-serif;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 14px 28px;\n    border-radius: 9999px; \/* Fully rounded pill shape *\/\n    font-size: 14px;\n    font-weight: 600;\n    text-decoration: none;\n    transition: all 0.25s ease;\n    cursor: pointer;\n    box-sizing: border-box;\n  }\n\n  .dg-btn:hover {\n    transform: translateY(-2px);\n  }\n\n  \/* Primary Button: #EDD295 (Pale Yellow \/ Sand) *\/\n  .dg-btn-primary {\n    background: #EDD295;\n    color: #4a3605 !important;\n    border: 1px solid #e3c47e;\n    box-shadow: 0 4px 14px rgba(237, 210, 149, 0.45);\n  }\n\n  .dg-btn-primary:hover {\n    background: #e5c784;\n    box-shadow: 0 6px 18px rgba(237, 210, 149, 0.65);\n  }\n\n  \/* Secondary Button: #96BBCD (Pale Blue \/ Slate) *\/\n  .dg-btn-secondary {\n    background: #96BBCD;\n    color: #0f2735 !important;\n    border: 1px solid #82abc0;\n    box-shadow: 0 4px 14px rgba(150, 187, 205, 0.45);\n  }\n\n  .dg-btn-secondary:hover {\n    background: #84acc0;\n    color: #091a24 !important;\n    box-shadow: 0 6px 18px rgba(150, 187, 205, 0.65);\n  }\n<\/style>\n\n<section class=\"dg-hero-section\">\n  <p class=\"dg-hero-text\">\n    Browse the Full Disc Dye Gallery &#8211; Our complete image gallery is now available so you can see almost every disc we have ever created!\n  <\/p>\n  <div class=\"dg-hero-buttons\">\n    <a href=\"https:\/\/dripdiscdyes.etsy.com\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"dg-btn dg-btn-primary\">\n      Shop what&#8217;s in stock on Etsy\n    <\/a>\n    <a href=\"\/contact\" class=\"dg-btn dg-btn-secondary\">\n      Message for custom orders\n    <\/a>\n  <\/div>\n<\/section>\n\n\n\n<!-- Google Fonts: Poppins -->\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600;700;800&#038;display=swap\" rel=\"stylesheet\">\n\n<!-- PapaParse for parsing the CSV -->\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/papaparse@5.4.1\/papaparse.min.js\"><\/script>\n\n<style>\n  #dye-gallery-wrapper {\n    max-width: 1400px;\n    margin: 0 auto;\n    padding: 32px 16px;\n    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n    color: #1f2937;\n    background-color: #F4F2EB;\n    box-sizing: border-box;\n    border-radius: 12px;\n  }\n\n  \/* Filter Controls Panel *\/\n  .dg-controls-panel {\n    background: #ffffff;\n    border: 1px solid #e5e3dc;\n    border-radius: 12px;\n    padding: 20px;\n    margin-bottom: 24px;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);\n  }\n  .dg-controls {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));\n    gap: 12px;\n  }\n  .dg-controls input, .dg-controls select {\n    width: 100%;\n    padding: 10px 14px;\n    border: 1px solid #d5d3cb;\n    border-radius: 8px;\n    font-size: 14px;\n    font-family: 'Poppins', sans-serif;\n    font-weight: 400;\n    background: #ffffff;\n    color: #111827;\n    outline: none;\n    transition: all 0.2s ease;\n    box-sizing: border-box;\n  }\n  .dg-controls input::placeholder {\n    color: #9ca3af;\n    font-family: 'Poppins', sans-serif;\n  }\n  .dg-controls input:focus, .dg-controls select:focus {\n    border-color: #96BBCD;\n    box-shadow: 0 0 0 3px rgba(150, 187, 205, 0.25);\n  }\n\n  \/* Gallery Stats *\/\n  .dg-stats {\n    font-size: 14px;\n    color: #6b7280;\n    margin-bottom: 18px;\n    font-weight: 500;\n    font-family: 'Poppins', sans-serif;\n  }\n\n  \/* Grid Layout: Strictly 5 Cards across on wide screens *\/\n  .dg-grid {\n    display: grid;\n    grid-template-columns: repeat(5, minmax(0, 1fr));\n    gap: 18px;\n  }\n\n  \/* Responsive Grid Breakpoints *\/\n  @media (max-width: 1200px) {\n    .dg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }\n  }\n  @media (max-width: 960px) {\n    .dg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }\n  }\n  @media (max-width: 680px) {\n    .dg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n  }\n  @media (max-width: 440px) {\n    .dg-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }\n  }\n\n  \/* Disc Card *\/\n  .dg-card {\n    background: #ffffff;\n    border-radius: 10px;\n    overflow: hidden;\n    border: 1px solid #e5e3dc;\n    cursor: pointer;\n    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;\n    display: flex;\n    flex-direction: column;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);\n  }\n  .dg-card:hover {\n    transform: translateY(-4px);\n    border-color: #96BBCD;\n    box-shadow: 0 10px 20px -3px rgba(150, 187, 205, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.04);\n  }\n  .dg-card-img-wrap {\n    width: 100%;\n    aspect-ratio: 1 \/ 1;\n    overflow: hidden;\n    background: #eceae1;\n  }\n  .dg-card img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    display: block;\n    transition: transform 0.3s ease;\n  }\n  .dg-card:hover img {\n    transform: scale(1.03);\n  }\n\n  \/* Card Info *\/\n  .dg-card-info {\n    padding: 12px 14px;\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    flex-grow: 1;\n    background: #ffffff;\n  }\n  .dg-card-title {\n    font-family: 'Poppins', sans-serif;\n    font-weight: 700;\n    font-size: 15px;\n    margin: 0;\n    color: #111827;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n  .dg-card-sub {\n    font-family: 'Poppins', sans-serif;\n    font-size: 12px;\n    color: #6b7280;\n    margin: 0;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n  .dg-badges {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 4px;\n    margin-top: 6px;\n  }\n  .dg-badge {\n    font-family: 'Poppins', sans-serif;\n    display: inline-block;\n    background: #F4F2EB;\n    color: #374151;\n    font-size: 10px;\n    padding: 2px 6px;\n    border-radius: 4px;\n    font-weight: 500;\n    border: 1px solid #e0ded5;\n  }\n  .dg-badge-color {\n    background: #eef6f9;\n    color: #0f2735;\n    border-color: #96BBCD;\n  }\n\n  \/* Lightbox Modal *\/\n  .dg-modal {\n    display: none;\n    position: fixed;\n    inset: 0;\n    background: rgba(17, 24, 39, 0.7);\n    backdrop-filter: blur(4px);\n    z-index: 999999;\n    align-items: center;\n    justify-content: center;\n    padding: 16px;\n    font-family: 'Poppins', sans-serif;\n  }\n  .dg-modal-content {\n    background: #F4F2EB;\n    border-radius: 16px;\n    max-width: 520px;\n    width: 100%;\n    max-height: 90vh;\n    overflow-y: auto;\n    position: relative;\n    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n    border: 1px solid #e0ded5;\n  }\n  .dg-modal-img {\n    width: 100%;\n    aspect-ratio: 1 \/ 1;\n    object-fit: cover;\n    display: block;\n    background: #eceae1;\n  }\n  .dg-modal-body {\n    padding: 24px;\n  }\n  .dg-close-btn {\n    position: absolute;\n    top: 14px;\n    right: 14px;\n    background: #ffffff;\n    color: #374151;\n    border: 1px solid #d5d3cb;\n    width: 34px;\n    height: 34px;\n    border-radius: 50%;\n    cursor: pointer;\n    font-size: 18px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n    transition: all 0.2s ease;\n  }\n  .dg-close-btn:hover {\n    background: #eceae1;\n    color: #111827;\n  }\n  .dg-modal-table {\n    width: 100%;\n    margin-top: 16px;\n    font-size: 13px;\n    border-collapse: collapse;\n    font-family: 'Poppins', sans-serif;\n  }\n  .dg-modal-table td {\n    padding: 8px 0;\n    border-bottom: 1px solid #e0ded5;\n    color: #374151;\n  }\n  .dg-modal-table td:first-child {\n    font-weight: 600;\n    color: #6b7280;\n    width: 36%;\n  }\n<\/style>\n\n<div id=\"dye-gallery-wrapper\">\n  <!-- Controls Panel -->\n  <div class=\"dg-controls-panel\">\n    <div class=\"dg-controls\">\n      <input type=\"text\" id=\"dg-search\" placeholder=\"Search mold, plastic, colors, notes...\" \/>\n      <select id=\"dg-brand-filter\"><option value=\"\">All Brands<\/option><\/select>\n      <select id=\"dg-mold-filter\"><option value=\"\">All Molds<\/option><\/select>\n      <select id=\"dg-plastic-filter\"><option value=\"\">All Plastics<\/option><\/select>\n      <select id=\"dg-style-filter\"><option value=\"\">All Dye Styles<\/option><\/select>\n      <select id=\"dg-color-filter\"><option value=\"\">All Colors<\/option><\/select>\n      <select id=\"dg-limit-filter\">\n        <option value=\"10\">Show 10<\/option>\n        <option value=\"25\" selected>Show 25<\/option>\n        <option value=\"50\">Show 50<\/option>\n        <option value=\"all\">Show All<\/option>\n      <\/select>\n    <\/div>\n  <\/div>\n\n  <div class=\"dg-stats\">\n    <span id=\"dg-stats\">Showing discs&#8230;<\/span>\n  <\/div>\n\n  <!-- Results Grid -->\n  <div class=\"dg-grid\" id=\"dg-grid\">\n    <p style=\"grid-column: 1\/-1; text-align: center; color: #6b7280; padding: 40px 0;\">Loading custom dyes&#8230;<\/p>\n  <\/div>\n<\/div>\n\n<!-- Lightbox Modal -->\n<div class=\"dg-modal\" id=\"dg-modal\" onclick=\"closeDgModal(event)\">\n  <div class=\"dg-modal-content\" onclick=\"event.stopPropagation()\">\n    <button class=\"dg-close-btn\" onclick=\"closeDgModal()\">&times;<\/button>\n    <img decoding=\"async\" id=\"dg-modal-img\" class=\"dg-modal-img\" src=\"\" alt=\"Custom Dye Preview\" \/>\n    <div class=\"dg-modal-body\">\n      <h3 id=\"dg-modal-title\" style=\"margin: 0 0 4px 0; font-size: 20px; color: #111827; font-weight: 700; font-family: 'Poppins', sans-serif;\"><\/h3>\n      <p id=\"dg-modal-sub\" style=\"color: #6b7280; font-size: 14px; margin: 0 0 16px 0; font-family: 'Poppins', sans-serif;\"><\/p>\n      \n      <table class=\"dg-modal-table\">\n        <tbody>\n          <tr><td>Dye Style:<\/td><td id=\"dg-m-style\">&#8211;<\/td><\/tr>\n          <tr><td>Plastic:<\/td><td id=\"dg-m-plastic\">&#8211;<\/td><\/tr>\n          <tr><td>Dye Colors:<\/td><td id=\"dg-m-colors\">&#8211;<\/td><\/tr>\n          <tr><td>Disc \/ Rim:<\/td><td id=\"dg-m-base\">&#8211;<\/td><\/tr>\n          <tr><td>Date Completed:<\/td><td id=\"dg-m-date\">&#8211;<\/td><\/tr>\n          <tr><td>Reference #:<\/td><td id=\"dg-m-ref\">&#8211;<\/td><\/tr>\n        <\/tbody>\n      <\/table>\n\n      <div id=\"dg-modal-notes-wrap\" style=\"margin-top: 16px; padding-top: 14px; border-top: 1px solid #e0ded5;\">\n        <p style=\"font-weight: 600; font-size: 13px; color: #374151; margin: 0 0 4px 0; font-family: 'Poppins', sans-serif;\">Notes \/ Recipe:<\/p>\n        <p id=\"dg-modal-notes\" style=\"font-size: 14px; line-height: 1.5; color: #4b5563; margin: 0; font-family: 'Poppins', sans-serif;\"><\/p>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\n  const CSV_URL = \"https:\/\/phillincolorful.site\/wp-content\/uploads\/2026\/08\/disc-gallery.csv\";\n\n  let allDiscs = [];\n\n  function initGallery() {\n    Papa.parse(CSV_URL, {\n      download: true,\n      header: true,\n      skipEmptyLines: true,\n      complete: function(results) {\n        if (!results.data || results.data.length === 0) {\n          document.getElementById('dg-grid').innerHTML = \n            '<p style=\"grid-column: 1\/-1; text-align: center; color: #dc2626; padding: 40px 0;\">No discs found in CSV.<\/p>';\n          return;\n        }\n\n        allDiscs = results.data.map(row => {\n          const clean = {};\n          Object.keys(row).forEach(key => {\n            clean[key.trim().toLowerCase()] = row[key] ? row[key].trim() : '';\n          });\n          return clean;\n        });\n\n        populateFilters(allDiscs);\n        applyFilters();\n      },\n      error: function(err) {\n        console.error(\"PapaParse Error:\", err);\n        document.getElementById('dg-grid').innerHTML = \n          '<p style=\"grid-column: 1\/-1; text-align: center; color: #dc2626; padding: 40px 0;\">Error loading CSV data. Check file permissions.<\/p>';\n      }\n    });\n  }\n\n  function resolveImageUrl(rawImg) {\n    if (!rawImg) return 'https:\/\/placehold.co\/400x400\/eceae1\/9ca3af?text=No+Image';\n    let url = rawImg.trim();\n    if (!url.startsWith('http:\/\/') && !url.startsWith('https:\/\/') && !url.startsWith('\/')) {\n      url = 'https:\/\/phillincolorful.site\/wp-content\/uploads\/2026\/08\/' + url;\n    }\n    if (url.startsWith('http:\/\/')) {\n      url = url.replace('http:\/\/', 'https:\/\/');\n    }\n    return url;\n  }\n\n  function populateFilters(data) {\n    const brands = new Set();\n    const molds = new Set();\n    const plastics = new Set();\n    const styles = new Set();\n    const colors = new Set();\n\n    data.forEach(item => {\n      if (item['brand']) brands.add(item['brand']);\n      if (item['mold']) molds.add(item['mold']);\n      if (item['plastic']) plastics.add(item['plastic']);\n      if (item['dye style']) styles.add(item['dye style']);\n\n      ['disc color', 'rim color', 'primary color', 'secondary color'].forEach(colKey => {\n        if (item[colKey]) {\n          item[colKey].split(',').forEach(c => {\n            const trimmed = c.trim();\n            if (trimmed) colors.add(trimmed);\n          });\n        }\n      });\n    });\n\n    const addOptions = (selectId, setValues) => {\n      const select = document.getElementById(selectId);\n      Array.from(setValues).sort((a, b) => a.localeCompare(b, undefined, {sensitivity: 'base'})).forEach(val => {\n        if (val) {\n          const opt = document.createElement('option');\n          opt.value = val;\n          opt.textContent = val;\n          select.appendChild(opt);\n        }\n      });\n    };\n\n    addOptions('dg-brand-filter', brands);\n    addOptions('dg-mold-filter', molds);\n    addOptions('dg-plastic-filter', plastics);\n    addOptions('dg-style-filter', styles);\n    addOptions('dg-color-filter', colors);\n\n    document.getElementById('dg-search').addEventListener('input', applyFilters);\n    document.getElementById('dg-brand-filter').addEventListener('change', applyFilters);\n    document.getElementById('dg-mold-filter').addEventListener('change', applyFilters);\n    document.getElementById('dg-plastic-filter').addEventListener('change', applyFilters);\n    document.getElementById('dg-style-filter').addEventListener('change', applyFilters);\n    document.getElementById('dg-color-filter').addEventListener('change', applyFilters);\n    document.getElementById('dg-limit-filter').addEventListener('change', applyFilters);\n  }\n\n  function applyFilters() {\n    const query = document.getElementById('dg-search').value.toLowerCase().trim();\n    const selBrand = document.getElementById('dg-brand-filter').value.toLowerCase();\n    const selMold = document.getElementById('dg-mold-filter').value.toLowerCase();\n    const selPlastic = document.getElementById('dg-plastic-filter').value.toLowerCase();\n    const selStyle = document.getElementById('dg-style-filter').value.toLowerCase();\n    const selColor = document.getElementById('dg-color-filter').value.toLowerCase();\n    const selLimit = document.getElementById('dg-limit-filter').value;\n\n    const filtered = allDiscs.filter(disc => {\n      const brand = (disc['brand'] || '').toLowerCase();\n      const mold = (disc['mold'] || '').toLowerCase();\n      const plastic = (disc['plastic'] || '').toLowerCase();\n      const discColor = (disc['disc color'] || '').toLowerCase();\n      const rimColor = (disc['rim color'] || '').toLowerCase();\n      const style = (disc['dye style'] || '').toLowerCase();\n      const pColor = (disc['primary color'] || '').toLowerCase();\n      const sColor = (disc['secondary color'] || '').toLowerCase();\n      const notes = (disc['misc notes'] || '').toLowerCase();\n\n      const searchTarget = `${mold} ${plastic} ${discColor} ${rimColor} ${style} ${pColor} ${sColor} ${notes}`;\n      const matchesSearch = !query || searchTarget.includes(query);\n\n      const matchesBrand = !selBrand || brand === selBrand;\n      const matchesMold = !selMold || mold === selMold;\n      const matchesPlastic = !selPlastic || plastic === selPlastic;\n      const matchesStyle = !selStyle || style === selStyle;\n\n      const discColorsCombined = `${discColor},${rimColor},${pColor},${sColor}`\n        .split(',')\n        .map(c => c.trim().toLowerCase());\n      const matchesColor = !selColor || discColorsCombined.includes(selColor);\n\n      return matchesSearch && matchesBrand && matchesMold && matchesPlastic && matchesStyle && matchesColor;\n    });\n\n    const limitNum = selLimit === 'all' ? filtered.length : parseInt(selLimit, 10);\n    const displayedDiscs = filtered.slice(0, limitNum);\n\n    renderDiscs(displayedDiscs, filtered.length);\n  }\n\n  function renderDiscs(discs, totalMatches) {\n    const grid = document.getElementById('dg-grid');\n    const stats = document.getElementById('dg-stats');\n    \n    if (discs.length === totalMatches) {\n      stats.textContent = `Showing ${discs.length} of ${allDiscs.length} custom dyes`;\n    } else {\n      stats.textContent = `Showing ${discs.length} of ${totalMatches} matching dyes (${allDiscs.length} total in gallery)`;\n    }\n\n    if (!discs.length) {\n      grid.innerHTML = '<p style=\"grid-column: 1\/-1; text-align: center; color: #6b7280; padding: 40px 0; font-family: \\'Poppins\\', sans-serif;\">No custom dyes match your filter selection.<\/p>';\n      return;\n    }\n\n    grid.innerHTML = discs.map((disc, idx) => {\n      const imgUrl = resolveImageUrl(disc['image']);\n      const mold = disc['mold'] || 'Custom Dye';\n      const brand = disc['brand'] || '';\n      const plastic = disc['plastic'] || '';\n      const style = disc['dye style'] || 'Custom';\n      const pColor = disc['primary color'] || '';\n\n      return `\n        <div class=\"dg-card\" onclick=\"openDgModal(${idx})\">\n          <div class=\"dg-card-img-wrap\">\n            <img decoding=\"async\" src=\"${imgUrl}\" alt=\"${brand} ${mold}\" loading=\"lazy\" onerror=\"this.src='https:\/\/placehold.co\/400x400\/eceae1\/9ca3af?text=Image+Unavailable'\" \/>\n          <\/div>\n          <div class=\"dg-card-info\">\n            <h4 class=\"dg-card-title\">${mold}<\/h4>\n            <p class=\"dg-card-sub\">${brand}${plastic ? ' \u2022 ' + plastic : ''}<\/p>\n            <div class=\"dg-badges\">\n              <span class=\"dg-badge\">${style}<\/span>\n              ${pColor ? `<span class=\"dg-badge dg-badge-color\">${pColor}<\/span>` : ''}\n            <\/div>\n          <\/div>\n        <\/div>\n      `;\n    }).join('');\n\n    window._currentFilteredDiscs = discs;\n  }\n\n  function openDgModal(idx) {\n    const disc = (window._currentFilteredDiscs || allDiscs)[idx];\n    if (!disc) return;\n\n    document.getElementById('dg-modal-img').src = resolveImageUrl(disc['image']);\n    document.getElementById('dg-modal-title').textContent = `${disc['brand'] || ''} ${disc['mold'] || 'Custom Dye'}`.trim();\n    document.getElementById('dg-modal-sub').textContent = disc['plastic'] ? `Plastic: ${disc['plastic']}` : '';\n    \n    document.getElementById('dg-m-style').textContent = disc['dye style'] || '-';\n    document.getElementById('dg-m-plastic').textContent = disc['plastic'] || '-';\n    \n    const dyeColors = [disc['primary color'], disc['secondary color']].filter(Boolean).join(', ');\n    document.getElementById('dg-m-colors').textContent = dyeColors || '-';\n    \n    const baseColors = [disc['disc color'], disc['rim color'] ? `Rim: ${disc['rim color']}` : ''].filter(Boolean).join(' \/ ');\n    document.getElementById('dg-m-base').textContent = baseColors || '-';\n    \n    document.getElementById('dg-m-date').textContent = disc['date completed'] || '-';\n    document.getElementById('dg-m-ref').textContent = disc['reference'] ? `#${disc['reference']}` : '-';\n\n    const notes = disc['misc notes'];\n    const notesWrap = document.getElementById('dg-modal-notes-wrap');\n    if (notes) {\n      document.getElementById('dg-modal-notes').textContent = notes;\n      notesWrap.style.display = 'block';\n    } else {\n      notesWrap.style.display = 'none';\n    }\n\n    document.getElementById('dg-modal').style.display = 'flex';\n  }\n\n  function closeDgModal() {\n    document.getElementById('dg-modal').style.display = 'none';\n  }\n\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', initGallery);\n  } else {\n    initGallery();\n  }\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Browse the Full Disc Dye Gallery &#8211; Our complete image gallery is now available so you can see almost every disc we have ever created! Shop what&#8217;s in stock on Etsy Message for custom orders All Brands All Molds All Plastics All Dye Styles All Colors Show 10Show 25Show 50Show All Showing discs&#8230; Loading custom [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-80","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/phillincolorful.site\/index.php?rest_route=\/wp\/v2\/pages\/80","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/phillincolorful.site\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/phillincolorful.site\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/phillincolorful.site\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/phillincolorful.site\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=80"}],"version-history":[{"count":7,"href":"https:\/\/phillincolorful.site\/index.php?rest_route=\/wp\/v2\/pages\/80\/revisions"}],"predecessor-version":[{"id":121,"href":"https:\/\/phillincolorful.site\/index.php?rest_route=\/wp\/v2\/pages\/80\/revisions\/121"}],"wp:attachment":[{"href":"https:\/\/phillincolorful.site\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=80"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}