[{"data":1,"prerenderedAt":2067},["ShallowReactive",2],{"navigation":3,"\u002Fnuxt-module\u002Fcomponent-helpers\u002Fimages-and-uploads":358,"\u002Fnuxt-module\u002Fcomponent-helpers\u002Fimages-and-uploads-surround":2062},[4,14,36,69,140,341],{"title":5,"path":6,"stem":7,"children":8},"Introduction","\u002Fgetting-started","1.getting-started\u002F1.index",[9,10],{"title":5,"path":6,"stem":7},{"title":11,"path":12,"stem":13},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation",{"title":15,"path":16,"stem":17,"children":18,"page":35},"Guides","\u002Fguides","2.guides",[19,23,27,31],{"title":20,"path":21,"stem":22},"Your First Layout","\u002Fguides\u002Fyour-first-layout","2.guides\u002F1.your-first-layout",{"title":24,"path":25,"stem":26},"Your First Page Template","\u002Fguides\u002Fyour-first-page-template","2.guides\u002F2.your-first-page-template",{"title":28,"path":29,"stem":30},"Your First Component","\u002Fguides\u002Fyour-first-component","2.guides\u002F3.your-first-component",{"title":32,"path":33,"stem":34},"Alternative UI Variants","\u002Fguides\u002Falternative-ui-variants","2.guides\u002F4.alternative-ui-variants",false,{"title":37,"path":38,"stem":39,"children":40,"page":35},"Core Concepts","\u002Fcore-concepts","3.core-concepts",[41,45,49,53,57,61,65],{"title":42,"path":43,"stem":44},"How It All Works","\u002Fcore-concepts\u002Farchitecture","3.core-concepts\u002F1.architecture",{"title":46,"path":47,"stem":48},"The Data Model","\u002Fcore-concepts\u002Fthe-data-model","3.core-concepts\u002F2.the-data-model",{"title":50,"path":51,"stem":52},"Layouts & Pages","\u002Fcore-concepts\u002Flayouts-and-pages","3.core-concepts\u002F3.layouts-and-pages",{"title":54,"path":55,"stem":56},"Dynamic Pages","\u002Fcore-concepts\u002Fdynamic-pages","3.core-concepts\u002F4.dynamic-pages",{"title":58,"path":59,"stem":60},"Components","\u002Fcore-concepts\u002Fcomponents","3.core-concepts\u002F5.components",{"title":62,"path":63,"stem":64},"Draft & Publish Workflow","\u002Fcore-concepts\u002Fdraft-and-publish","3.core-concepts\u002F6.draft-and-publish",{"title":66,"path":67,"stem":68},"The Admin Panel","\u002Fcore-concepts\u002Fadmin-panel","3.core-concepts\u002F7.admin-panel",{"title":70,"path":71,"stem":72,"children":73,"page":35},"Api","\u002Fapi","4.api",[74,78,116,120,124,128,132,136],{"title":75,"path":76,"stem":77},"Bundle Setup","\u002Fapi\u002Fbundle-setup","4.api\u002F1.bundle-setup",{"title":58,"path":79,"stem":80,"children":81,"page":35},"\u002Fapi\u002Fcomponents","4.api\u002F2.components",[82,86,103],{"title":83,"path":84,"stem":85},"Creating Components","\u002Fapi\u002Fcomponents\u002Fcreating-components","4.api\u002F2.components\u002F1.creating-components",{"title":87,"path":88,"stem":89,"children":90,"page":35},"Annotations","\u002Fapi\u002Fcomponents\u002Fannotations","4.api\u002F2.components\u002F2.annotations",[91,95,99],{"title":92,"path":93,"stem":94},"Publishable","\u002Fapi\u002Fcomponents\u002Fannotations\u002Fpublishable","4.api\u002F2.components\u002F2.annotations\u002F1.publishable",{"title":96,"path":97,"stem":98},"Uploadable","\u002Fapi\u002Fcomponents\u002Fannotations\u002Fuploadable","4.api\u002F2.components\u002F2.annotations\u002F2.uploadable",{"title":100,"path":101,"stem":102},"Timestamped","\u002Fapi\u002Fcomponents\u002Fannotations\u002Ftimestamped","4.api\u002F2.components\u002F2.annotations\u002F3.timestamped",{"title":104,"path":105,"stem":106,"children":107,"page":35},"Built Ins","\u002Fapi\u002Fcomponents\u002Fbuilt-ins","4.api\u002F2.components\u002F3.built-ins",[108,112],{"title":109,"path":110,"stem":111},"Collection Component","\u002Fapi\u002Fcomponents\u002Fbuilt-ins\u002Fcollection-component","4.api\u002F2.components\u002F3.built-ins\u002F1.collection-component",{"title":113,"path":114,"stem":115},"Form Component","\u002Fapi\u002Fcomponents\u002Fbuilt-ins\u002Fform-component","4.api\u002F2.components\u002F3.built-ins\u002F2.form-component",{"title":117,"path":118,"stem":119},"Dynamic & Nested Pages","\u002Fapi\u002Fdynamic-pages","4.api\u002F3.dynamic-pages",{"title":121,"path":122,"stem":123},"Users & Security","\u002Fapi\u002Fusers-and-security","4.api\u002F4.users-and-security",{"title":125,"path":126,"stem":127},"Data Fixtures","\u002Fapi\u002Fdata-fixtures","4.api\u002F5.data-fixtures",{"title":129,"path":130,"stem":131},"Configuration Reference","\u002Fapi\u002Fconfiguration","4.api\u002F6.configuration",{"title":133,"path":134,"stem":135},"Console Commands","\u002Fapi\u002Fconsole-commands","4.api\u002F7.console-commands",{"title":137,"path":138,"stem":139},"Debugging & Profiler","\u002Fapi\u002Fdebugging","4.api\u002F8.debugging",{"title":141,"path":142,"stem":143,"children":144,"page":35},"Nuxt Module","\u002Fnuxt-module","5.nuxt-module",[145,149,162,182,207,211,295,320,324],{"title":146,"path":147,"stem":148},"Module Setup","\u002Fnuxt-module\u002Fmodule-setup","5.nuxt-module\u002F1.module-setup",{"title":150,"path":151,"stem":152,"children":153,"page":35},"Configuration","\u002Fnuxt-module\u002Fconfiguration","5.nuxt-module\u002F2.configuration",[154,158],{"title":155,"path":156,"stem":157},"Nuxt Config","\u002Fnuxt-module\u002Fconfiguration\u002Fnuxt-config","5.nuxt-module\u002F2.configuration\u002F1.nuxt-config",{"title":159,"path":160,"stem":161},"Site Config & SEO","\u002Fnuxt-module\u002Fconfiguration\u002Fsite-config-and-seo","5.nuxt-module\u002F2.configuration\u002F2.site-config-and-seo",{"title":163,"path":164,"stem":165,"children":166,"page":35},"Building Your Ui","\u002Fnuxt-module\u002Fbuilding-your-ui","5.nuxt-module\u002F3.building-your-ui",[167,171,175,178],{"title":168,"path":169,"stem":170},"Layouts","\u002Fnuxt-module\u002Fbuilding-your-ui\u002Fcreating-layouts","5.nuxt-module\u002F3.building-your-ui\u002F1.creating-layouts",{"title":172,"path":173,"stem":174},"Page Templates","\u002Fnuxt-module\u002Fbuilding-your-ui\u002Fcreating-page-templates","5.nuxt-module\u002F3.building-your-ui\u002F2.creating-page-templates",{"title":83,"path":176,"stem":177},"\u002Fnuxt-module\u002Fbuilding-your-ui\u002Fcreating-components","5.nuxt-module\u002F3.building-your-ui\u002F3.creating-components",{"title":179,"path":180,"stem":181},"CLI Generator","\u002Fnuxt-module\u002Fbuilding-your-ui\u002Fcwa-cli","5.nuxt-module\u002F3.building-your-ui\u002F4.cwa-cli",{"title":183,"path":184,"stem":185,"children":186,"page":35},"Cwa Components","\u002Fnuxt-module\u002Fcwa-components","5.nuxt-module\u002F4.cwa-components",[187,191,195,199,203],{"title":188,"path":189,"stem":190},"\u003CCwaComponentGroup \u002F>","\u002Fnuxt-module\u002Fcwa-components\u002Fcwa-component-group","5.nuxt-module\u002F4.cwa-components\u002F1.cwa-component-group",{"title":192,"path":193,"stem":194},"\u003CCwaPage \u002F>","\u002Fnuxt-module\u002Fcwa-components\u002Fcwa-page","5.nuxt-module\u002F4.cwa-components\u002F2.cwa-page",{"title":196,"path":197,"stem":198},"\u003CCwaLink \u002F>","\u002Fnuxt-module\u002Fcwa-components\u002Fcwa-link","5.nuxt-module\u002F4.cwa-components\u002F3.cwa-link",{"title":200,"path":201,"stem":202},"\u003CCwaImage \u002F>","\u002Fnuxt-module\u002Fcwa-components\u002Fcwa-image","5.nuxt-module\u002F4.cwa-components\u002F4.cwa-image",{"title":204,"path":205,"stem":206},"\u003CCwaDefaultLayout \u002F>","\u002Fnuxt-module\u002Fcwa-components\u002Fcwa-default-layout","5.nuxt-module\u002F4.cwa-components\u002F5.cwa-default-layout",{"title":208,"path":209,"stem":210},"The useCwa() API","\u002Fnuxt-module\u002Fcwa-api","5.nuxt-module\u002F5.cwa-api",{"title":212,"path":213,"stem":214,"children":215,"page":35},"Composables","\u002Fnuxt-module\u002Fcomposables","5.nuxt-module\u002F6.composables",[216,224,261,278],{"title":217,"path":218,"stem":219,"children":220,"page":35},"Layout","\u002Fnuxt-module\u002Fcomposables\u002Flayout","5.nuxt-module\u002F6.composables\u002F0.layout",[221],{"title":217,"path":222,"stem":223},"\u002Fnuxt-module\u002Fcomposables\u002Flayout\u002Fuse-cwa-layout","5.nuxt-module\u002F6.composables\u002F0.layout\u002F1.use-cwa-layout",{"title":225,"path":226,"stem":227,"children":228,"page":35},"Component","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent","5.nuxt-module\u002F6.composables\u002F1.component",[229,233,237,241,245,249,253,257],{"title":230,"path":231,"stem":232},"Component (recommended)","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-component","5.nuxt-module\u002F6.composables\u002F1.component\u002F0.use-cwa-component",{"title":234,"path":235,"stem":236},"Resource","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-resource","5.nuxt-module\u002F6.composables\u002F1.component\u002F1.use-cwa-resource",{"title":238,"path":239,"stem":240},"Collection Resource","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-collection-resource","5.nuxt-module\u002F6.composables\u002F1.component\u002F2.use-cwa-collection-resource",{"title":242,"path":243,"stem":244},"Image Resource","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-image-resource","5.nuxt-module\u002F6.composables\u002F1.component\u002F3.use-cwa-image-resource",{"title":246,"path":247,"stem":248},"Form","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-form","5.nuxt-module\u002F6.composables\u002F1.component\u002F4.use-cwa-form",{"title":250,"path":251,"stem":252},"Form Input","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-form-input","5.nuxt-module\u002F6.composables\u002F1.component\u002F5.use-cwa-form-input",{"title":254,"path":255,"stem":256},"Form Repeated","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-form-repeated","5.nuxt-module\u002F6.composables\u002F1.component\u002F6.use-cwa-form-repeated",{"title":258,"path":259,"stem":260},"Form Collection","\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-form-collection","5.nuxt-module\u002F6.composables\u002F1.component\u002F7.use-cwa-form-collection",{"title":262,"path":263,"stem":264,"children":265,"page":35},"Admin Manager","\u002Fnuxt-module\u002Fcomposables\u002Fadmin-manager","5.nuxt-module\u002F6.composables\u002F2.admin-manager",[266,270,274],{"title":267,"path":268,"stem":269},"Manager Tab","\u002Fnuxt-module\u002Fcomposables\u002Fadmin-manager\u002Fuse-cwa-resource-manager-tab","5.nuxt-module\u002F6.composables\u002F2.admin-manager\u002F1.use-cwa-resource-manager-tab",{"title":271,"path":272,"stem":273},"Resource Model","\u002Fnuxt-module\u002Fcomposables\u002Fadmin-manager\u002Fuse-cwa-resource-model","5.nuxt-module\u002F6.composables\u002F2.admin-manager\u002F2.use-cwa-resource-model",{"title":275,"path":276,"stem":277},"Resource Upload","\u002Fnuxt-module\u002Fcomposables\u002Fadmin-manager\u002Fuse-cwa-resource-upload","5.nuxt-module\u002F6.composables\u002F2.admin-manager\u002F3.use-cwa-resource-upload",{"title":279,"path":280,"stem":281,"children":282,"page":35},"Utilities","\u002Fnuxt-module\u002Fcomposables\u002Futilities","5.nuxt-module\u002F6.composables\u002F3.utilities",[283,287,291],{"title":284,"path":285,"stem":286},"Resource Endpoint","\u002Fnuxt-module\u002Fcomposables\u002Futilities\u002Fuse-cwa-resource-endpoint","5.nuxt-module\u002F6.composables\u002F3.utilities\u002F1.use-cwa-resource-endpoint",{"title":288,"path":289,"stem":290},"Query Model","\u002Fnuxt-module\u002Fcomposables\u002Futilities\u002Fuse-query-bound-model","5.nuxt-module\u002F6.composables\u002F3.utilities\u002F2.use-query-bound-model",{"title":292,"path":293,"stem":294},"Resource Route","\u002Fnuxt-module\u002Fcomposables\u002Futilities\u002Fuse-cwa-resource-route","5.nuxt-module\u002F6.composables\u002F3.utilities\u002F3.use-cwa-resource-route",{"title":296,"path":297,"stem":298,"children":299,"page":35},"Component Helpers","\u002Fnuxt-module\u002Fcomponent-helpers","5.nuxt-module\u002F7.component-helpers",[300,304,308,312,316],{"title":301,"path":302,"stem":303},"Images & Media","\u002Fnuxt-module\u002Fcomponent-helpers\u002Fimages-and-uploads","5.nuxt-module\u002F7.component-helpers\u002F1.images-and-uploads",{"title":305,"path":306,"stem":307},"Collections & Pagination","\u002Fnuxt-module\u002Fcomponent-helpers\u002Fcollections-and-pagination","5.nuxt-module\u002F7.component-helpers\u002F2.collections-and-pagination",{"title":309,"path":310,"stem":311},"HTML Content","\u002Fnuxt-module\u002Fcomponent-helpers\u002Fhtml-content","5.nuxt-module\u002F7.component-helpers\u002F3.html-content",{"title":313,"path":314,"stem":315},"Real-Time Updates","\u002Fnuxt-module\u002Fcomponent-helpers\u002Freal-time-updates","5.nuxt-module\u002F7.component-helpers\u002F4.real-time-updates",{"title":317,"path":318,"stem":319},"Forms","\u002Fnuxt-module\u002Fcomponent-helpers\u002Fforms","5.nuxt-module\u002F7.component-helpers\u002F5.forms",{"title":321,"path":322,"stem":323},"Authentication","\u002Fnuxt-module\u002Fauthentication","5.nuxt-module\u002F8.authentication",{"title":325,"path":326,"stem":327,"children":328,"page":35},"Cwa Layer","\u002Fnuxt-module\u002Fcwa-layer","5.nuxt-module\u002F9.cwa-layer",[329,333,337],{"title":330,"path":331,"stem":332},"Overview","\u002Fnuxt-module\u002Fcwa-layer\u002Foverview","5.nuxt-module\u002F9.cwa-layer\u002F1.overview",{"title":334,"path":335,"stem":336},"Auth Pages","\u002Fnuxt-module\u002Fcwa-layer\u002Fauth-pages","5.nuxt-module\u002F9.cwa-layer\u002F2.auth-pages",{"title":338,"path":339,"stem":340},"Admin Panel","\u002Fnuxt-module\u002Fcwa-layer\u002Fadmin-panel","5.nuxt-module\u002F9.cwa-layer\u002F3.admin-panel",{"title":342,"path":343,"stem":344,"children":345,"page":35},"Deployment","\u002Fdeployment","6.deployment",[346,350,354],{"title":347,"path":348,"stem":349},"Docker","\u002Fdeployment\u002Fdocker","6.deployment\u002F1.docker",{"title":351,"path":352,"stem":353},"Kubernetes & Helm","\u002Fdeployment\u002Fkubernetes","6.deployment\u002F2.kubernetes",{"title":355,"path":356,"stem":357},"CI\u002FCD","\u002Fdeployment\u002Fci-cd","6.deployment\u002F3.ci-cd",{"id":359,"title":301,"badge":360,"body":363,"description":2056,"extension":2057,"links":2058,"meta":2059,"navigation":629,"path":302,"seo":2060,"stem":303,"__hash__":2061},"docs\u002F5.nuxt-module\u002F7.component-helpers\u002F1.images-and-uploads.md",{"label":361,"color":362},"Draft","amber",{"type":364,"value":365,"toc":2046},"minimark",[366,383,388,850,856,975,987,991,1001,1074,1083,1087,1092,1246,1256,1260,1658,1668,1672,1684,1882,1885,1938,1942,2032,2043],[367,368,369,370,374,375,378,379,382],"p",{},"When a PHP component uses ",[371,372,373],"code",{},"#[Silverback\\Uploadable]",", use ",[371,376,377],{},"useCwaComponent"," with the ",[371,380,381],{},"withImage()"," plugin. It adds computed values for the uploaded file URL, load state, and Imagine filter variants.",[384,385,387],"h2",{"id":386},"display-component","Display Component",[389,390,395],"pre",{"className":391,"code":392,"language":393,"meta":394,"style":394},"language-vue shiki shiki-themes github-light github-dark material-theme-palenight","\u003C!-- app\u002Fcwa\u002Fcomponents\u002FImage\u002FImage.vue -->\n\u003Ctemplate>\n    \u003Cdiv class=\"relative\">\n        \u003CTransition name=\"fade\">\n            \u003CNuxtImg\n                v-if=\"displayMedia\"\n                :src=\"contentUrl\"\n                class=\"w-full h-full object-cover\"\n                @load=\"handleLoad\"\n            \u002F>\n        \u003C\u002FTransition>\n        \u003Cdiv\n            v-if=\"!displayMedia\"\n            class=\"w-full h-64 bg-gray-200 animate-pulse rounded\"\n        \u002F>\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nimport type { IriProp } from '#cwa\u002Fcomposables\u002Fcwa-resource'\nimport { useCwaComponent, withImage } from '#imports'\n\nconst props = defineProps\u003CIriProp>()\n\nconst {\n    resource,\n    exposeMeta,\n    contentUrl,\n    displayMedia,\n    handleLoad\n} = useCwaComponent(props, [withImage()])\n\ndefineExpose(exposeMeta)\n\u003C\u002Fscript>\n","vue","",[371,396,397,406,420,448,471,480,496,511,526,541,547,557,565,580,595,604,614,624,631,656,688,715,720,751,756,764,773,781,789,797,803,827,832,841],{"__ignoreMap":394},[398,399,402],"span",{"class":400,"line":401},"line",1,[398,403,405],{"class":404},"sTBSN","\u003C!-- app\u002Fcwa\u002Fcomponents\u002FImage\u002FImage.vue -->\n",[398,407,409,413,417],{"class":400,"line":408},2,[398,410,412],{"class":411},"sOvfz","\u003C",[398,414,416],{"class":415},"s-h7I","template",[398,418,419],{"class":411},">\n",[398,421,423,426,429,433,436,440,444,446],{"class":400,"line":422},3,[398,424,425],{"class":411},"    \u003C",[398,427,428],{"class":415},"div",[398,430,432],{"class":431},"sGtlX"," class",[398,434,435],{"class":411},"=",[398,437,439],{"class":438},"seSrl","\"",[398,441,443],{"class":442},"sLL54","relative",[398,445,439],{"class":438},[398,447,419],{"class":411},[398,449,451,454,457,460,462,464,467,469],{"class":400,"line":450},4,[398,452,453],{"class":411},"        \u003C",[398,455,456],{"class":415},"Transition",[398,458,459],{"class":431}," name",[398,461,435],{"class":411},[398,463,439],{"class":438},[398,465,466],{"class":442},"fade",[398,468,439],{"class":438},[398,470,419],{"class":411},[398,472,474,477],{"class":400,"line":473},5,[398,475,476],{"class":411},"            \u003C",[398,478,479],{"class":415},"NuxtImg\n",[398,481,483,486,488,490,493],{"class":400,"line":482},6,[398,484,485],{"class":431},"                v-if",[398,487,435],{"class":411},[398,489,439],{"class":438},[398,491,492],{"class":442},"displayMedia",[398,494,495],{"class":438},"\"\n",[398,497,499,502,504,506,509],{"class":400,"line":498},7,[398,500,501],{"class":431},"                :src",[398,503,435],{"class":411},[398,505,439],{"class":438},[398,507,508],{"class":442},"contentUrl",[398,510,495],{"class":438},[398,512,514,517,519,521,524],{"class":400,"line":513},8,[398,515,516],{"class":431},"                class",[398,518,435],{"class":411},[398,520,439],{"class":438},[398,522,523],{"class":442},"w-full h-full object-cover",[398,525,495],{"class":438},[398,527,529,532,534,536,539],{"class":400,"line":528},9,[398,530,531],{"class":431},"                @load",[398,533,435],{"class":411},[398,535,439],{"class":438},[398,537,538],{"class":442},"handleLoad",[398,540,495],{"class":438},[398,542,544],{"class":400,"line":543},10,[398,545,546],{"class":411},"            \u002F>\n",[398,548,550,553,555],{"class":400,"line":549},11,[398,551,552],{"class":411},"        \u003C\u002F",[398,554,456],{"class":415},[398,556,419],{"class":411},[398,558,560,562],{"class":400,"line":559},12,[398,561,453],{"class":411},[398,563,564],{"class":415},"div\n",[398,566,568,571,573,575,578],{"class":400,"line":567},13,[398,569,570],{"class":431},"            v-if",[398,572,435],{"class":411},[398,574,439],{"class":438},[398,576,577],{"class":442},"!displayMedia",[398,579,495],{"class":438},[398,581,583,586,588,590,593],{"class":400,"line":582},14,[398,584,585],{"class":431},"            class",[398,587,435],{"class":411},[398,589,439],{"class":438},[398,591,592],{"class":442},"w-full h-64 bg-gray-200 animate-pulse rounded",[398,594,495],{"class":438},[398,596,598,602],{"class":400,"line":597},15,[398,599,601],{"class":600},"s01iV","        \u002F",[398,603,419],{"class":411},[398,605,607,610,612],{"class":400,"line":606},16,[398,608,609],{"class":411},"    \u003C\u002F",[398,611,428],{"class":415},[398,613,419],{"class":411},[398,615,617,620,622],{"class":400,"line":616},17,[398,618,619],{"class":411},"\u003C\u002F",[398,621,416],{"class":415},[398,623,419],{"class":411},[398,625,627],{"class":400,"line":626},18,[398,628,630],{"emptyLinePlaceholder":629},true,"\n",[398,632,634,636,639,642,645,647,649,652,654],{"class":400,"line":633},19,[398,635,412],{"class":411},[398,637,638],{"class":415},"script",[398,640,641],{"class":431}," setup",[398,643,644],{"class":431}," lang",[398,646,435],{"class":411},[398,648,439],{"class":438},[398,650,651],{"class":442},"ts",[398,653,439],{"class":438},[398,655,419],{"class":411},[398,657,659,663,666,669,673,676,679,682,685],{"class":400,"line":658},20,[398,660,662],{"class":661},"sm4w6","import",[398,664,665],{"class":661}," type",[398,667,668],{"class":411}," {",[398,670,672],{"class":671},"sPB8G"," IriProp",[398,674,675],{"class":411}," }",[398,677,678],{"class":661}," from",[398,680,681],{"class":438}," '",[398,683,684],{"class":442},"#cwa\u002Fcomposables\u002Fcwa-resource",[398,686,687],{"class":438},"'\n",[398,689,691,693,695,698,701,704,706,708,710,713],{"class":400,"line":690},21,[398,692,662],{"class":661},[398,694,668],{"class":411},[398,696,697],{"class":671}," useCwaComponent",[398,699,700],{"class":411},",",[398,702,703],{"class":671}," withImage",[398,705,675],{"class":411},[398,707,678],{"class":661},[398,709,681],{"class":438},[398,711,712],{"class":442},"#imports",[398,714,687],{"class":438},[398,716,718],{"class":400,"line":717},22,[398,719,630],{"emptyLinePlaceholder":629},[398,721,723,727,731,735,739,741,745,748],{"class":400,"line":722},23,[398,724,726],{"class":725},"swB56","const",[398,728,730],{"class":729},"sc2zw"," props",[398,732,734],{"class":733},"sVlFx"," =",[398,736,738],{"class":737},"sKpYG"," defineProps",[398,740,412],{"class":411},[398,742,744],{"class":743},"sRCss","IriProp",[398,746,747],{"class":411},">",[398,749,750],{"class":671},"()\n",[398,752,754],{"class":400,"line":753},24,[398,755,630],{"emptyLinePlaceholder":629},[398,757,759,761],{"class":400,"line":758},25,[398,760,726],{"class":725},[398,762,763],{"class":411}," {\n",[398,765,767,770],{"class":400,"line":766},26,[398,768,769],{"class":729},"    resource",[398,771,772],{"class":411},",\n",[398,774,776,779],{"class":400,"line":775},27,[398,777,778],{"class":729},"    exposeMeta",[398,780,772],{"class":411},[398,782,784,787],{"class":400,"line":783},28,[398,785,786],{"class":729},"    contentUrl",[398,788,772],{"class":411},[398,790,792,795],{"class":400,"line":791},29,[398,793,794],{"class":729},"    displayMedia",[398,796,772],{"class":411},[398,798,800],{"class":400,"line":799},30,[398,801,802],{"class":729},"    handleLoad\n",[398,804,806,809,811,813,816,818,821,824],{"class":400,"line":805},31,[398,807,808],{"class":411},"}",[398,810,734],{"class":733},[398,812,697],{"class":737},[398,814,815],{"class":671},"(props",[398,817,700],{"class":411},[398,819,820],{"class":671}," [",[398,822,823],{"class":737},"withImage",[398,825,826],{"class":671},"()])\n",[398,828,830],{"class":400,"line":829},32,[398,831,630],{"emptyLinePlaceholder":629},[398,833,835,838],{"class":400,"line":834},33,[398,836,837],{"class":737},"defineExpose",[398,839,840],{"class":671},"(exposeMeta)\n",[398,842,844,846,848],{"class":400,"line":843},34,[398,845,619],{"class":411},[398,847,638],{"class":415},[398,849,419],{"class":411},[384,851,853,854],{"id":852},"return-values-from-withimage","Return Values from ",[371,855,381],{},[857,858,859,875],"table",{},[860,861,862],"thead",{},[863,864,865,869,872],"tr",{},[866,867,868],"th",{},"Return",[866,870,871],{},"Type",[866,873,874],{},"Description",[876,877,878,893,913,934,956],"tbody",{},[863,879,880,885,890],{},[881,882,883],"td",{},[371,884,508],{},[881,886,887],{},[371,888,889],{},"ComputedRef\u003Cstring | undefined>",[881,891,892],{},"Public URL of the uploaded file",[863,894,895,899,904],{},[881,896,897],{},[371,898,492],{},[881,900,901],{},[371,902,903],{},"ComputedRef\u003Cboolean>",[881,905,906,909,910,912],{},[371,907,908],{},"true"," when ",[371,911,508],{}," is set AND the image has loaded",[863,914,915,920,925],{},[881,916,917],{},[371,918,919],{},"loaded",[881,921,922],{},[371,923,924],{},"Ref\u003Cboolean>",[881,926,927,928,909,930,933],{},"Becomes ",[371,929,908],{},[371,931,932],{},"handleLoad()"," is called",[863,935,936,940,945],{},[881,937,938],{},[371,939,538],{},[881,941,942],{},[371,943,944],{},"() => void",[881,946,947,948,951,952,955],{},"Call on the ",[371,949,950],{},"\u003Cimg>"," element's ",[371,953,954],{},"@load"," event",[863,957,958,963,968],{},[881,959,960],{},[371,961,962],{},"mediaObjects",[881,964,965],{},[371,966,967],{},"ComputedRef",[881,969,970,971,974],{},"Full ",[371,972,973],{},"_metadata.mediaObjects"," map for all Imagine variants",[367,976,977,979,980,982,983,986],{},[371,978,492],{}," prevents showing a broken or partially loaded image. The skeleton shows until both ",[371,981,508],{}," exists and the browser fires the ",[371,984,985],{},"load"," event.",[384,988,990],{"id":989},"using-a-specific-imagine-filter","Using a Specific Imagine Filter",[367,992,993,994,997,998,1000],{},"Pass ",[371,995,996],{},"imagineFilterName"," to use a specific image variant as ",[371,999,508],{},":",[389,1002,1005],{"className":1003,"code":1004,"language":651,"meta":394,"style":394},"language-ts shiki shiki-themes github-light github-dark material-theme-palenight","const { contentUrl, displayMedia, handleLoad } = useCwaComponent(props, [\n    withImage({ imagineFilterName: 'thumbnail' })\n])\n",[371,1006,1007,1039,1069],{"__ignoreMap":394},[398,1008,1009,1011,1013,1016,1018,1021,1023,1026,1028,1030,1032,1034,1036],{"class":400,"line":401},[398,1010,726],{"class":725},[398,1012,668],{"class":411},[398,1014,1015],{"class":729}," contentUrl",[398,1017,700],{"class":411},[398,1019,1020],{"class":729}," displayMedia",[398,1022,700],{"class":411},[398,1024,1025],{"class":729}," handleLoad",[398,1027,675],{"class":411},[398,1029,734],{"class":733},[398,1031,697],{"class":737},[398,1033,815],{"class":671},[398,1035,700],{"class":411},[398,1037,1038],{"class":671}," [\n",[398,1040,1041,1044,1047,1050,1054,1056,1058,1061,1064,1066],{"class":400,"line":408},[398,1042,1043],{"class":737},"    withImage",[398,1045,1046],{"class":671},"(",[398,1048,1049],{"class":411},"{",[398,1051,1053],{"class":1052},"sDHlG"," imagineFilterName",[398,1055,1000],{"class":411},[398,1057,681],{"class":438},[398,1059,1060],{"class":442},"thumbnail",[398,1062,1063],{"class":438},"'",[398,1065,675],{"class":411},[398,1067,1068],{"class":671},")\n",[398,1070,1071],{"class":400,"line":422},[398,1072,1073],{"class":671},"])\n",[367,1075,1076,1077,1079,1080,1082],{},"Without ",[371,1078,996],{},", ",[371,1081,508],{}," is the raw uploaded file URL.",[384,1084,1086],{"id":1085},"accessing-all-imagine-variants","Accessing All Imagine Variants",[367,1088,1089,1090,1000],{},"The full map of variants is available via ",[371,1091,962],{},[389,1093,1095],{"className":1003,"code":1094,"language":651,"meta":394,"style":394},"const { resource, mediaObjects } = useCwaComponent(props, [withImage()])\n\n\u002F\u002F All variants for the 'file' upload property\nconst thumbnailUrl = computed(() => mediaObjects.value?.file?.thumbnail?.contentUrl)\nconst heroUrl = computed(() => mediaObjects.value?.file?.hero?.contentUrl)\nconst originalUrl = computed(() => mediaObjects.value?.file?.contentUrl)\n",[371,1096,1097,1127,1131,1136,1179,1215],{"__ignoreMap":394},[398,1098,1099,1101,1103,1106,1108,1111,1113,1115,1117,1119,1121,1123,1125],{"class":400,"line":401},[398,1100,726],{"class":725},[398,1102,668],{"class":411},[398,1104,1105],{"class":729}," resource",[398,1107,700],{"class":411},[398,1109,1110],{"class":729}," mediaObjects",[398,1112,675],{"class":411},[398,1114,734],{"class":733},[398,1116,697],{"class":737},[398,1118,815],{"class":671},[398,1120,700],{"class":411},[398,1122,820],{"class":671},[398,1124,823],{"class":737},[398,1126,826],{"class":671},[398,1128,1129],{"class":400,"line":408},[398,1130,630],{"emptyLinePlaceholder":629},[398,1132,1133],{"class":400,"line":422},[398,1134,1135],{"class":404},"\u002F\u002F All variants for the 'file' upload property\n",[398,1137,1138,1140,1143,1145,1148,1150,1153,1156,1158,1161,1164,1167,1170,1172,1174,1176],{"class":400,"line":450},[398,1139,726],{"class":725},[398,1141,1142],{"class":729}," thumbnailUrl",[398,1144,734],{"class":733},[398,1146,1147],{"class":737}," computed",[398,1149,1046],{"class":671},[398,1151,1152],{"class":411},"()",[398,1154,1155],{"class":725}," =>",[398,1157,1110],{"class":671},[398,1159,1160],{"class":411},".",[398,1162,1163],{"class":671},"value",[398,1165,1166],{"class":411},"?.",[398,1168,1169],{"class":671},"file",[398,1171,1166],{"class":411},[398,1173,1060],{"class":671},[398,1175,1166],{"class":411},[398,1177,1178],{"class":671},"contentUrl)\n",[398,1180,1181,1183,1186,1188,1190,1192,1194,1196,1198,1200,1202,1204,1206,1208,1211,1213],{"class":400,"line":473},[398,1182,726],{"class":725},[398,1184,1185],{"class":729}," heroUrl",[398,1187,734],{"class":733},[398,1189,1147],{"class":737},[398,1191,1046],{"class":671},[398,1193,1152],{"class":411},[398,1195,1155],{"class":725},[398,1197,1110],{"class":671},[398,1199,1160],{"class":411},[398,1201,1163],{"class":671},[398,1203,1166],{"class":411},[398,1205,1169],{"class":671},[398,1207,1166],{"class":411},[398,1209,1210],{"class":671},"hero",[398,1212,1166],{"class":411},[398,1214,1178],{"class":671},[398,1216,1217,1219,1222,1224,1226,1228,1230,1232,1234,1236,1238,1240,1242,1244],{"class":400,"line":482},[398,1218,726],{"class":725},[398,1220,1221],{"class":729}," originalUrl",[398,1223,734],{"class":733},[398,1225,1147],{"class":737},[398,1227,1046],{"class":671},[398,1229,1152],{"class":411},[398,1231,1155],{"class":725},[398,1233,1110],{"class":671},[398,1235,1160],{"class":411},[398,1237,1163],{"class":671},[398,1239,1166],{"class":411},[398,1241,1169],{"class":671},[398,1243,1166],{"class":411},[398,1245,1178],{"class":671},[367,1247,1248,1249,1251,1252,1255],{},"The key under ",[371,1250,962],{}," is the PHP property name from ",[371,1253,1254],{},"#[UploadableField]",". Variant keys match the Imagine filter names configured on the PHP entity.",[384,1257,1259],{"id":1258},"admin-upload-tab","Admin Upload Tab",[389,1261,1263],{"className":391,"code":1262,"language":393,"meta":394,"style":394},"\u003C!-- app\u002Fcwa\u002Fcomponents\u002FImage\u002Fadmin\u002FImage.vue -->\n\u003Ctemplate>\n    \u003Cdiv class=\"p-4\">\n        \u003CCwaUiFormFile\n            v-model=\"filenameInputModel\"\n            label=\"Upload Image\"\n            :disabled=\"updating\"\n            :file-exists=\"fileExists\"\n            @change=\"handleInputChangeFile\"\n            @delete=\"handleInputDeleteFile\"\n        \u002F>\n    \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nimport { toRef } from 'vue'\nimport type { IriProp } from '#cwa\u002Fcomposables\u002Fcwa-resource'\nimport { useCwaResourceManagerTab, useCwaResourceUpload } from '#imports'\n\nconst props = defineProps\u003CIriProp>()\n\nconst { exposeMeta, iri } = useCwaResourceManagerTab({ name: 'Image', order: 1 })\n\nconst {\n    filenameInputModel,\n    updating,\n    fileExists,\n    handleInputChangeFile,\n    handleInputDeleteFile\n} = useCwaResourceUpload(iri, 'file')  \u002F\u002F 'file' = the PHP property name\n\ndefineExpose(exposeMeta)\n\u003C\u002Fscript>\n",[371,1264,1265,1270,1278,1297,1304,1318,1332,1346,1360,1374,1388,1393,1401,1409,1413,1433,1452,1472,1496,1500,1518,1522,1572,1576,1582,1589,1596,1603,1610,1615,1640,1644,1650],{"__ignoreMap":394},[398,1266,1267],{"class":400,"line":401},[398,1268,1269],{"class":404},"\u003C!-- app\u002Fcwa\u002Fcomponents\u002FImage\u002Fadmin\u002FImage.vue -->\n",[398,1271,1272,1274,1276],{"class":400,"line":408},[398,1273,412],{"class":411},[398,1275,416],{"class":415},[398,1277,419],{"class":411},[398,1279,1280,1282,1284,1286,1288,1290,1293,1295],{"class":400,"line":422},[398,1281,425],{"class":411},[398,1283,428],{"class":415},[398,1285,432],{"class":431},[398,1287,435],{"class":411},[398,1289,439],{"class":438},[398,1291,1292],{"class":442},"p-4",[398,1294,439],{"class":438},[398,1296,419],{"class":411},[398,1298,1299,1301],{"class":400,"line":450},[398,1300,453],{"class":411},[398,1302,1303],{"class":415},"CwaUiFormFile\n",[398,1305,1306,1309,1311,1313,1316],{"class":400,"line":473},[398,1307,1308],{"class":431},"            v-model",[398,1310,435],{"class":411},[398,1312,439],{"class":438},[398,1314,1315],{"class":442},"filenameInputModel",[398,1317,495],{"class":438},[398,1319,1320,1323,1325,1327,1330],{"class":400,"line":482},[398,1321,1322],{"class":431},"            label",[398,1324,435],{"class":411},[398,1326,439],{"class":438},[398,1328,1329],{"class":442},"Upload Image",[398,1331,495],{"class":438},[398,1333,1334,1337,1339,1341,1344],{"class":400,"line":498},[398,1335,1336],{"class":431},"            :disabled",[398,1338,435],{"class":411},[398,1340,439],{"class":438},[398,1342,1343],{"class":442},"updating",[398,1345,495],{"class":438},[398,1347,1348,1351,1353,1355,1358],{"class":400,"line":513},[398,1349,1350],{"class":431},"            :file-exists",[398,1352,435],{"class":411},[398,1354,439],{"class":438},[398,1356,1357],{"class":442},"fileExists",[398,1359,495],{"class":438},[398,1361,1362,1365,1367,1369,1372],{"class":400,"line":528},[398,1363,1364],{"class":431},"            @change",[398,1366,435],{"class":411},[398,1368,439],{"class":438},[398,1370,1371],{"class":442},"handleInputChangeFile",[398,1373,495],{"class":438},[398,1375,1376,1379,1381,1383,1386],{"class":400,"line":543},[398,1377,1378],{"class":431},"            @delete",[398,1380,435],{"class":411},[398,1382,439],{"class":438},[398,1384,1385],{"class":442},"handleInputDeleteFile",[398,1387,495],{"class":438},[398,1389,1390],{"class":400,"line":549},[398,1391,1392],{"class":411},"        \u002F>\n",[398,1394,1395,1397,1399],{"class":400,"line":559},[398,1396,609],{"class":411},[398,1398,428],{"class":415},[398,1400,419],{"class":411},[398,1402,1403,1405,1407],{"class":400,"line":567},[398,1404,619],{"class":411},[398,1406,416],{"class":415},[398,1408,419],{"class":411},[398,1410,1411],{"class":400,"line":582},[398,1412,630],{"emptyLinePlaceholder":629},[398,1414,1415,1417,1419,1421,1423,1425,1427,1429,1431],{"class":400,"line":597},[398,1416,412],{"class":411},[398,1418,638],{"class":415},[398,1420,641],{"class":431},[398,1422,644],{"class":431},[398,1424,435],{"class":411},[398,1426,439],{"class":438},[398,1428,651],{"class":442},[398,1430,439],{"class":438},[398,1432,419],{"class":411},[398,1434,1435,1437,1439,1442,1444,1446,1448,1450],{"class":400,"line":606},[398,1436,662],{"class":661},[398,1438,668],{"class":411},[398,1440,1441],{"class":671}," toRef",[398,1443,675],{"class":411},[398,1445,678],{"class":661},[398,1447,681],{"class":438},[398,1449,393],{"class":442},[398,1451,687],{"class":438},[398,1453,1454,1456,1458,1460,1462,1464,1466,1468,1470],{"class":400,"line":616},[398,1455,662],{"class":661},[398,1457,665],{"class":661},[398,1459,668],{"class":411},[398,1461,672],{"class":671},[398,1463,675],{"class":411},[398,1465,678],{"class":661},[398,1467,681],{"class":438},[398,1469,684],{"class":442},[398,1471,687],{"class":438},[398,1473,1474,1476,1478,1481,1483,1486,1488,1490,1492,1494],{"class":400,"line":626},[398,1475,662],{"class":661},[398,1477,668],{"class":411},[398,1479,1480],{"class":671}," useCwaResourceManagerTab",[398,1482,700],{"class":411},[398,1484,1485],{"class":671}," useCwaResourceUpload",[398,1487,675],{"class":411},[398,1489,678],{"class":661},[398,1491,681],{"class":438},[398,1493,712],{"class":442},[398,1495,687],{"class":438},[398,1497,1498],{"class":400,"line":633},[398,1499,630],{"emptyLinePlaceholder":629},[398,1501,1502,1504,1506,1508,1510,1512,1514,1516],{"class":400,"line":658},[398,1503,726],{"class":725},[398,1505,730],{"class":729},[398,1507,734],{"class":733},[398,1509,738],{"class":737},[398,1511,412],{"class":411},[398,1513,744],{"class":743},[398,1515,747],{"class":411},[398,1517,750],{"class":671},[398,1519,1520],{"class":400,"line":690},[398,1521,630],{"emptyLinePlaceholder":629},[398,1523,1524,1526,1528,1531,1533,1536,1538,1540,1542,1544,1546,1548,1550,1552,1555,1557,1559,1562,1564,1568,1570],{"class":400,"line":717},[398,1525,726],{"class":725},[398,1527,668],{"class":411},[398,1529,1530],{"class":729}," exposeMeta",[398,1532,700],{"class":411},[398,1534,1535],{"class":729}," iri",[398,1537,675],{"class":411},[398,1539,734],{"class":733},[398,1541,1480],{"class":737},[398,1543,1046],{"class":671},[398,1545,1049],{"class":411},[398,1547,459],{"class":1052},[398,1549,1000],{"class":411},[398,1551,681],{"class":438},[398,1553,1554],{"class":442},"Image",[398,1556,1063],{"class":438},[398,1558,700],{"class":411},[398,1560,1561],{"class":1052}," order",[398,1563,1000],{"class":411},[398,1565,1567],{"class":1566},"scSvc"," 1",[398,1569,675],{"class":411},[398,1571,1068],{"class":671},[398,1573,1574],{"class":400,"line":722},[398,1575,630],{"emptyLinePlaceholder":629},[398,1577,1578,1580],{"class":400,"line":753},[398,1579,726],{"class":725},[398,1581,763],{"class":411},[398,1583,1584,1587],{"class":400,"line":758},[398,1585,1586],{"class":729},"    filenameInputModel",[398,1588,772],{"class":411},[398,1590,1591,1594],{"class":400,"line":766},[398,1592,1593],{"class":729},"    updating",[398,1595,772],{"class":411},[398,1597,1598,1601],{"class":400,"line":775},[398,1599,1600],{"class":729},"    fileExists",[398,1602,772],{"class":411},[398,1604,1605,1608],{"class":400,"line":783},[398,1606,1607],{"class":729},"    handleInputChangeFile",[398,1609,772],{"class":411},[398,1611,1612],{"class":400,"line":791},[398,1613,1614],{"class":729},"    handleInputDeleteFile\n",[398,1616,1617,1619,1621,1623,1626,1628,1630,1632,1634,1637],{"class":400,"line":799},[398,1618,808],{"class":411},[398,1620,734],{"class":733},[398,1622,1485],{"class":737},[398,1624,1625],{"class":671},"(iri",[398,1627,700],{"class":411},[398,1629,681],{"class":438},[398,1631,1169],{"class":442},[398,1633,1063],{"class":438},[398,1635,1636],{"class":671},")  ",[398,1638,1639],{"class":404},"\u002F\u002F 'file' = the PHP property name\n",[398,1641,1642],{"class":400,"line":805},[398,1643,630],{"emptyLinePlaceholder":629},[398,1645,1646,1648],{"class":400,"line":829},[398,1647,837],{"class":737},[398,1649,840],{"class":671},[398,1651,1652,1654,1656],{"class":400,"line":834},[398,1653,619],{"class":411},[398,1655,638],{"class":415},[398,1657,419],{"class":411},[367,1659,1660,1663,1664,1667],{},[371,1661,1662],{},"useCwaResourceUpload(iri, propertyName)"," handles file selection, multipart upload to ",[371,1665,1666],{},"{iri}\u002Fupload",", and deletion via PATCH.",[384,1669,1671],{"id":1670},"video-pdf-and-other-files","Video, PDF, and Other Files",[367,1673,1674,1675,1677,1678,1680,1681,1683],{},"The same pattern works for any file type. For non-image files, ",[371,1676,492],{}," is ",[371,1679,908],{}," as soon as ",[371,1682,508],{}," is available (no image load event to wait for):",[389,1685,1687],{"className":391,"code":1686,"language":393,"meta":394,"style":394},"\u003Ctemplate>\n    \u003Ca v-if=\"contentUrl\" :href=\"contentUrl\" download>\n        Download PDF\n    \u003C\u002Fa>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nimport type { IriProp } from '#cwa\u002Fcomposables\u002Fcwa-resource'\nimport { useCwaComponent, withImage } from '#imports'\n\nconst props = defineProps\u003CIriProp>()\nconst { exposeMeta, contentUrl } = useCwaComponent(props, [withImage()])\ndefineExpose(exposeMeta)\n\u003C\u002Fscript>\n",[371,1688,1689,1697,1731,1736,1744,1752,1756,1776,1796,1818,1822,1840,1868,1874],{"__ignoreMap":394},[398,1690,1691,1693,1695],{"class":400,"line":401},[398,1692,412],{"class":411},[398,1694,416],{"class":415},[398,1696,419],{"class":411},[398,1698,1699,1701,1704,1707,1709,1711,1713,1715,1718,1720,1722,1724,1726,1729],{"class":400,"line":408},[398,1700,425],{"class":411},[398,1702,1703],{"class":415},"a",[398,1705,1706],{"class":431}," v-if",[398,1708,435],{"class":411},[398,1710,439],{"class":438},[398,1712,508],{"class":442},[398,1714,439],{"class":438},[398,1716,1717],{"class":431}," :href",[398,1719,435],{"class":411},[398,1721,439],{"class":438},[398,1723,508],{"class":442},[398,1725,439],{"class":438},[398,1727,1728],{"class":431}," download",[398,1730,419],{"class":411},[398,1732,1733],{"class":400,"line":422},[398,1734,1735],{"class":671},"        Download PDF\n",[398,1737,1738,1740,1742],{"class":400,"line":450},[398,1739,609],{"class":411},[398,1741,1703],{"class":415},[398,1743,419],{"class":411},[398,1745,1746,1748,1750],{"class":400,"line":473},[398,1747,619],{"class":411},[398,1749,416],{"class":415},[398,1751,419],{"class":411},[398,1753,1754],{"class":400,"line":482},[398,1755,630],{"emptyLinePlaceholder":629},[398,1757,1758,1760,1762,1764,1766,1768,1770,1772,1774],{"class":400,"line":498},[398,1759,412],{"class":411},[398,1761,638],{"class":415},[398,1763,641],{"class":431},[398,1765,644],{"class":431},[398,1767,435],{"class":411},[398,1769,439],{"class":438},[398,1771,651],{"class":442},[398,1773,439],{"class":438},[398,1775,419],{"class":411},[398,1777,1778,1780,1782,1784,1786,1788,1790,1792,1794],{"class":400,"line":513},[398,1779,662],{"class":661},[398,1781,665],{"class":661},[398,1783,668],{"class":411},[398,1785,672],{"class":671},[398,1787,675],{"class":411},[398,1789,678],{"class":661},[398,1791,681],{"class":438},[398,1793,684],{"class":442},[398,1795,687],{"class":438},[398,1797,1798,1800,1802,1804,1806,1808,1810,1812,1814,1816],{"class":400,"line":528},[398,1799,662],{"class":661},[398,1801,668],{"class":411},[398,1803,697],{"class":671},[398,1805,700],{"class":411},[398,1807,703],{"class":671},[398,1809,675],{"class":411},[398,1811,678],{"class":661},[398,1813,681],{"class":438},[398,1815,712],{"class":442},[398,1817,687],{"class":438},[398,1819,1820],{"class":400,"line":543},[398,1821,630],{"emptyLinePlaceholder":629},[398,1823,1824,1826,1828,1830,1832,1834,1836,1838],{"class":400,"line":549},[398,1825,726],{"class":725},[398,1827,730],{"class":729},[398,1829,734],{"class":733},[398,1831,738],{"class":737},[398,1833,412],{"class":411},[398,1835,744],{"class":743},[398,1837,747],{"class":411},[398,1839,750],{"class":671},[398,1841,1842,1844,1846,1848,1850,1852,1854,1856,1858,1860,1862,1864,1866],{"class":400,"line":559},[398,1843,726],{"class":725},[398,1845,668],{"class":411},[398,1847,1530],{"class":729},[398,1849,700],{"class":411},[398,1851,1015],{"class":729},[398,1853,675],{"class":411},[398,1855,734],{"class":733},[398,1857,697],{"class":737},[398,1859,815],{"class":671},[398,1861,700],{"class":411},[398,1863,820],{"class":671},[398,1865,823],{"class":737},[398,1867,826],{"class":671},[398,1869,1870,1872],{"class":400,"line":567},[398,1871,837],{"class":737},[398,1873,840],{"class":671},[398,1875,1876,1878,1880],{"class":400,"line":582},[398,1877,619],{"class":411},[398,1879,638],{"class":415},[398,1881,419],{"class":411},[367,1883,1884],{},"For video:",[389,1886,1888],{"className":391,"code":1887,"language":393,"meta":394,"style":394},"\u003Cvideo v-if=\"contentUrl\" :src=\"contentUrl\" controls class=\"w-full\" \u002F>\n",[371,1889,1890],{"__ignoreMap":394},[398,1891,1892,1894,1897,1899,1901,1903,1905,1907,1910,1913,1915,1917,1919,1921,1924,1926,1928,1930,1933,1935],{"class":400,"line":401},[398,1893,412],{"class":411},[398,1895,1896],{"class":415},"video",[398,1898,1706],{"class":661},[398,1900,435],{"class":411},[398,1902,439],{"class":438},[398,1904,508],{"class":671},[398,1906,439],{"class":438},[398,1908,1909],{"class":411}," :",[398,1911,1912],{"class":431},"src",[398,1914,435],{"class":411},[398,1916,439],{"class":438},[398,1918,508],{"class":671},[398,1920,439],{"class":438},[398,1922,1923],{"class":431}," controls",[398,1925,432],{"class":431},[398,1927,435],{"class":411},[398,1929,439],{"class":438},[398,1931,1932],{"class":442},"w-full",[398,1934,439],{"class":438},[398,1936,1937],{"class":411}," \u002F>\n",[384,1939,1941],{"id":1940},"transition-while-loading","Transition While Loading",[389,1943,1945],{"className":391,"code":1944,"language":393,"meta":394,"style":394},"\u003Cstyle>\n.fade-enter-active, .fade-leave-active { transition: opacity 0.3s; }\n.fade-enter-from, .fade-leave-to { opacity: 0; }\n\u003C\u002Fstyle>\n",[371,1946,1947,1956,1996,2024],{"__ignoreMap":394},[398,1948,1949,1951,1954],{"class":400,"line":401},[398,1950,412],{"class":411},[398,1952,1953],{"class":415},"style",[398,1955,419],{"class":411},[398,1957,1958,1961,1964,1966,1969,1972,1974,1978,1980,1983,1986,1990,1993],{"class":400,"line":408},[398,1959,1160],{"class":1960},"sn4go",[398,1962,1963],{"class":743},"fade-enter-active",[398,1965,700],{"class":411},[398,1967,1968],{"class":1960}," .",[398,1970,1971],{"class":743},"fade-leave-active",[398,1973,668],{"class":411},[398,1975,1977],{"class":1976},"ssUTh"," transition",[398,1979,1000],{"class":411},[398,1981,1982],{"class":671}," opacity ",[398,1984,1985],{"class":1566},"0.3",[398,1987,1989],{"class":1988},"stmX-","s",[398,1991,1992],{"class":411},";",[398,1994,1995],{"class":411}," }\n",[398,1997,1998,2000,2003,2005,2007,2010,2012,2015,2017,2020,2022],{"class":400,"line":422},[398,1999,1160],{"class":1960},[398,2001,2002],{"class":743},"fade-enter-from",[398,2004,700],{"class":411},[398,2006,1968],{"class":1960},[398,2008,2009],{"class":743},"fade-leave-to",[398,2011,668],{"class":411},[398,2013,2014],{"class":1976}," opacity",[398,2016,1000],{"class":411},[398,2018,2019],{"class":1566}," 0",[398,2021,1992],{"class":411},[398,2023,1995],{"class":411},[398,2025,2026,2028,2030],{"class":400,"line":450},[398,2027,619],{"class":411},[398,2029,1953],{"class":415},[398,2031,419],{"class":411},[367,2033,2034,2035,2038,2039,2042],{},"The ",[371,2036,2037],{},"\u003CTransition name=\"fade\">"," wrapping the ",[371,2040,2041],{},"\u003CNuxtImg>"," produces a smooth fade-in once the image loads.",[1953,2044,2045],{},"html pre.shiki code .sTBSN, html code.shiki .sTBSN{--shiki-light:#6A737D;--shiki-light-font-style:inherit;--shiki-default:#6A737D;--shiki-default-font-style:inherit;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sOvfz, html code.shiki .sOvfz{--shiki-light:#24292E;--shiki-default:#E1E4E8;--shiki-dark:#89DDFF}html pre.shiki code .s-h7I, html code.shiki .s-h7I{--shiki-light:#22863A;--shiki-default:#85E89D;--shiki-dark:#F07178}html pre.shiki code .sGtlX, html code.shiki .sGtlX{--shiki-light:#6F42C1;--shiki-default:#B392F0;--shiki-dark:#C792EA}html pre.shiki code .seSrl, html code.shiki .seSrl{--shiki-light:#032F62;--shiki-default:#9ECBFF;--shiki-dark:#89DDFF}html pre.shiki code .sLL54, html code.shiki .sLL54{--shiki-light:#032F62;--shiki-default:#9ECBFF;--shiki-dark:#C3E88D}html pre.shiki code .s01iV, html code.shiki .s01iV{--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-default:#FDAEB7;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:inherit}html pre.shiki code .sm4w6, html code.shiki .sm4w6{--shiki-light:#D73A49;--shiki-light-font-style:inherit;--shiki-default:#F97583;--shiki-default-font-style:inherit;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sPB8G, html code.shiki .sPB8G{--shiki-light:#24292E;--shiki-default:#E1E4E8;--shiki-dark:#BABED8}html pre.shiki code .swB56, html code.shiki .swB56{--shiki-light:#D73A49;--shiki-default:#F97583;--shiki-dark:#C792EA}html pre.shiki code .sc2zw, html code.shiki .sc2zw{--shiki-light:#005CC5;--shiki-default:#79B8FF;--shiki-dark:#BABED8}html pre.shiki code .sVlFx, html code.shiki .sVlFx{--shiki-light:#D73A49;--shiki-default:#F97583;--shiki-dark:#89DDFF}html pre.shiki code .sKpYG, html code.shiki .sKpYG{--shiki-light:#6F42C1;--shiki-default:#B392F0;--shiki-dark:#82AAFF}html pre.shiki code .sRCss, html code.shiki .sRCss{--shiki-light:#6F42C1;--shiki-default:#B392F0;--shiki-dark:#FFCB6B}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sDHlG, html code.shiki .sDHlG{--shiki-light:#24292E;--shiki-default:#E1E4E8;--shiki-dark:#F07178}html pre.shiki code .scSvc, html code.shiki .scSvc{--shiki-light:#005CC5;--shiki-default:#79B8FF;--shiki-dark:#F78C6C}html pre.shiki code .sn4go, html code.shiki .sn4go{--shiki-light:#6F42C1;--shiki-default:#B392F0;--shiki-dark:#89DDFF}html pre.shiki code .ssUTh, html code.shiki .ssUTh{--shiki-light:#005CC5;--shiki-default:#79B8FF;--shiki-dark:#B2CCD6}html pre.shiki code .stmX-, html code.shiki .stmX-{--shiki-light:#D73A49;--shiki-default:#F97583;--shiki-dark:#F78C6C}",{"title":394,"searchDepth":408,"depth":408,"links":2047},[2048,2049,2051,2052,2053,2054,2055],{"id":386,"depth":408,"text":387},{"id":852,"depth":408,"text":2050},"Return Values from withImage()",{"id":989,"depth":408,"text":990},{"id":1085,"depth":408,"text":1086},{"id":1258,"depth":408,"text":1259},{"id":1670,"depth":408,"text":1671},{"id":1940,"depth":408,"text":1941},"Display uploaded files with useCwaComponent and withImage(), manage uploads in admin tabs with useCwaResourceUpload, and use Imagine filter variants.","md",null,{},{"title":301,"description":2056},"TkHgZapbbVEeGkh7tMUdXLvB6r5iKKr1efR5UDvlqL0",[2063,2065],{"title":292,"path":293,"stem":294,"description":2064,"children":-1},"Resolve the URL path for a CWA resource — convert an IRI to the route it lives at.",{"title":305,"path":306,"stem":307,"description":2066,"children":-1},"Render paginated resource lists with useCwaComponent and the withCollection() plugin, with page navigation bound to the URL query string.",1782512895925]