{"id":2290,"date":"2026-03-16T16:17:32","date_gmt":"2026-03-16T08:17:32","guid":{"rendered":"https:\/\/monarchmodelsus.com\/?page_id=2290"},"modified":"2026-03-16T17:42:34","modified_gmt":"2026-03-16T09:42:34","slug":"directory","status":"publish","type":"page","link":"https:\/\/monarchmodelsus.com\/?page_id=2290","title":{"rendered":"DIRECTORY"},"content":{"rendered":"<div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-1 fusion-flex-container has-pattern-background has-mask-background nonhundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-flex-wrap:wrap;\" ><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"max-width:1248px;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-0 fusion_builder_column_1_1 1_1 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:0px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"monarch-models-page\" id=\"monarchModelsPage\">\n  <div class=\"monarch-models-toolbar\">\n    <div class=\"monarch-models-regions\" id=\"monarchModelsRegions\"><\/div>\n    <div class=\"monarch-models-cats\" id=\"monarchModelsCats\"><\/div>\n  <\/div>\n\n  <div class=\"monarch-models-grid\" id=\"monarchModelsGrid\"><\/div>\n<\/div>\n\n<style>\n.monarch-models-page{\n  width:100vw;\n  max-width:100vw;\n  margin-left:calc(50% - 50vw);\n  margin-right:calc(50% - 50vw);\n  background:#f3f3f3;\n  overflow:hidden;\n}\n\n.monarch-models-toolbar{\n  padding:46px 48px 24px;\n  background:#f3f3f3;\n}\n\n.monarch-models-regions,\n.monarch-models-cats{\n  display:flex;\n  flex-wrap:wrap;\n  justify-content:center;\n  gap:34px;\n}\n\n.monarch-models-regions{\n  margin-bottom:50px;\n}\n\n.monarch-models-regions button,\n.monarch-models-cats button{\n  border:none;\n  background:none;\n  padding:0;\n  margin:0;\n  cursor:pointer;\n  text-transform:uppercase;\n}\n\n.monarch-models-regions button{\n  color:#787878;\n  font-size:23px;\n  font-weight:600;\n}\n\n.monarch-models-cats button{\n  color:#111;\n  font-size:27px;\n  font-weight:700;\n}\n\n.monarch-models-regions button.is-active,\n.monarch-models-cats button.is-active{\n  color:#000;\n}\n\n\/* \u6539\u6210\u5c0f\u5934\u50cf\u5bab\u683c\uff0c\u6700\u5927 9 \u5217 *\/\n.monarch-models-grid{\n  display:grid;\n  grid-template-columns:repeat(9, minmax(0, 1fr));\n  gap:1px;\n  background:#d8d8d8;\n  width:100%;\n}\n\n.monarch-model-card{\n  display:block;\n  background:#fff;\n  text-decoration:none;\n  color:inherit;\n}\n\n.monarch-model-card__media{\n  width:100%;\n  aspect-ratio:0.78\/1;\n  overflow:hidden;\n  background:#ddd;\n}\n\n.monarch-model-card__media img,\n.monarch-model-card__media video{\n  width:100%;\n  height:100%;\n  object-fit:cover;\n  display:block;\n  transition:transform .35s ease;\n}\n\n.monarch-model-card:hover .monarch-model-card__media img,\n.monarch-model-card:hover .monarch-model-card__media video{\n  transform:scale(1.03);\n}\n\n.monarch-model-card__name{\n  padding:8px 6px 10px;\n  background:#fff;\n  color:#111;\n  font-size:11px;\n  font-weight:700;\n  text-transform:uppercase;\n  line-height:1.15;\n  text-align:center;\n  letter-spacing:.02em;\n  word-break:break-word;\n}\n\n\/* \u81ea\u9002\u5e94\u7f29\u5217\u6570 *\/\n@media (max-width: 1600px){\n  .monarch-models-grid{\n    grid-template-columns:repeat(8, minmax(0, 1fr));\n  }\n}\n\n@media (max-width: 1440px){\n  .monarch-models-grid{\n    grid-template-columns:repeat(7, minmax(0, 1fr));\n  }\n}\n\n@media (max-width: 1280px){\n  .monarch-models-grid{\n    grid-template-columns:repeat(6, minmax(0, 1fr));\n  }\n\n  .monarch-models-regions button{\n    font-size:18px;\n  }\n\n  .monarch-models-cats button{\n    font-size:20px;\n  }\n}\n\n@media (max-width: 1100px){\n  .monarch-models-grid{\n    grid-template-columns:repeat(5, minmax(0, 1fr));\n  }\n}\n\n@media (max-width: 900px){\n  .monarch-models-grid{\n    grid-template-columns:repeat(4, minmax(0, 1fr));\n  }\n}\n\n@media (max-width: 700px){\n  .monarch-models-toolbar{\n    padding:28px 16px 20px;\n  }\n\n  .monarch-models-regions,\n  .monarch-models-cats{\n    gap:16px;\n    justify-content:flex-start;\n  }\n\n  .monarch-models-grid{\n    grid-template-columns:repeat(3, minmax(0, 1fr));\n  }\n\n  .monarch-model-card__name{\n    font-size:10px;\n    padding:7px 4px 8px;\n  }\n}\n\n@media (max-width: 520px){\n  .monarch-models-grid{\n    grid-template-columns:repeat(2, minmax(0, 1fr));\n  }\n}\n<\/style>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function(){\n  const page = document.getElementById('monarchModelsPage');\n  if (!page) return;\n\n  const regionsWrap = document.getElementById('monarchModelsRegions');\n  const catsWrap = document.getElementById('monarchModelsCats');\n  const grid = document.getElementById('monarchModelsGrid');\n\n  let allModels = [];\n  let activeRegion = 'all';\n  let activeCat = 'all';\n\n  function createButton(text, slug, active, onClick){\n    const btn = document.createElement('button');\n    btn.type = 'button';\n    btn.textContent = text.toUpperCase();\n    btn.dataset.slug = slug;\n    if (active) btn.classList.add('is-active');\n    btn.addEventListener('click', onClick);\n    return btn;\n  }\n\n  \/* \u5206\u7c7b\u987a\u5e8f\uff1aall \u7b2c\u4e00\u4e2a\uff0c\u7136\u540e women\u3001men\uff0c\u5176\u4f59\u4fdd\u6301\u540e\u9762 *\/\n  function sortCategories(categories){\n    const order = ['all', 'women', 'men', 'talent', 'creative', 'athlete'];\n    return [...categories].sort((a, b) => {\n      const aIndex = order.indexOf(a.slug);\n      const bIndex = order.indexOf(b.slug);\n      const safeA = aIndex === -1 ? 999 : aIndex;\n      const safeB = bIndex === -1 ? 999 : bIndex;\n      return safeA - safeB;\n    });\n  }\n\n  function renderFilters(data){\n    regionsWrap.innerHTML = '';\n    catsWrap.innerHTML = '';\n\n    data.regions.forEach(item => {\n      const btn = createButton(item.name, item.slug, item.slug === activeRegion, function(){\n        activeRegion = item.slug;\n        renderFilters(data);\n        renderGrid();\n      });\n      regionsWrap.appendChild(btn);\n    });\n\n    const sortedCategories = sortCategories(data.categories);\n\n    sortedCategories.forEach(item => {\n      const btn = createButton(item.name, item.slug, item.slug === activeCat, function(){\n        activeCat = item.slug;\n        renderFilters(data);\n        renderGrid();\n      });\n      catsWrap.appendChild(btn);\n    });\n  }\n\n  function matchesFilter(model){\n    const regionSlugs = (model.regions || []).map(r => r.slug);\n    const catSlugs = (model.categories || []).map(c => c.slug);\n\n    const regionOk = activeRegion === 'all' || regionSlugs.includes(activeRegion);\n    const catOk = activeCat === 'all' || catSlugs.includes(activeCat);\n\n    return regionOk && catOk;\n  }\n\n  function playPreview(video){\n    video.muted = true;\n    video.playsInline = true;\n    video.autoplay = true;\n    video.loop = false;\n\n    const tryPlay = () => {\n      const p = video.play();\n      if (p && typeof p.catch === 'function') p.catch(() => {});\n    };\n\n    video.addEventListener('loadedmetadata', function(){\n      tryPlay();\n    });\n\n    video.addEventListener('timeupdate', function(){\n      if (video.currentTime >= 3) {\n        video.currentTime = 0;\n        tryPlay();\n      }\n    });\n\n    tryPlay();\n  }\n\n  function renderGrid(){\n    grid.innerHTML = '';\n\n    const visible = allModels.filter(matchesFilter);\n\n    if (!visible.length) {\n      grid.innerHTML = '<div style=\"grid-column:1\/-1;padding:30px;background:#fff;color:#666;\">No models found.<\/div>';\n      return;\n    }\n\n    visible.forEach(model => {\n      const card = document.createElement('a');\n      card.className = 'monarch-model-card';\n      card.href = model.permalink || '#';\n\n      const media = document.createElement('div');\n      media.className = 'monarch-model-card__media';\n\n      if (model.cover_type === 'video' && model.cover_video) {\n        const video = document.createElement('video');\n        video.src = model.cover_video;\n        video.muted = true;\n        video.playsInline = true;\n        video.preload = 'metadata';\n        media.appendChild(video);\n        setTimeout(() => playPreview(video), 0);\n      } else if (model.cover_image) {\n        const img = document.createElement('img');\n        img.src = model.cover_image;\n        img.alt = model.name || '';\n        media.appendChild(img);\n      } else {\n        media.innerHTML = '<div style=\"display:flex;align-items:center;justify-content:center;height:100%;color:#666;\">NO MEDIA<\/div>';\n      }\n\n      const name = document.createElement('div');\n      name.className = 'monarch-model-card__name';\n      name.textContent = model.name || '';\n\n      card.appendChild(media);\n      card.appendChild(name);\n\n      grid.appendChild(card);\n    });\n  }\n\n  function loadModels(){\n    if (!window.monarchModelsData || !window.monarchModelsData.ajax_url) {\n      grid.innerHTML = '<div style=\"padding:30px;background:#fff;\">Backend not connected.<\/div>';\n      return;\n    }\n\n    const formData = new FormData();\n    formData.append('action', 'monarch_get_models');\n    formData.append('nonce', window.monarchModelsData.nonce);\n\n    fetch(window.monarchModelsData.ajax_url, {\n      method: 'POST',\n      body: formData,\n      credentials: 'same-origin'\n    })\n    .then(res => res.json())\n    .then(data => {\n      if (!data || !data.success) {\n        grid.innerHTML = '<div style=\"padding:30px;background:#fff;\">Failed to load models.<\/div>';\n        return;\n      }\n\n      allModels = data.data.models || [];\n      renderFilters(data.data);\n      renderGrid();\n    })\n    .catch(() => {\n      grid.innerHTML = '<div style=\"padding:30px;background:#fff;\">Network error.<\/div>';\n    });\n  }\n\n  loadModels();\n});\n<\/script><\/div><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"100-width.php","meta":{"footnotes":""},"class_list":["post-2290","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/monarchmodelsus.com\/index.php?rest_route=\/wp\/v2\/pages\/2290","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/monarchmodelsus.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/monarchmodelsus.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/monarchmodelsus.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/monarchmodelsus.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2290"}],"version-history":[{"count":8,"href":"https:\/\/monarchmodelsus.com\/index.php?rest_route=\/wp\/v2\/pages\/2290\/revisions"}],"predecessor-version":[{"id":2323,"href":"https:\/\/monarchmodelsus.com\/index.php?rest_route=\/wp\/v2\/pages\/2290\/revisions\/2323"}],"wp:attachment":[{"href":"https:\/\/monarchmodelsus.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2290"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}