[{"data":1,"prerenderedAt":865},["ShallowReactive",2],{"docs-\u002Fimgix":3},{"id":4,"title":5,"body":6,"description":858,"extension":859,"meta":860,"navigation":255,"path":861,"seo":862,"stem":863,"__hash__":864},"docs\u002Fdocs\u002Fimgix.md","Imgix Integration",{"type":7,"value":8,"toc":841},"minimark",[9,13,17,20,25,33,39,49,54,60,65,71,74,80,82,86,93,140,143,156,163,165,169,176,187,190,192,196,199,222,227,327,331,334,348,355,359,370,385,413,417,420,524,528,535,596,598,602,606,609,703,707,710,770,774,777,837],[10,11,5],"h1",{"id":12},"imgix-integration",[14,15,16],"p",{},"Cachely has first-class support for Imgix. It proxies and caches your Imgix asset URLs and provides a response transformer that rewrites Imgix CDN URLs in your API responses.",[18,19],"hr",{},[21,22,24],"h2",{"id":23},"supported-url-patterns","Supported URL patterns",[14,26,27,28,32],{},"Imgix serves assets from your source domain, either the default ",[29,30,31],"code",{},"*.imgix.net"," subdomain or a custom domain you've configured:",[14,34,35],{},[36,37,38],"strong",{},"Standard source domain:",[40,41,46],"pre",{"className":42,"code":44,"language":45},[43],"language-text","https:\u002F\u002Fmy-source.imgix.net\u002Fimages\u002Fphoto.jpg\n","text",[29,47,44],{"__ignoreMap":48},"",[14,50,51],{},[36,52,53],{},"With rendering parameters:",[40,55,58],{"className":56,"code":57,"language":45},[43],"https:\u002F\u002Fmy-source.imgix.net\u002Fimages\u002Fphoto.jpg?w=800&h=600&fit=crop&auto=format\n",[29,59,57],{"__ignoreMap":48},[14,61,62],{},[36,63,64],{},"Custom subdomain:",[40,66,69],{"className":67,"code":68,"language":45},[43],"https:\u002F\u002Fimages.your-site.com\u002Fimages\u002Fphoto.jpg?auto=format\n",[29,70,68],{"__ignoreMap":48},[14,72,73],{},"These are rewritten to:",[40,75,78],{"className":76,"code":77,"language":45},[43],"https:\u002F\u002Fyour-tenant.cmsassets.com\u002Fimages\u002Fphoto.jpg\n",[29,79,77],{"__ignoreMap":48},[18,81],{},[21,83,85],{"id":84},"tenant-setup","Tenant setup",[14,87,88,89,92],{},"When creating your tenant, select ",[36,90,91],{},"Imgix"," as the CMS type and provide your Imgix source domain:",[94,95,96,109],"table",{},[97,98,99],"thead",{},[100,101,102,106],"tr",{},[103,104,105],"th",{},"Field",[103,107,108],{},"Value",[110,111,112,120,130],"tbody",{},[100,113,114,118],{},[115,116,117],"td",{},"CMS",[115,119,91],{},[100,121,122,125],{},[115,123,124],{},"Imgix domain",[115,126,127],{},[29,128,129],{},"my-source.imgix.net",[100,131,132,135],{},[115,133,134],{},"Website domain",[115,136,137],{},[29,138,139],{},"your-site.com",[14,141,142],{},"The origin is automatically configured from your source domain:",[144,145,146],"ul",{},[147,148,149,152,153],"li",{},[36,150,151],{},"Origin:"," ",[29,154,155],{},"https:\u002F\u002Fmy-source.imgix.net",[14,157,158,159,162],{},"If you use a custom subdomain (e.g. ",[29,160,161],{},"images.your-site.com",") as your Imgix source, enter that as the Imgix domain instead.",[18,164],{},[21,166,168],{"id":167},"imgix-rendering-api","Imgix Rendering API",[14,170,171,172,175],{},"Imgix applies image transformations via query parameters (e.g. ",[29,173,174],{},"?w=800&h=600&fit=crop&auto=format","). When assets are proxied through Cachely:",[144,177,178,181,184],{},[147,179,180],{},"The edge cache strips query parameters from the cache key for image types",[147,182,183],{},"This means all transformation variants share the same cache entry",[147,185,186],{},"If you rely on Imgix's rendering API for different sizes\u002Fcrops, the first cached version will be served for all variants",[14,188,189],{},"If you need different image renditions, apply transformations on the client side or serve each variant from a different path.",[18,191],{},[21,193,195],{"id":194},"response-transformer","Response transformer",[14,197,198],{},"Install the response transformer to automatically rewrite Imgix asset URLs in your API responses:",[40,200,204],{"className":201,"code":202,"language":203,"meta":48,"style":48},"language-bash shiki shiki-themes github-dark","npm install @synchronized-studio\u002Fresponse-transformer\n","bash",[29,205,206],{"__ignoreMap":48},[207,208,211,215,219],"span",{"class":209,"line":210},"line",1,[207,212,214],{"class":213},"svObZ","npm",[207,216,218],{"class":217},"sU2Wk"," install",[207,220,221],{"class":217}," @synchronized-studio\u002Fresponse-transformer\n",[223,224,226],"h3",{"id":225},"basic-usage","Basic usage",[40,228,232],{"className":229,"code":230,"language":231,"meta":48,"style":48},"language-typescript shiki shiki-themes github-dark","import { transformImgixAssetUrls } from \"@synchronized-studio\u002Fresponse-transformer\"\n\nconst data = await fetchYourCmsData()\n\nconst transformed = transformImgixAssetUrls(data, {\n  imgixDomain: \"my-source.imgix.net\",\n  cmsAssetsUrl: \"https:\u002F\u002Fyour-tenant.cmsassets.com\"\n})\n","typescript",[29,233,234,250,257,279,284,300,312,321],{"__ignoreMap":48},[207,235,236,240,244,247],{"class":209,"line":210},[207,237,239],{"class":238},"snl16","import",[207,241,243],{"class":242},"s95oV"," { transformImgixAssetUrls } ",[207,245,246],{"class":238},"from",[207,248,249],{"class":217}," \"@synchronized-studio\u002Fresponse-transformer\"\n",[207,251,253],{"class":209,"line":252},2,[207,254,256],{"emptyLinePlaceholder":255},true,"\n",[207,258,260,263,267,270,273,276],{"class":209,"line":259},3,[207,261,262],{"class":238},"const",[207,264,266],{"class":265},"sDLfK"," data",[207,268,269],{"class":238}," =",[207,271,272],{"class":238}," await",[207,274,275],{"class":213}," fetchYourCmsData",[207,277,278],{"class":242},"()\n",[207,280,282],{"class":209,"line":281},4,[207,283,256],{"emptyLinePlaceholder":255},[207,285,287,289,292,294,297],{"class":209,"line":286},5,[207,288,262],{"class":238},[207,290,291],{"class":265}," transformed",[207,293,269],{"class":238},[207,295,296],{"class":213}," transformImgixAssetUrls",[207,298,299],{"class":242},"(data, {\n",[207,301,303,306,309],{"class":209,"line":302},6,[207,304,305],{"class":242},"  imgixDomain: ",[207,307,308],{"class":217},"\"my-source.imgix.net\"",[207,310,311],{"class":242},",\n",[207,313,315,318],{"class":209,"line":314},7,[207,316,317],{"class":242},"  cmsAssetsUrl: ",[207,319,320],{"class":217},"\"https:\u002F\u002Fyour-tenant.cmsassets.com\"\n",[207,322,324],{"class":209,"line":323},8,[207,325,326],{"class":242},"})\n",[223,328,330],{"id":329},"what-gets-transformed","What gets transformed",[14,332,333],{},"The transformer processes the entire JSON response and rewrites all matching URLs. This includes:",[144,335,336,342,345],{},[147,337,338,339,341],{},"Any URL matching your Imgix source domain (",[29,340,129],{},")",[147,343,344],{},"URLs with rendering parameters (the parameters are stripped)",[147,346,347],{},"Custom subdomain URLs if your Imgix source uses one",[14,349,350,351,354],{},"Query parameters (like Imgix's ",[29,352,353],{},"?w=800&auto=format",") are stripped during rewriting.",[223,356,358],{"id":357},"using-an-environment-variable","Using an environment variable",[14,360,361,362,365,366,369],{},"Set ",[29,363,364],{},"CMS_ASSETS_URL"," in your environment and omit the ",[29,367,368],{},"cmsAssetsUrl"," option:",[40,371,373],{"className":201,"code":372,"language":203,"meta":48,"style":48},"CMS_ASSETS_URL=https:\u002F\u002Fyour-tenant.cmsassets.com\n",[29,374,375],{"__ignoreMap":48},[207,376,377,379,382],{"class":209,"line":210},[207,378,364],{"class":242},[207,380,381],{"class":238},"=",[207,383,384],{"class":217},"https:\u002F\u002Fyour-tenant.cmsassets.com\n",[40,386,388],{"className":229,"code":387,"language":231,"meta":48,"style":48},"const transformed = transformImgixAssetUrls(data, {\n  imgixDomain: \"my-source.imgix.net\"\n})\n",[29,389,390,402,409],{"__ignoreMap":48},[207,391,392,394,396,398,400],{"class":209,"line":210},[207,393,262],{"class":238},[207,395,291],{"class":265},[207,397,269],{"class":238},[207,399,296],{"class":213},[207,401,299],{"class":242},[207,403,404,406],{"class":209,"line":252},[207,405,305],{"class":242},[207,407,408],{"class":217},"\"my-source.imgix.net\"\n",[207,410,411],{"class":209,"line":259},[207,412,326],{"class":242},[223,414,416],{"id":415},"nuxt-ssr-integration","Nuxt \u002F SSR integration",[14,418,419],{},"For Nuxt or other SSR frameworks, wrap your data-fetching calls:",[40,421,423],{"className":229,"code":422,"language":231,"meta":48,"style":48},"\u002F\u002F composables\u002FuseImgixData.ts\nimport { transformImgixAssetUrls } from \"@synchronized-studio\u002Fresponse-transformer\"\n\nexport async function useImgixAssets() {\n  const data = await fetchCmsData()\n\n  return transformImgixAssetUrls(data, {\n    imgixDomain: \"my-source.imgix.net\",\n    cmsAssetsUrl: useRuntimeConfig().public.cmsAssetsUrl\n  })\n}\n",[29,424,425,431,441,445,462,478,482,491,500,512,518],{"__ignoreMap":48},[207,426,427],{"class":209,"line":210},[207,428,430],{"class":429},"sAwPA","\u002F\u002F composables\u002FuseImgixData.ts\n",[207,432,433,435,437,439],{"class":209,"line":252},[207,434,239],{"class":238},[207,436,243],{"class":242},[207,438,246],{"class":238},[207,440,249],{"class":217},[207,442,443],{"class":209,"line":259},[207,444,256],{"emptyLinePlaceholder":255},[207,446,447,450,453,456,459],{"class":209,"line":281},[207,448,449],{"class":238},"export",[207,451,452],{"class":238}," async",[207,454,455],{"class":238}," function",[207,457,458],{"class":213}," useImgixAssets",[207,460,461],{"class":242},"() {\n",[207,463,464,467,469,471,473,476],{"class":209,"line":286},[207,465,466],{"class":238},"  const",[207,468,266],{"class":265},[207,470,269],{"class":238},[207,472,272],{"class":238},[207,474,475],{"class":213}," fetchCmsData",[207,477,278],{"class":242},[207,479,480],{"class":209,"line":302},[207,481,256],{"emptyLinePlaceholder":255},[207,483,484,487,489],{"class":209,"line":314},[207,485,486],{"class":238},"  return",[207,488,296],{"class":213},[207,490,299],{"class":242},[207,492,493,496,498],{"class":209,"line":323},[207,494,495],{"class":242},"    imgixDomain: ",[207,497,308],{"class":217},[207,499,311],{"class":242},[207,501,503,506,509],{"class":209,"line":502},9,[207,504,505],{"class":242},"    cmsAssetsUrl: ",[207,507,508],{"class":213},"useRuntimeConfig",[207,510,511],{"class":242},"().public.cmsAssetsUrl\n",[207,513,515],{"class":209,"line":514},10,[207,516,517],{"class":242},"  })\n",[207,519,521],{"class":209,"line":520},11,[207,522,523],{"class":242},"}\n",[223,525,527],{"id":526},"using-the-generic-transformer","Using the generic transformer",[14,529,530,531,534],{},"You can also use the unified ",[29,532,533],{},"transformCmsAssetUrls"," function:",[40,536,538],{"className":229,"code":537,"language":231,"meta":48,"style":48},"import { transformCmsAssetUrls } from \"@synchronized-studio\u002Fresponse-transformer\"\n\nconst transformed = transformCmsAssetUrls(data, {\n  cms: \"imgix\",\n  imgixDomain: \"my-source.imgix.net\",\n  cmsAssetsUrl: \"https:\u002F\u002Fyour-tenant.cmsassets.com\"\n})\n",[29,539,540,551,555,568,578,586,592],{"__ignoreMap":48},[207,541,542,544,547,549],{"class":209,"line":210},[207,543,239],{"class":238},[207,545,546],{"class":242}," { transformCmsAssetUrls } ",[207,548,246],{"class":238},[207,550,249],{"class":217},[207,552,553],{"class":209,"line":252},[207,554,256],{"emptyLinePlaceholder":255},[207,556,557,559,561,563,566],{"class":209,"line":259},[207,558,262],{"class":238},[207,560,291],{"class":265},[207,562,269],{"class":238},[207,564,565],{"class":213}," transformCmsAssetUrls",[207,567,299],{"class":242},[207,569,570,573,576],{"class":209,"line":281},[207,571,572],{"class":242},"  cms: ",[207,574,575],{"class":217},"\"imgix\"",[207,577,311],{"class":242},[207,579,580,582,584],{"class":209,"line":286},[207,581,305],{"class":242},[207,583,308],{"class":217},[207,585,311],{"class":242},[207,587,588,590],{"class":209,"line":302},[207,589,317],{"class":242},[207,591,320],{"class":217},[207,593,594],{"class":209,"line":314},[207,595,326],{"class":242},[18,597],{},[21,599,601],{"id":600},"advanced-options","Advanced options",[223,603,605],{"id":604},"custom-transformers","Custom transformers",[14,607,608],{},"Add additional transformers that run after the default Imgix ones:",[40,610,612],{"className":229,"code":611,"language":231,"meta":48,"style":48},"const transformed = transformImgixAssetUrls(data, {\n  imgixDomain: \"my-source.imgix.net\",\n  transformers: [\n    (jsonStr, { base }) => {\n      return jsonStr.replaceAll(\"old-pattern\", \"new-pattern\")\n    }\n  ]\n})\n",[29,613,614,626,634,639,663,689,694,699],{"__ignoreMap":48},[207,615,616,618,620,622,624],{"class":209,"line":210},[207,617,262],{"class":238},[207,619,291],{"class":265},[207,621,269],{"class":238},[207,623,296],{"class":213},[207,625,299],{"class":242},[207,627,628,630,632],{"class":209,"line":252},[207,629,305],{"class":242},[207,631,308],{"class":217},[207,633,311],{"class":242},[207,635,636],{"class":209,"line":259},[207,637,638],{"class":242},"  transformers: [\n",[207,640,641,644,648,651,654,657,660],{"class":209,"line":281},[207,642,643],{"class":242},"    (",[207,645,647],{"class":646},"s9osk","jsonStr",[207,649,650],{"class":242},", { ",[207,652,653],{"class":646},"base",[207,655,656],{"class":242}," }) ",[207,658,659],{"class":238},"=>",[207,661,662],{"class":242}," {\n",[207,664,665,668,671,674,677,680,683,686],{"class":209,"line":286},[207,666,667],{"class":238},"      return",[207,669,670],{"class":242}," jsonStr.",[207,672,673],{"class":213},"replaceAll",[207,675,676],{"class":242},"(",[207,678,679],{"class":217},"\"old-pattern\"",[207,681,682],{"class":242},", ",[207,684,685],{"class":217},"\"new-pattern\"",[207,687,688],{"class":242},")\n",[207,690,691],{"class":209,"line":302},[207,692,693],{"class":242},"    }\n",[207,695,696],{"class":209,"line":314},[207,697,698],{"class":242},"  ]\n",[207,700,701],{"class":209,"line":323},[207,702,326],{"class":242},[223,704,706],{"id":705},"post-transform-hook","Post-transform hook",[14,708,709],{},"Run a function on the parsed result after all URL replacements:",[40,711,713],{"className":229,"code":712,"language":231,"meta":48,"style":48},"const transformed = transformImgixAssetUrls(data, {\n  imgixDomain: \"my-source.imgix.net\",\n  postTransform: (data) => {\n    return data\n  }\n})\n",[29,714,715,727,735,753,761,766],{"__ignoreMap":48},[207,716,717,719,721,723,725],{"class":209,"line":210},[207,718,262],{"class":238},[207,720,291],{"class":265},[207,722,269],{"class":238},[207,724,296],{"class":213},[207,726,299],{"class":242},[207,728,729,731,733],{"class":209,"line":252},[207,730,305],{"class":242},[207,732,308],{"class":217},[207,734,311],{"class":242},[207,736,737,740,743,746,749,751],{"class":209,"line":259},[207,738,739],{"class":213},"  postTransform",[207,741,742],{"class":242},": (",[207,744,745],{"class":646},"data",[207,747,748],{"class":242},") ",[207,750,659],{"class":238},[207,752,662],{"class":242},[207,754,755,758],{"class":209,"line":281},[207,756,757],{"class":238},"    return",[207,759,760],{"class":242}," data\n",[207,762,763],{"class":209,"line":286},[207,764,765],{"class":242},"  }\n",[207,767,768],{"class":209,"line":302},[207,769,326],{"class":242},[223,771,773],{"id":772},"error-handling","Error handling",[14,775,776],{},"By default, transform errors are logged as warnings and the original data is returned unchanged. You can provide a custom error handler:",[40,778,780],{"className":229,"code":779,"language":231,"meta":48,"style":48},"const transformed = transformImgixAssetUrls(data, {\n  imgixDomain: \"my-source.imgix.net\",\n  onError: (error) => {\n    Sentry.captureException(error)\n  }\n})\n",[29,781,782,794,802,818,829,833],{"__ignoreMap":48},[207,783,784,786,788,790,792],{"class":209,"line":210},[207,785,262],{"class":238},[207,787,291],{"class":265},[207,789,269],{"class":238},[207,791,296],{"class":213},[207,793,299],{"class":242},[207,795,796,798,800],{"class":209,"line":252},[207,797,305],{"class":242},[207,799,308],{"class":217},[207,801,311],{"class":242},[207,803,804,807,809,812,814,816],{"class":209,"line":259},[207,805,806],{"class":213},"  onError",[207,808,742],{"class":242},[207,810,811],{"class":646},"error",[207,813,748],{"class":242},[207,815,659],{"class":238},[207,817,662],{"class":242},[207,819,820,823,826],{"class":209,"line":281},[207,821,822],{"class":242},"    Sentry.",[207,824,825],{"class":213},"captureException",[207,827,828],{"class":242},"(error)\n",[207,830,831],{"class":209,"line":286},[207,832,765],{"class":242},[207,834,835],{"class":209,"line":302},[207,836,326],{"class":242},[838,839,840],"style",{},"html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}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 pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}html pre.shiki code .sAwPA, html code.shiki .sAwPA{--shiki-default:#6A737D}html pre.shiki code .s9osk, html code.shiki .s9osk{--shiki-default:#FFAB70}",{"title":48,"searchDepth":252,"depth":252,"links":842},[843,844,845,846,853],{"id":23,"depth":252,"text":24},{"id":84,"depth":252,"text":85},{"id":167,"depth":252,"text":168},{"id":194,"depth":252,"text":195,"children":847},[848,849,850,851,852],{"id":225,"depth":259,"text":226},{"id":329,"depth":259,"text":330},{"id":357,"depth":259,"text":358},{"id":415,"depth":259,"text":416},{"id":526,"depth":259,"text":527},{"id":600,"depth":252,"text":601,"children":854},[855,856,857],{"id":604,"depth":259,"text":605},{"id":705,"depth":259,"text":706},{"id":772,"depth":259,"text":773},"Route Imgix-processed images through your own edge domain. Global edge caching with all rendering parameters preserved.","md",{},"\u002Fdocs\u002Fimgix",{"title":5,"description":858},"docs\u002Fimgix","3xTJJIMVGVm1a5VXGZ0_VBbzg_dDAt0_BoWsBmZZ-eg",1777579477918]