[{"data":1,"prerenderedAt":1124},["ShallowReactive",2],{"navigation":3,"\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-image-resource":358,"\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-image-resource-surround":1119},[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":360,"badge":361,"body":364,"description":1112,"extension":1113,"links":1114,"meta":1115,"navigation":1116,"path":243,"seo":1117,"stem":244,"__hash__":1118},"docs\u002F5.nuxt-module\u002F6.composables\u002F1.component\u002F3.use-cwa-image-resource.md","useCwaImageResource",{"label":362,"color":363},"Draft","amber",{"type":365,"value":366,"toc":1106},"minimark",[367,389,400,678,683,742,762,766,900,904,1045,1051,1055,1058,1089,1102],[368,369,372],"callout",{"color":370,"icon":371},"warning","i-heroicons-exclamation-triangle",[373,374,375,379,380,388],"p",{},[376,377,378],"strong",{},"Deprecated."," Use ",[381,382,384],"a",{"href":383},"\u002Fnuxt-module\u002Fcomposables\u002Fcomponent\u002Fuse-cwa-component#withimage-imagops",[385,386,387],"code",{},"useCwaComponent(props, [withImage()])"," instead. This composable still works but may be removed in a future version.",[373,390,391,392,395,396,399],{},"For components backed by a PHP entity with ",[385,393,394],{},"#[Silverback\\Uploadable]"," — wraps ",[385,397,398],{},"useCwaResource"," with image URL and load state.",[401,402,407],"pre",{"className":403,"code":404,"language":405,"meta":406,"style":406},"language-ts shiki shiki-themes github-light github-dark material-theme-palenight","import { 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  loaded,\n  handleLoad\n} = useCwaImageResource(toRef(props, 'iri'), {\n  imagineFilterName: 'thumbnail'\n})\n\nconst resource = getResource()\ndefineExpose(exposeMeta)\n","ts","",[385,408,409,443,467,488,495,527,532,540,549,557,565,573,581,587,624,641,649,654,669],{"__ignoreMap":406},[410,411,414,418,422,426,429,432,436,440],"span",{"class":412,"line":413},"line",1,[410,415,417],{"class":416},"sm4w6","import",[410,419,421],{"class":420},"sOvfz"," {",[410,423,425],{"class":424},"sPB8G"," toRef",[410,427,428],{"class":420}," }",[410,430,431],{"class":416}," from",[410,433,435],{"class":434},"seSrl"," '",[410,437,439],{"class":438},"sLL54","vue",[410,441,442],{"class":434},"'\n",[410,444,446,448,451,453,456,458,460,462,465],{"class":412,"line":445},2,[410,447,417],{"class":416},[410,449,450],{"class":416}," type",[410,452,421],{"class":420},[410,454,455],{"class":424}," IriProp",[410,457,428],{"class":420},[410,459,431],{"class":416},[410,461,435],{"class":434},[410,463,464],{"class":438},"#cwa\u002Fcomposables\u002Fcwa-resource",[410,466,442],{"class":434},[410,468,470,472,474,477,479,481,483,486],{"class":412,"line":469},3,[410,471,417],{"class":416},[410,473,421],{"class":420},[410,475,476],{"class":424}," useCwaImageResource",[410,478,428],{"class":420},[410,480,431],{"class":416},[410,482,435],{"class":434},[410,484,485],{"class":438},"#imports",[410,487,442],{"class":434},[410,489,491],{"class":412,"line":490},4,[410,492,494],{"emptyLinePlaceholder":493},true,"\n",[410,496,498,502,506,510,514,517,521,524],{"class":412,"line":497},5,[410,499,501],{"class":500},"swB56","const",[410,503,505],{"class":504},"sc2zw"," props",[410,507,509],{"class":508},"sVlFx"," =",[410,511,513],{"class":512},"sKpYG"," defineProps",[410,515,516],{"class":420},"\u003C",[410,518,520],{"class":519},"sRCss","IriProp",[410,522,523],{"class":420},">",[410,525,526],{"class":424},"()\n",[410,528,530],{"class":412,"line":529},6,[410,531,494],{"emptyLinePlaceholder":493},[410,533,535,537],{"class":412,"line":534},7,[410,536,501],{"class":500},[410,538,539],{"class":420}," {\n",[410,541,543,546],{"class":412,"line":542},8,[410,544,545],{"class":504},"  getResource",[410,547,548],{"class":420},",\n",[410,550,552,555],{"class":412,"line":551},9,[410,553,554],{"class":504},"  exposeMeta",[410,556,548],{"class":420},[410,558,560,563],{"class":412,"line":559},10,[410,561,562],{"class":504},"  contentUrl",[410,564,548],{"class":420},[410,566,568,571],{"class":412,"line":567},11,[410,569,570],{"class":504},"  displayMedia",[410,572,548],{"class":420},[410,574,576,579],{"class":412,"line":575},12,[410,577,578],{"class":504},"  loaded",[410,580,548],{"class":420},[410,582,584],{"class":412,"line":583},13,[410,585,586],{"class":504},"  handleLoad\n",[410,588,590,593,595,597,600,603,606,609,611,614,617,620,622],{"class":412,"line":589},14,[410,591,592],{"class":420},"}",[410,594,509],{"class":508},[410,596,476],{"class":512},[410,598,599],{"class":424},"(",[410,601,602],{"class":512},"toRef",[410,604,605],{"class":424},"(props",[410,607,608],{"class":420},",",[410,610,435],{"class":434},[410,612,613],{"class":438},"iri",[410,615,616],{"class":434},"'",[410,618,619],{"class":424},")",[410,621,608],{"class":420},[410,623,539],{"class":420},[410,625,627,631,634,636,639],{"class":412,"line":626},15,[410,628,630],{"class":629},"sDHlG","  imagineFilterName",[410,632,633],{"class":420},":",[410,635,435],{"class":434},[410,637,638],{"class":438},"thumbnail",[410,640,442],{"class":434},[410,642,644,646],{"class":412,"line":643},16,[410,645,592],{"class":420},[410,647,648],{"class":424},")\n",[410,650,652],{"class":412,"line":651},17,[410,653,494],{"emptyLinePlaceholder":493},[410,655,657,659,662,664,667],{"class":412,"line":656},18,[410,658,501],{"class":500},[410,660,661],{"class":504}," resource",[410,663,509],{"class":508},[410,665,666],{"class":512}," getResource",[410,668,526],{"class":424},[410,670,672,675],{"class":412,"line":671},19,[410,673,674],{"class":512},"defineExpose",[410,676,677],{"class":424},"(exposeMeta)\n",[679,680,682],"h2",{"id":681},"signature","Signature",[401,684,686],{"className":403,"code":685,"language":405,"meta":406,"style":406},"useCwaImageResource(\n  iri: Ref\u003Cstring>,\n  options?: {\n    imagineFilterName?: string   \u002F\u002F which Imagine filter to use as contentUrl\n  }\n)\n",[385,687,688,695,709,719,733,738],{"__ignoreMap":406},[410,689,690,692],{"class":412,"line":413},[410,691,360],{"class":512},[410,693,694],{"class":424},"(\n",[410,696,697,700,702,705,707],{"class":412,"line":445},[410,698,699],{"class":424},"  iri: Ref",[410,701,516],{"class":508},[410,703,704],{"class":424},"string",[410,706,523],{"class":508},[410,708,548],{"class":420},[410,710,711,714,717],{"class":412,"line":469},[410,712,713],{"class":424},"  options",[410,715,716],{"class":508},"?:",[410,718,539],{"class":420},[410,720,721,724,726,729],{"class":412,"line":490},[410,722,723],{"class":424},"    imagineFilterName?",[410,725,633],{"class":420},[410,727,728],{"class":424}," string   ",[410,730,732],{"class":731},"sTBSN","\u002F\u002F which Imagine filter to use as contentUrl\n",[410,734,735],{"class":412,"line":497},[410,736,737],{"class":420},"  }\n",[410,739,740],{"class":412,"line":529},[410,741,648],{"class":424},[373,743,744,749,750,753,754,757,758,761],{},[376,745,746],{},[385,747,748],{},"imagineFilterName"," — the name of the LiipImagineBundle filter to apply (e.g. ",[385,751,752],{},"'thumbnail'",", ",[385,755,756],{},"'hero'","). If omitted, ",[385,759,760],{},"contentUrl"," is the raw uploaded file URL.",[679,763,765],{"id":764},"return-values","Return values",[767,768,769,785],"table",{},[770,771,772],"thead",{},[773,774,775,779,782],"tr",{},[776,777,778],"th",{},"Return",[776,780,781],{},"Type",[776,783,784],{},"Purpose",[786,787,788,806,821,835,858,877],"tbody",{},[773,789,790,796,801],{},[791,792,793],"td",{},[385,794,795],{},"getResource",[791,797,798],{},[385,799,800],{},"() => Ref\u003CResource>",[791,802,803,804],{},"Same as ",[385,805,398],{},[773,807,808,813,816],{},[791,809,810],{},[385,811,812],{},"exposeMeta",[791,814,815],{},"object",[791,817,818,819],{},"Pass to ",[385,820,674],{},[773,822,823,827,832],{},[791,824,825],{},[385,826,760],{},[791,828,829],{},[385,830,831],{},"ComputedRef\u003Cstring | undefined>",[791,833,834],{},"URL of the (optionally filtered) image",[773,836,837,842,847],{},[791,838,839],{},[385,840,841],{},"loaded",[791,843,844],{},[385,845,846],{},"Ref\u003Cboolean>",[791,848,849,850,853,854,857],{},"Becomes ",[385,851,852],{},"true"," when ",[385,855,856],{},"handleLoad()"," is called",[773,859,860,865,870],{},[791,861,862],{},[385,863,864],{},"displayMedia",[791,866,867],{},[385,868,869],{},"ComputedRef\u003Cboolean>",[791,871,872,853,874,876],{},[385,873,852],{},[385,875,760],{}," is set AND image has loaded",[773,878,879,884,889],{},[791,880,881],{},[385,882,883],{},"handleLoad",[791,885,886],{},[385,887,888],{},"() => void",[791,890,891,892,895,896,899],{},"Call on the ",[385,893,894],{},"\u003Cimg>"," element's ",[385,897,898],{},"@load"," event",[679,901,903],{"id":902},"example","Example",[401,905,908],{"className":906,"code":907,"language":439,"meta":406,"style":406},"language-vue shiki shiki-themes github-light github-dark material-theme-palenight","\u003Ctemplate>\n  \u003CTransition name=\"fade\">\n    \u003CNuxtImg\n      v-if=\"displayMedia\"\n      :src=\"contentUrl\"\n      @load=\"handleLoad\"\n    \u002F>\n  \u003C\u002FTransition>\n  \u003Cdiv v-else class=\"skeleton h-48 w-full bg-gray-200 animate-pulse\" \u002F>\n\u003C\u002Ftemplate>\n",[385,909,910,921,946,954,968,981,994,999,1008,1036],{"__ignoreMap":406},[410,911,912,914,918],{"class":412,"line":413},[410,913,516],{"class":420},[410,915,917],{"class":916},"s-h7I","template",[410,919,920],{"class":420},">\n",[410,922,923,926,929,933,936,939,942,944],{"class":412,"line":445},[410,924,925],{"class":420},"  \u003C",[410,927,928],{"class":916},"Transition",[410,930,932],{"class":931},"sGtlX"," name",[410,934,935],{"class":420},"=",[410,937,938],{"class":434},"\"",[410,940,941],{"class":438},"fade",[410,943,938],{"class":434},[410,945,920],{"class":420},[410,947,948,951],{"class":412,"line":469},[410,949,950],{"class":420},"    \u003C",[410,952,953],{"class":916},"NuxtImg\n",[410,955,956,959,961,963,965],{"class":412,"line":490},[410,957,958],{"class":931},"      v-if",[410,960,935],{"class":420},[410,962,938],{"class":434},[410,964,864],{"class":438},[410,966,967],{"class":434},"\"\n",[410,969,970,973,975,977,979],{"class":412,"line":497},[410,971,972],{"class":931},"      :src",[410,974,935],{"class":420},[410,976,938],{"class":434},[410,978,760],{"class":438},[410,980,967],{"class":434},[410,982,983,986,988,990,992],{"class":412,"line":529},[410,984,985],{"class":931},"      @load",[410,987,935],{"class":420},[410,989,938],{"class":434},[410,991,883],{"class":438},[410,993,967],{"class":434},[410,995,996],{"class":412,"line":534},[410,997,998],{"class":420},"    \u002F>\n",[410,1000,1001,1004,1006],{"class":412,"line":542},[410,1002,1003],{"class":420},"  \u003C\u002F",[410,1005,928],{"class":916},[410,1007,920],{"class":420},[410,1009,1010,1012,1015,1018,1021,1023,1025,1028,1030,1034],{"class":412,"line":551},[410,1011,925],{"class":420},[410,1013,1014],{"class":916},"div",[410,1016,1017],{"class":931}," v-else",[410,1019,1020],{"class":931}," class",[410,1022,935],{"class":420},[410,1024,938],{"class":434},[410,1026,1027],{"class":438},"skeleton h-48 w-full bg-gray-200 animate-pulse",[410,1029,938],{"class":434},[410,1031,1033],{"class":1032},"s01iV"," \u002F",[410,1035,920],{"class":420},[410,1037,1038,1041,1043],{"class":412,"line":559},[410,1039,1040],{"class":420},"\u003C\u002F",[410,1042,917],{"class":916},[410,1044,920],{"class":420},[373,1046,1047,1048,1050],{},"The ",[385,1049,864],{}," computed ensures the skeleton shows until the actual image has loaded in the browser.",[679,1052,1054],{"id":1053},"accessing-multiple-imagine-variants","Accessing multiple Imagine variants",[373,1056,1057],{},"The raw media objects are available on the resource:",[401,1059,1061],{"className":403,"code":1060,"language":405,"meta":406,"style":406},"const resource = getResource()\n\n\u002F\u002F resource.value._metadata.mediaObjects.file.thumbnail.contentUrl\n\u002F\u002F resource.value._metadata.mediaObjects.file.hero.contentUrl\n",[385,1062,1063,1075,1079,1084],{"__ignoreMap":406},[410,1064,1065,1067,1069,1071,1073],{"class":412,"line":413},[410,1066,501],{"class":500},[410,1068,661],{"class":504},[410,1070,509],{"class":508},[410,1072,666],{"class":512},[410,1074,526],{"class":424},[410,1076,1077],{"class":412,"line":445},[410,1078,494],{"emptyLinePlaceholder":493},[410,1080,1081],{"class":412,"line":469},[410,1082,1083],{"class":731},"\u002F\u002F resource.value._metadata.mediaObjects.file.thumbnail.contentUrl\n",[410,1085,1086],{"class":412,"line":490},[410,1087,1088],{"class":731},"\u002F\u002F resource.value._metadata.mediaObjects.file.hero.contentUrl\n",[373,1090,1091,1092,1094,1095,1097,1098,1101],{},"Call ",[385,1093,360],{}," with different ",[385,1096,748],{}," options, or access ",[385,1099,1100],{},"_metadata.mediaObjects"," directly for the full map.",[1103,1104,1105],"style",{},"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 .sOvfz, html code.shiki .sOvfz{--shiki-light:#24292E;--shiki-default:#E1E4E8;--shiki-dark:#89DDFF}html pre.shiki code .sPB8G, html code.shiki .sPB8G{--shiki-light:#24292E;--shiki-default:#E1E4E8;--shiki-dark:#BABED8}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 .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 pre.shiki code .sDHlG, html code.shiki .sDHlG{--shiki-light:#24292E;--shiki-default:#E1E4E8;--shiki-dark:#F07178}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 .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 .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 .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}",{"title":406,"searchDepth":445,"depth":445,"links":1107},[1108,1109,1110,1111],{"id":681,"depth":445,"text":682},{"id":764,"depth":445,"text":765},{"id":902,"depth":445,"text":903},{"id":1053,"depth":445,"text":1054},"Extends useCwaResource for components with file uploads — adds image URL, load state, and Imagine filter variants.","md",null,{},{"title":242},{"title":360,"description":1112},"npaOVq3SmYCwXFKfZIxhYNv7J8-64BjXaf3LWRoJwak",[1120,1122],{"title":238,"path":239,"stem":240,"description":1121,"children":-1},"Composable for Collection-backed components — access paginated items, total pages, and page navigation.",{"title":246,"path":247,"stem":248,"description":1123,"children":-1},"Handle form submission, track in-flight state, and read form-level errors from a CWA Form component resource.",1782512898729]