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