[{"data":1,"prerenderedAt":1689},["ShallowReactive",2],{"docs-navigation:en":3,"content-page:docs:sGop9rvfNZFCv-5u43V57Dd1DMhnwWMnxUR3QpME6SI":235,"content-page-surround:docs:sGop9rvfNZFCv-5u43V57Dd1DMhnwWMnxUR3QpME6SI":1675,"i-lucide:clipboard":1679,"i-logos:vue":1683,"i-logos:typescript-icon":1687},[4,50,111,152,214],{"title":5,"page":6,"canonicalKey":7,"locale":8,"id":9,"draft":6,"icon":10,"sidebar":11,"children":12},"Start",false,"1","en","content:docs:1.start:.navigation.yml","i-lucide-rocket","section",[13,19,24,29,35,40,45],{"title":14,"id":15,"canonicalKey":16,"locale":8,"draft":6,"navigation":17,"path":18},"Why Nuxt Photo","content:docs:1.start:1.why-nuxt-photo.md","1\u002F1",{"title":14},"\u002Fdocs\u002Fstart\u002Fwhy-nuxt-photo",{"title":20,"id":21,"canonicalKey":22,"locale":8,"draft":6,"path":23},"Install Nuxt Photo","content:docs:1.start:2.installation.md","1\u002F2","\u002Fdocs\u002Fstart\u002Finstallation",{"title":25,"id":26,"canonicalKey":27,"locale":8,"draft":6,"path":28},"Build your first album","content:docs:1.start:3.build-your-first-album.md","1\u002F3","\u002Fdocs\u002Fstart\u002Fbuild-your-first-album",{"title":30,"id":31,"canonicalKey":32,"locale":8,"draft":6,"navigation":33,"path":34},"Choose a component","content:docs:1.start:4.choose-a-component.md","1\u002F4",{"title":30},"\u002Fdocs\u002Fstart\u002Fchoose-a-component",{"title":36,"id":37,"canonicalKey":38,"locale":8,"draft":6,"path":39},"Use Nuxt Photo with Vue","content:docs:1.start:5.plain-vue.md","1\u002F5","\u002Fdocs\u002Fstart\u002Fplain-vue",{"title":41,"id":42,"canonicalKey":43,"locale":8,"draft":6,"path":44},"Compare gallery approaches","content:docs:1.start:6.compare-approaches.md","1\u002F6","\u002Fdocs\u002Fstart\u002Fcompare-approaches",{"title":46,"id":47,"canonicalKey":48,"locale":8,"draft":6,"path":49},"Performance and bundle size","content:docs:1.start:7.performance-and-bundle-size.md","1\u002F7","\u002Fdocs\u002Fstart\u002Fperformance-and-bundle-size",{"title":51,"page":6,"canonicalKey":52,"locale":8,"id":53,"draft":6,"icon":54,"children":55},"Guides","2","content:docs:2.guides:.navigation.yml","i-lucide-route",[56,61,66,71,76,81,86,91,96,101,106],{"title":57,"id":58,"canonicalKey":59,"locale":8,"draft":6,"path":60},"Use CMS photos","content:docs:2.guides:1.use-cms-photos.md","2\u002F1","\u002Fdocs\u002Fguides\u002Fuse-cms-photos",{"title":62,"id":63,"canonicalKey":64,"locale":8,"draft":6,"path":65},"Use Nuxt Image","content:docs:2.guides:2.use-nuxt-image.md","2\u002F2","\u002Fdocs\u002Fguides\u002Fuse-nuxt-image",{"title":67,"id":68,"canonicalKey":69,"locale":8,"draft":6,"path":70},"Style with Tailwind","content:docs:2.guides:3.style-with-tailwind.md","2\u002F3","\u002Fdocs\u002Fguides\u002Fstyle-with-tailwind",{"title":72,"id":73,"canonicalKey":74,"locale":8,"draft":6,"path":75},"Share one lightbox","content:docs:2.guides:4.share-one-lightbox.md","2\u002F4","\u002Fdocs\u002Fguides\u002Fshare-one-lightbox",{"title":77,"id":78,"canonicalKey":79,"locale":8,"draft":6,"path":80},"Build a carousel","content:docs:2.guides:5.build-a-carousel.md","2\u002F5","\u002Fdocs\u002Fguides\u002Fbuild-a-carousel",{"title":82,"id":83,"canonicalKey":84,"locale":8,"draft":6,"path":85},"Tune responsive layouts","content:docs:2.guides:6.tune-responsive-layouts.md","2\u002F6","\u002Fdocs\u002Fguides\u002Ftune-responsive-layouts",{"title":87,"id":88,"canonicalKey":89,"locale":8,"draft":6,"path":90},"Create a custom thumbnail layout","content:docs:2.guides:7.create-a-custom-thumbnail-layout.md","2\u002F7","\u002Fdocs\u002Fguides\u002Fcreate-a-custom-thumbnail-layout",{"title":92,"id":93,"canonicalKey":94,"locale":8,"draft":6,"path":95},"Customize the built-in lightbox","content:docs:2.guides:8.customize-the-built-in-lightbox.md","2\u002F8","\u002Fdocs\u002Fguides\u002Fcustomize-the-built-in-lightbox",{"title":97,"id":98,"canonicalKey":99,"locale":8,"draft":6,"path":100},"Build a lightbox from primitives","content:docs:2.guides:9.build-a-lightbox-from-primitives.md","2\u002F9","\u002Fdocs\u002Fguides\u002Fbuild-a-lightbox-from-primitives",{"title":102,"id":103,"canonicalKey":104,"locale":8,"draft":6,"path":105},"Integrate a custom image service","content:docs:2.guides:10.integrate-a-custom-image-service.md","2\u002F10","\u002Fdocs\u002Fguides\u002Fintegrate-a-custom-image-service",{"title":107,"id":108,"canonicalKey":109,"locale":8,"draft":6,"path":110},"Control a lightbox programmatically","content:docs:2.guides:11.control-a-lightbox-programmatically.md","2\u002F11","\u002Fdocs\u002Fguides\u002Fcontrol-a-lightbox-programmatically",{"title":112,"page":6,"canonicalKey":113,"locale":8,"id":114,"draft":6,"icon":115,"children":116},"Concepts","3","content:docs:3.concepts:.navigation.yml","i-lucide-compass",[117,122,127,132,137,142,147],{"title":118,"id":119,"canonicalKey":120,"locale":8,"draft":6,"path":121},"Photo data and dimensions","content:docs:3.concepts:1.photo-data-and-dimensions.md","3\u002F1","\u002Fdocs\u002Fconcepts\u002Fphoto-data-and-dimensions",{"title":123,"id":124,"canonicalKey":125,"locale":8,"draft":6,"path":126},"Collections and navigation order","content:docs:3.concepts:2.collections-and-navigation-order.md","3\u002F2","\u002Fdocs\u002Fconcepts\u002Fcollections-and-navigation-order",{"title":128,"id":129,"canonicalKey":130,"locale":8,"draft":6,"path":131},"Layouts and responsive values","content:docs:3.concepts:3.layouts-and-responsive-values.md","3\u002F3","\u002Fdocs\u002Fconcepts\u002Flayouts-and-responsive-values",{"title":133,"id":134,"canonicalKey":135,"locale":8,"draft":6,"path":136},"SSR and layout stability","content:docs:3.concepts:4.ssr-and-layout-stability.md","3\u002F4","\u002Fdocs\u002Fconcepts\u002Fssr-and-layout-stability",{"title":138,"id":139,"canonicalKey":140,"locale":8,"draft":6,"path":141},"Image delivery","content:docs:3.concepts:5.image-delivery.md","3\u002F5","\u002Fdocs\u002Fconcepts\u002Fimage-delivery",{"title":143,"id":144,"canonicalKey":145,"locale":8,"draft":6,"path":146},"Lightbox, gestures, and accessibility","content:docs:3.concepts:6.lightbox-gestures-and-accessibility.md","3\u002F6","\u002Fdocs\u002Fconcepts\u002Flightbox-gestures-and-accessibility",{"title":148,"id":149,"canonicalKey":150,"locale":8,"draft":6,"path":151},"Customization levels","content:docs:3.concepts:7.customization-levels.md","3\u002F7","\u002Fdocs\u002Fconcepts\u002Fcustomization-levels",{"title":153,"id":154,"canonicalKey":155,"locale":8,"draft":6,"icon":156,"sidebar":11,"path":157,"children":158},"Reference","content:docs:4.reference:.navigation.yml","4","i-lucide-braces","\u002Fdocs\u002Freference",[159,164,169,174,179,184,189,194,199,204,209],{"title":160,"id":161,"canonicalKey":162,"locale":8,"draft":6,"path":163},"Photo","content:docs:4.reference:2.photo.md","4\u002F2","\u002Fdocs\u002Freference\u002Fphoto",{"title":165,"id":166,"canonicalKey":167,"locale":8,"draft":6,"path":168},"PhotoAlbum","content:docs:4.reference:3.photo-album.md","4\u002F3","\u002Fdocs\u002Freference\u002Fphoto-album",{"title":170,"id":171,"canonicalKey":172,"locale":8,"draft":6,"path":173},"PhotoGroup","content:docs:4.reference:4.photo-group.md","4\u002F4","\u002Fdocs\u002Freference\u002Fphoto-group",{"title":175,"id":176,"canonicalKey":177,"locale":8,"draft":6,"path":178},"PhotoCarousel","content:docs:4.reference:5.photo-carousel.md","4\u002F5","\u002Fdocs\u002Freference\u002Fphoto-carousel",{"title":180,"id":181,"canonicalKey":182,"locale":8,"draft":6,"path":183},"Lightbox","content:docs:4.reference:6.lightbox.md","4\u002F6","\u002Fdocs\u002Freference\u002Flightbox",{"title":185,"id":186,"canonicalKey":187,"locale":8,"draft":6,"path":188},"Lightbox primitives API","content:docs:4.reference:7.primitives.md","4\u002F7","\u002Fdocs\u002Freference\u002Fprimitives",{"title":190,"id":191,"canonicalKey":192,"locale":8,"draft":6,"path":193},"Composables","content:docs:4.reference:8.composables.md","4\u002F8","\u002Fdocs\u002Freference\u002Fcomposables",{"title":195,"id":196,"canonicalKey":197,"locale":8,"draft":6,"path":198},"Configuration and labels","content:docs:4.reference:9.configuration-and-labels.md","4\u002F9","\u002Fdocs\u002Freference\u002Fconfiguration-and-labels",{"title":200,"id":201,"canonicalKey":202,"locale":8,"draft":6,"path":203},"Types","content:docs:4.reference:10.types.md","4\u002F10","\u002Fdocs\u002Freference\u002Ftypes",{"title":205,"id":206,"canonicalKey":207,"locale":8,"draft":6,"path":208},"CSS","content:docs:4.reference:11.css.md","4\u002F11","\u002Fdocs\u002Freference\u002Fcss",{"title":210,"id":211,"canonicalKey":212,"locale":8,"draft":6,"path":213},"Package exports","content:docs:4.reference:12.package-exports.md","4\u002F12","\u002Fdocs\u002Freference\u002Fpackage-exports",{"title":215,"page":6,"canonicalKey":216,"locale":8,"id":217,"draft":6,"icon":218,"children":219},"Help","5","content:docs:5.help:.navigation.yml","i-lucide-life-buoy",[220,225,230],{"title":221,"id":222,"canonicalKey":223,"locale":8,"draft":6,"path":224},"Troubleshooting","content:docs:5.help:1.troubleshooting.md","5\u002F1","\u002Fdocs\u002Fhelp\u002Ftroubleshooting",{"title":226,"id":227,"canonicalKey":228,"locale":8,"draft":6,"path":229},"Known constraints","content:docs:5.help:2.known-constraints.md","5\u002F2","\u002Fdocs\u002Fhelp\u002Fknown-constraints",{"title":231,"id":232,"canonicalKey":233,"locale":8,"draft":6,"path":234},"Upgrade from 0.2 to 1.0","content:docs:5.help:3.upgrade-from-0-2-to-1-0.md","5\u002F3","\u002Fdocs\u002Fhelp\u002Fupgrade-from-0-2-to-1-0",{"title":25,"description":236,"body":237,"type":1662,"id":26,"canonicalKey":27,"draft":6,"partial":6,"locale":8,"collection":1663,"navigationFile":6,"file":1664,"route":1670,"resolution":1672},"Paste one complete album page and open its included lightbox.",{"type":238,"children":239,"toc":1652},"root",[240,248,255,281,287,298,1166,1178,1184,1210,1216,1221,1313,1329,1599,1615,1621],{"type":241,"tag":242,"props":243,"children":244},"element","p",{},[245],{"type":246,"value":247},"text","Build a styled album with a working lightbox. Start with the photos below, then\nreplace them with your own data after the example works.",{"type":241,"tag":249,"props":250,"children":252},"h2",{"id":251},"prerequisites",[253],{"type":246,"value":254},"Prerequisites",{"type":241,"tag":256,"props":257,"children":258},"ul",{},[259],{"type":241,"tag":260,"props":261,"children":262},"li",{},[263,265,271,273,279],{"type":246,"value":264},"Complete ",{"type":241,"tag":266,"props":267,"children":268},"a",{"href":23},[269],{"type":246,"value":270},"Installation",{"type":246,"value":272},", including\n",{"type":241,"tag":274,"props":275,"children":276},"code",{},[277],{"type":246,"value":278},"css: 'all'",{"type":246,"value":280},".",{"type":241,"tag":249,"props":282,"children":284},{"id":283},"_1-add-the-album-page",[285],{"type":246,"value":286},"1. Add the album page",{"type":241,"tag":242,"props":288,"children":289},{},[290,292,297],{"type":246,"value":291},"Paste this into a page. The image URLs include their dimensions, so the example\nworks before you add files to ",{"type":241,"tag":274,"props":293,"children":294},{},[295],{"type":246,"value":296},"public\u002F",{"type":246,"value":280},{"type":241,"tag":299,"props":300,"children":304},"pre",{"language":301,"filename":302,"class":303},"vue","app\u002Fpages\u002Findex.vue","shiki shiki-themes material-theme-lighter material-theme-palenight dark:material-theme-palenight",[305],{"type":241,"tag":274,"props":306,"children":308},{"class":307},"language-vue",[309,363,365,415,416,419,420,457,458,466,467,497,498,527,528,550,551,572,573,602,603,632,633,641,642,649,650,678,679,707,708,728,729,749,750,778,779,807,808,815,816,823,824,852,853,881,882,901,902,921,922,950,951,979,980,987,988,996,997,1013,1014,1017,1018,1034,1035,1150,1151],{"type":241,"tag":310,"props":311,"children":314},"span",{"class":312,"style":313},"line","display: inline",[315,321,327,333,338,343,348,354,358],{"type":241,"tag":310,"props":316,"children":318},{"style":317},"color:#39ADB5;--shiki-dark:#89DDFF",[319],{"type":246,"value":320},"\u003C",{"type":241,"tag":310,"props":322,"children":324},{"style":323},"color:#E53935;--shiki-dark:#F07178",[325],{"type":246,"value":326},"script",{"type":241,"tag":310,"props":328,"children":330},{"style":329},"color:#9C3EDA;--shiki-dark:#C792EA",[331],{"type":246,"value":332}," setup",{"type":241,"tag":310,"props":334,"children":335},{"style":329},[336],{"type":246,"value":337}," lang",{"type":241,"tag":310,"props":339,"children":340},{"style":317},[341],{"type":246,"value":342},"=",{"type":241,"tag":310,"props":344,"children":345},{"style":317},[346],{"type":246,"value":347},"\"",{"type":241,"tag":310,"props":349,"children":351},{"style":350},"color:#91B859;--shiki-dark:#C3E88D",[352],{"type":246,"value":353},"ts",{"type":241,"tag":310,"props":355,"children":356},{"style":317},[357],{"type":246,"value":347},{"type":241,"tag":310,"props":359,"children":360},{"style":317},[361],{"type":246,"value":362},">",{"type":246,"value":364},"\n",{"type":241,"tag":310,"props":366,"children":367},{"class":312,"style":313},[368,374,379,384,390,395,400,405,410],{"type":241,"tag":310,"props":369,"children":371},{"style":370},"color:#39ADB5;--shiki-light-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic",[372],{"type":246,"value":373},"import",{"type":241,"tag":310,"props":375,"children":376},{"style":370},[377],{"type":246,"value":378}," type",{"type":241,"tag":310,"props":380,"children":381},{"style":317},[382],{"type":246,"value":383}," {",{"type":241,"tag":310,"props":385,"children":387},{"style":386},"color:#90A4AE;--shiki-dark:#BABED8",[388],{"type":246,"value":389}," PhotoItem",{"type":241,"tag":310,"props":391,"children":392},{"style":317},[393],{"type":246,"value":394}," }",{"type":241,"tag":310,"props":396,"children":397},{"style":370},[398],{"type":246,"value":399}," from",{"type":241,"tag":310,"props":401,"children":402},{"style":317},[403],{"type":246,"value":404}," '",{"type":241,"tag":310,"props":406,"children":407},{"style":350},[408],{"type":246,"value":409},"@lupinum\u002Fnuxt-photo\u002Fapp",{"type":241,"tag":310,"props":411,"children":412},{"style":317},[413],{"type":246,"value":414},"'",{"type":246,"value":364},{"type":241,"tag":310,"props":417,"children":418},{"class":312,"style":313},[],{"type":246,"value":364},{"type":241,"tag":310,"props":421,"children":422},{"class":312,"style":313},[423,428,433,438,443,448,452],{"type":241,"tag":310,"props":424,"children":425},{"style":329},[426],{"type":246,"value":427},"const",{"type":241,"tag":310,"props":429,"children":430},{"style":386},[431],{"type":246,"value":432}," photos",{"type":241,"tag":310,"props":434,"children":435},{"style":317},[436],{"type":246,"value":437},":",{"type":241,"tag":310,"props":439,"children":441},{"style":440},"color:#E2931D;--shiki-dark:#FFCB6B",[442],{"type":246,"value":389},{"type":241,"tag":310,"props":444,"children":445},{"style":386},[446],{"type":246,"value":447},"[] ",{"type":241,"tag":310,"props":449,"children":450},{"style":317},[451],{"type":246,"value":342},{"type":241,"tag":310,"props":453,"children":454},{"style":386},[455],{"type":246,"value":456}," [",{"type":246,"value":364},{"type":241,"tag":310,"props":459,"children":460},{"class":312,"style":313},[461],{"type":241,"tag":310,"props":462,"children":463},{"style":317},[464],{"type":246,"value":465},"  {",{"type":246,"value":364},{"type":241,"tag":310,"props":468,"children":469},{"class":312,"style":313},[470,475,479,483,488,492],{"type":241,"tag":310,"props":471,"children":472},{"style":323},[473],{"type":246,"value":474},"    id",{"type":241,"tag":310,"props":476,"children":477},{"style":317},[478],{"type":246,"value":437},{"type":241,"tag":310,"props":480,"children":481},{"style":317},[482],{"type":246,"value":404},{"type":241,"tag":310,"props":484,"children":485},{"style":350},[486],{"type":246,"value":487},"landscape",{"type":241,"tag":310,"props":489,"children":490},{"style":317},[491],{"type":246,"value":414},{"type":241,"tag":310,"props":493,"children":494},{"style":317},[495],{"type":246,"value":496},",",{"type":246,"value":364},{"type":241,"tag":310,"props":499,"children":500},{"class":312,"style":313},[501,506,510,514,519,523],{"type":241,"tag":310,"props":502,"children":503},{"style":323},[504],{"type":246,"value":505},"    src",{"type":241,"tag":310,"props":507,"children":508},{"style":317},[509],{"type":246,"value":437},{"type":241,"tag":310,"props":511,"children":512},{"style":317},[513],{"type":246,"value":404},{"type":241,"tag":310,"props":515,"children":516},{"style":350},[517],{"type":246,"value":518},"https:\u002F\u002Fpicsum.photos\u002Fid\u002F1018\u002F1280\u002F800",{"type":241,"tag":310,"props":520,"children":521},{"style":317},[522],{"type":246,"value":414},{"type":241,"tag":310,"props":524,"children":525},{"style":317},[526],{"type":246,"value":496},{"type":246,"value":364},{"type":241,"tag":310,"props":529,"children":530},{"class":312,"style":313},[531,536,540,546],{"type":241,"tag":310,"props":532,"children":533},{"style":323},[534],{"type":246,"value":535},"    width",{"type":241,"tag":310,"props":537,"children":538},{"style":317},[539],{"type":246,"value":437},{"type":241,"tag":310,"props":541,"children":543},{"style":542},"color:#F76D47;--shiki-dark:#F78C6C",[544],{"type":246,"value":545}," 1280",{"type":241,"tag":310,"props":547,"children":548},{"style":317},[549],{"type":246,"value":496},{"type":246,"value":364},{"type":241,"tag":310,"props":552,"children":553},{"class":312,"style":313},[554,559,563,568],{"type":241,"tag":310,"props":555,"children":556},{"style":323},[557],{"type":246,"value":558},"    height",{"type":241,"tag":310,"props":560,"children":561},{"style":317},[562],{"type":246,"value":437},{"type":241,"tag":310,"props":564,"children":565},{"style":542},[566],{"type":246,"value":567}," 800",{"type":241,"tag":310,"props":569,"children":570},{"style":317},[571],{"type":246,"value":496},{"type":246,"value":364},{"type":241,"tag":310,"props":574,"children":575},{"class":312,"style":313},[576,581,585,589,594,598],{"type":241,"tag":310,"props":577,"children":578},{"style":323},[579],{"type":246,"value":580},"    alt",{"type":241,"tag":310,"props":582,"children":583},{"style":317},[584],{"type":246,"value":437},{"type":241,"tag":310,"props":586,"children":587},{"style":317},[588],{"type":246,"value":404},{"type":241,"tag":310,"props":590,"children":591},{"style":350},[592],{"type":246,"value":593},"Sample landscape photo",{"type":241,"tag":310,"props":595,"children":596},{"style":317},[597],{"type":246,"value":414},{"type":241,"tag":310,"props":599,"children":600},{"style":317},[601],{"type":246,"value":496},{"type":246,"value":364},{"type":241,"tag":310,"props":604,"children":605},{"class":312,"style":313},[606,611,615,619,624,628],{"type":241,"tag":310,"props":607,"children":608},{"style":323},[609],{"type":246,"value":610},"    caption",{"type":241,"tag":310,"props":612,"children":613},{"style":317},[614],{"type":246,"value":437},{"type":241,"tag":310,"props":616,"children":617},{"style":317},[618],{"type":246,"value":404},{"type":241,"tag":310,"props":620,"children":621},{"style":350},[622],{"type":246,"value":623},"Landscape",{"type":241,"tag":310,"props":625,"children":626},{"style":317},[627],{"type":246,"value":414},{"type":241,"tag":310,"props":629,"children":630},{"style":317},[631],{"type":246,"value":496},{"type":246,"value":364},{"type":241,"tag":310,"props":634,"children":635},{"class":312,"style":313},[636],{"type":241,"tag":310,"props":637,"children":638},{"style":317},[639],{"type":246,"value":640},"  },",{"type":246,"value":364},{"type":241,"tag":310,"props":643,"children":644},{"class":312,"style":313},[645],{"type":241,"tag":310,"props":646,"children":647},{"style":317},[648],{"type":246,"value":465},{"type":246,"value":364},{"type":241,"tag":310,"props":651,"children":652},{"class":312,"style":313},[653,657,661,665,670,674],{"type":241,"tag":310,"props":654,"children":655},{"style":323},[656],{"type":246,"value":474},{"type":241,"tag":310,"props":658,"children":659},{"style":317},[660],{"type":246,"value":437},{"type":241,"tag":310,"props":662,"children":663},{"style":317},[664],{"type":246,"value":404},{"type":241,"tag":310,"props":666,"children":667},{"style":350},[668],{"type":246,"value":669},"portrait",{"type":241,"tag":310,"props":671,"children":672},{"style":317},[673],{"type":246,"value":414},{"type":241,"tag":310,"props":675,"children":676},{"style":317},[677],{"type":246,"value":496},{"type":246,"value":364},{"type":241,"tag":310,"props":680,"children":681},{"class":312,"style":313},[682,686,690,694,699,703],{"type":241,"tag":310,"props":683,"children":684},{"style":323},[685],{"type":246,"value":505},{"type":241,"tag":310,"props":687,"children":688},{"style":317},[689],{"type":246,"value":437},{"type":241,"tag":310,"props":691,"children":692},{"style":317},[693],{"type":246,"value":404},{"type":241,"tag":310,"props":695,"children":696},{"style":350},[697],{"type":246,"value":698},"https:\u002F\u002Fpicsum.photos\u002Fid\u002F1015\u002F960\u002F1200",{"type":241,"tag":310,"props":700,"children":701},{"style":317},[702],{"type":246,"value":414},{"type":241,"tag":310,"props":704,"children":705},{"style":317},[706],{"type":246,"value":496},{"type":246,"value":364},{"type":241,"tag":310,"props":709,"children":710},{"class":312,"style":313},[711,715,719,724],{"type":241,"tag":310,"props":712,"children":713},{"style":323},[714],{"type":246,"value":535},{"type":241,"tag":310,"props":716,"children":717},{"style":317},[718],{"type":246,"value":437},{"type":241,"tag":310,"props":720,"children":721},{"style":542},[722],{"type":246,"value":723}," 960",{"type":241,"tag":310,"props":725,"children":726},{"style":317},[727],{"type":246,"value":496},{"type":246,"value":364},{"type":241,"tag":310,"props":730,"children":731},{"class":312,"style":313},[732,736,740,745],{"type":241,"tag":310,"props":733,"children":734},{"style":323},[735],{"type":246,"value":558},{"type":241,"tag":310,"props":737,"children":738},{"style":317},[739],{"type":246,"value":437},{"type":241,"tag":310,"props":741,"children":742},{"style":542},[743],{"type":246,"value":744}," 1200",{"type":241,"tag":310,"props":746,"children":747},{"style":317},[748],{"type":246,"value":496},{"type":246,"value":364},{"type":241,"tag":310,"props":751,"children":752},{"class":312,"style":313},[753,757,761,765,770,774],{"type":241,"tag":310,"props":754,"children":755},{"style":323},[756],{"type":246,"value":580},{"type":241,"tag":310,"props":758,"children":759},{"style":317},[760],{"type":246,"value":437},{"type":241,"tag":310,"props":762,"children":763},{"style":317},[764],{"type":246,"value":404},{"type":241,"tag":310,"props":766,"children":767},{"style":350},[768],{"type":246,"value":769},"Sample vertical photo",{"type":241,"tag":310,"props":771,"children":772},{"style":317},[773],{"type":246,"value":414},{"type":241,"tag":310,"props":775,"children":776},{"style":317},[777],{"type":246,"value":496},{"type":246,"value":364},{"type":241,"tag":310,"props":780,"children":781},{"class":312,"style":313},[782,786,790,794,799,803],{"type":241,"tag":310,"props":783,"children":784},{"style":323},[785],{"type":246,"value":610},{"type":241,"tag":310,"props":787,"children":788},{"style":317},[789],{"type":246,"value":437},{"type":241,"tag":310,"props":791,"children":792},{"style":317},[793],{"type":246,"value":404},{"type":241,"tag":310,"props":795,"children":796},{"style":350},[797],{"type":246,"value":798},"Portrait",{"type":241,"tag":310,"props":800,"children":801},{"style":317},[802],{"type":246,"value":414},{"type":241,"tag":310,"props":804,"children":805},{"style":317},[806],{"type":246,"value":496},{"type":246,"value":364},{"type":241,"tag":310,"props":809,"children":810},{"class":312,"style":313},[811],{"type":241,"tag":310,"props":812,"children":813},{"style":317},[814],{"type":246,"value":640},{"type":246,"value":364},{"type":241,"tag":310,"props":817,"children":818},{"class":312,"style":313},[819],{"type":241,"tag":310,"props":820,"children":821},{"style":317},[822],{"type":246,"value":465},{"type":246,"value":364},{"type":241,"tag":310,"props":825,"children":826},{"class":312,"style":313},[827,831,835,839,844,848],{"type":241,"tag":310,"props":828,"children":829},{"style":323},[830],{"type":246,"value":474},{"type":241,"tag":310,"props":832,"children":833},{"style":317},[834],{"type":246,"value":437},{"type":241,"tag":310,"props":836,"children":837},{"style":317},[838],{"type":246,"value":404},{"type":241,"tag":310,"props":840,"children":841},{"style":350},[842],{"type":246,"value":843},"wide",{"type":241,"tag":310,"props":845,"children":846},{"style":317},[847],{"type":246,"value":414},{"type":241,"tag":310,"props":849,"children":850},{"style":317},[851],{"type":246,"value":496},{"type":246,"value":364},{"type":241,"tag":310,"props":854,"children":855},{"class":312,"style":313},[856,860,864,868,873,877],{"type":241,"tag":310,"props":857,"children":858},{"style":323},[859],{"type":246,"value":505},{"type":241,"tag":310,"props":861,"children":862},{"style":317},[863],{"type":246,"value":437},{"type":241,"tag":310,"props":865,"children":866},{"style":317},[867],{"type":246,"value":404},{"type":241,"tag":310,"props":869,"children":870},{"style":350},[871],{"type":246,"value":872},"https:\u002F\u002Fpicsum.photos\u002Fid\u002F1020\u002F1200\u002F800",{"type":241,"tag":310,"props":874,"children":875},{"style":317},[876],{"type":246,"value":414},{"type":241,"tag":310,"props":878,"children":879},{"style":317},[880],{"type":246,"value":496},{"type":246,"value":364},{"type":241,"tag":310,"props":883,"children":884},{"class":312,"style":313},[885,889,893,897],{"type":241,"tag":310,"props":886,"children":887},{"style":323},[888],{"type":246,"value":535},{"type":241,"tag":310,"props":890,"children":891},{"style":317},[892],{"type":246,"value":437},{"type":241,"tag":310,"props":894,"children":895},{"style":542},[896],{"type":246,"value":744},{"type":241,"tag":310,"props":898,"children":899},{"style":317},[900],{"type":246,"value":496},{"type":246,"value":364},{"type":241,"tag":310,"props":903,"children":904},{"class":312,"style":313},[905,909,913,917],{"type":241,"tag":310,"props":906,"children":907},{"style":323},[908],{"type":246,"value":558},{"type":241,"tag":310,"props":910,"children":911},{"style":317},[912],{"type":246,"value":437},{"type":241,"tag":310,"props":914,"children":915},{"style":542},[916],{"type":246,"value":567},{"type":241,"tag":310,"props":918,"children":919},{"style":317},[920],{"type":246,"value":496},{"type":246,"value":364},{"type":241,"tag":310,"props":923,"children":924},{"class":312,"style":313},[925,929,933,937,942,946],{"type":241,"tag":310,"props":926,"children":927},{"style":323},[928],{"type":246,"value":580},{"type":241,"tag":310,"props":930,"children":931},{"style":317},[932],{"type":246,"value":437},{"type":241,"tag":310,"props":934,"children":935},{"style":317},[936],{"type":246,"value":404},{"type":241,"tag":310,"props":938,"children":939},{"style":350},[940],{"type":246,"value":941},"Sample wide photo",{"type":241,"tag":310,"props":943,"children":944},{"style":317},[945],{"type":246,"value":414},{"type":241,"tag":310,"props":947,"children":948},{"style":317},[949],{"type":246,"value":496},{"type":246,"value":364},{"type":241,"tag":310,"props":952,"children":953},{"class":312,"style":313},[954,958,962,966,971,975],{"type":241,"tag":310,"props":955,"children":956},{"style":323},[957],{"type":246,"value":610},{"type":241,"tag":310,"props":959,"children":960},{"style":317},[961],{"type":246,"value":437},{"type":241,"tag":310,"props":963,"children":964},{"style":317},[965],{"type":246,"value":404},{"type":241,"tag":310,"props":967,"children":968},{"style":350},[969],{"type":246,"value":970},"Wide Frame",{"type":241,"tag":310,"props":972,"children":973},{"style":317},[974],{"type":246,"value":414},{"type":241,"tag":310,"props":976,"children":977},{"style":317},[978],{"type":246,"value":496},{"type":246,"value":364},{"type":241,"tag":310,"props":981,"children":982},{"class":312,"style":313},[983],{"type":241,"tag":310,"props":984,"children":985},{"style":317},[986],{"type":246,"value":640},{"type":246,"value":364},{"type":241,"tag":310,"props":989,"children":990},{"class":312,"style":313},[991],{"type":241,"tag":310,"props":992,"children":993},{"style":386},[994],{"type":246,"value":995},"]",{"type":246,"value":364},{"type":241,"tag":310,"props":998,"children":999},{"class":312,"style":313},[1000,1005,1009],{"type":241,"tag":310,"props":1001,"children":1002},{"style":317},[1003],{"type":246,"value":1004},"\u003C\u002F",{"type":241,"tag":310,"props":1006,"children":1007},{"style":323},[1008],{"type":246,"value":326},{"type":241,"tag":310,"props":1010,"children":1011},{"style":317},[1012],{"type":246,"value":362},{"type":246,"value":364},{"type":241,"tag":310,"props":1015,"children":1016},{"class":312,"style":313},[],{"type":246,"value":364},{"type":241,"tag":310,"props":1019,"children":1020},{"class":312,"style":313},[1021,1025,1030],{"type":241,"tag":310,"props":1022,"children":1023},{"style":317},[1024],{"type":246,"value":320},{"type":241,"tag":310,"props":1026,"children":1027},{"style":323},[1028],{"type":246,"value":1029},"template",{"type":241,"tag":310,"props":1031,"children":1032},{"style":317},[1033],{"type":246,"value":362},{"type":246,"value":364},{"type":241,"tag":310,"props":1036,"children":1037},{"class":312,"style":313},[1038,1043,1047,1052,1057,1061,1065,1069,1073,1077,1082,1086,1090,1095,1100,1105,1109,1114,1118,1123,1128,1132,1137,1141,1145],{"type":241,"tag":310,"props":1039,"children":1040},{"style":317},[1041],{"type":246,"value":1042},"  \u003C",{"type":241,"tag":310,"props":1044,"children":1045},{"style":323},[1046],{"type":246,"value":165},{"type":241,"tag":310,"props":1048,"children":1049},{"style":317},[1050],{"type":246,"value":1051}," :",{"type":241,"tag":310,"props":1053,"children":1054},{"style":329},[1055],{"type":246,"value":1056},"photos",{"type":241,"tag":310,"props":1058,"children":1059},{"style":317},[1060],{"type":246,"value":342},{"type":241,"tag":310,"props":1062,"children":1063},{"style":317},[1064],{"type":246,"value":347},{"type":241,"tag":310,"props":1066,"children":1067},{"style":386},[1068],{"type":246,"value":1056},{"type":241,"tag":310,"props":1070,"children":1071},{"style":317},[1072],{"type":246,"value":347},{"type":241,"tag":310,"props":1074,"children":1075},{"style":317},[1076],{"type":246,"value":1051},{"type":241,"tag":310,"props":1078,"children":1079},{"style":329},[1080],{"type":246,"value":1081},"layout",{"type":241,"tag":310,"props":1083,"children":1084},{"style":317},[1085],{"type":246,"value":342},{"type":241,"tag":310,"props":1087,"children":1088},{"style":317},[1089],{"type":246,"value":347},{"type":241,"tag":310,"props":1091,"children":1092},{"style":317},[1093],{"type":246,"value":1094},"{ ",{"type":241,"tag":310,"props":1096,"children":1097},{"style":323},[1098],{"type":246,"value":1099},"type",{"type":241,"tag":310,"props":1101,"children":1102},{"style":317},[1103],{"type":246,"value":1104},": ",{"type":241,"tag":310,"props":1106,"children":1107},{"style":317},[1108],{"type":246,"value":414},{"type":241,"tag":310,"props":1110,"children":1111},{"style":350},[1112],{"type":246,"value":1113},"rows",{"type":241,"tag":310,"props":1115,"children":1116},{"style":317},[1117],{"type":246,"value":414},{"type":241,"tag":310,"props":1119,"children":1120},{"style":317},[1121],{"type":246,"value":1122},", ",{"type":241,"tag":310,"props":1124,"children":1125},{"style":323},[1126],{"type":246,"value":1127},"targetRowHeight",{"type":241,"tag":310,"props":1129,"children":1130},{"style":317},[1131],{"type":246,"value":1104},{"type":241,"tag":310,"props":1133,"children":1134},{"style":542},[1135],{"type":246,"value":1136},"240",{"type":241,"tag":310,"props":1138,"children":1139},{"style":317},[1140],{"type":246,"value":394},{"type":241,"tag":310,"props":1142,"children":1143},{"style":317},[1144],{"type":246,"value":347},{"type":241,"tag":310,"props":1146,"children":1147},{"style":317},[1148],{"type":246,"value":1149}," \u002F>",{"type":246,"value":364},{"type":241,"tag":310,"props":1152,"children":1153},{"class":312,"style":313},[1154,1158,1162],{"type":241,"tag":310,"props":1155,"children":1156},{"style":317},[1157],{"type":246,"value":1004},{"type":241,"tag":310,"props":1159,"children":1160},{"style":323},[1161],{"type":246,"value":1029},{"type":241,"tag":310,"props":1163,"children":1164},{"style":317},[1165],{"type":246,"value":362},{"type":241,"tag":242,"props":1167,"children":1168},{},[1169,1171,1176],{"type":246,"value":1170},"Reload the page. You should now see a justified rows gallery. Click any photo to\nopen the lightbox; swipe, pinch to zoom, or press ",{"type":241,"tag":274,"props":1172,"children":1173},{},[1174],{"type":246,"value":1175},"Esc",{"type":246,"value":1177}," to close.",{"type":241,"tag":249,"props":1179,"children":1181},{"id":1180},"_2-check-the-result",[1182],{"type":246,"value":1183},"2. Check the result",{"type":241,"tag":242,"props":1185,"children":1186},{},[1187,1189,1194,1196,1201,1203,1208],{"type":246,"value":1188},"Start the development server and open the page. You should see three photos in\nrows that fill the available width. Selecting a photo opens the included\nlightbox. Press ",{"type":241,"tag":274,"props":1190,"children":1191},{},[1192],{"type":246,"value":1193},"ArrowLeft",{"type":246,"value":1195}," or ",{"type":241,"tag":274,"props":1197,"children":1198},{},[1199],{"type":246,"value":1200},"ArrowRight",{"type":246,"value":1202}," to navigate, then press ",{"type":241,"tag":274,"props":1204,"children":1205},{},[1206],{"type":246,"value":1207},"Escape",{"type":246,"value":1209},".\nFocus should return to the selected thumbnail.",{"type":241,"tag":249,"props":1211,"children":1213},{"id":1212},"_3-use-your-own-photos",[1214],{"type":246,"value":1215},"3. Use your own photos",{"type":241,"tag":242,"props":1217,"children":1218},{},[1219],{"type":246,"value":1220},"Every photo is a plain object with four required fields:",{"type":241,"tag":1222,"props":1223,"children":1224},"table",{},[1225,1244],{"type":241,"tag":1226,"props":1227,"children":1228},"thead",{},[1229],{"type":241,"tag":1230,"props":1231,"children":1232},"tr",{},[1233,1239],{"type":241,"tag":1234,"props":1235,"children":1236},"th",{},[1237],{"type":246,"value":1238},"Field",{"type":241,"tag":1234,"props":1240,"children":1241},{},[1242],{"type":246,"value":1243},"Purpose",{"type":241,"tag":1245,"props":1246,"children":1247},"tbody",{},[1248,1265,1281,1297],{"type":241,"tag":1230,"props":1249,"children":1250},{},[1251,1260],{"type":241,"tag":1252,"props":1253,"children":1254},"td",{},[1255],{"type":241,"tag":274,"props":1256,"children":1257},{},[1258],{"type":246,"value":1259},"id",{"type":241,"tag":1252,"props":1261,"children":1262},{},[1263],{"type":246,"value":1264},"Stable, unique identity for navigation and updates.",{"type":241,"tag":1230,"props":1266,"children":1267},{},[1268,1276],{"type":241,"tag":1252,"props":1269,"children":1270},{},[1271],{"type":241,"tag":274,"props":1272,"children":1273},{},[1274],{"type":246,"value":1275},"src",{"type":241,"tag":1252,"props":1277,"children":1278},{},[1279],{"type":246,"value":1280},"Image URL or public path.",{"type":241,"tag":1230,"props":1282,"children":1283},{},[1284,1292],{"type":241,"tag":1252,"props":1285,"children":1286},{},[1287],{"type":241,"tag":274,"props":1288,"children":1289},{},[1290],{"type":246,"value":1291},"width",{"type":241,"tag":1252,"props":1293,"children":1294},{},[1295],{"type":246,"value":1296},"Intrinsic image width in pixels.",{"type":241,"tag":1230,"props":1298,"children":1299},{},[1300,1308],{"type":241,"tag":1252,"props":1301,"children":1302},{},[1303],{"type":241,"tag":274,"props":1304,"children":1305},{},[1306],{"type":246,"value":1307},"height",{"type":241,"tag":1252,"props":1309,"children":1310},{},[1311],{"type":246,"value":1312},"Intrinsic image height in pixels.",{"type":241,"tag":242,"props":1314,"children":1315},{},[1316,1321,1323,1327],{"type":241,"tag":274,"props":1317,"children":1318},{},[1319],{"type":246,"value":1320},"alt",{"type":246,"value":1322},", captions, descriptions, placeholders, and metadata are optional. Add\nmeaningful ",{"type":241,"tag":274,"props":1324,"children":1325},{},[1326],{"type":246,"value":1320},{"type":246,"value":1328}," text unless the image is decorative.",{"type":241,"tag":299,"props":1330,"children":1332},{"language":353,"filename":1331,"class":303},"app\u002Fcomposables\u002Fgallery.ts",[1333],{"type":241,"tag":274,"props":1334,"children":1336},{"class":1335},"language-ts",[1337,1376,1377,1380,1381,1419,1420,1427,1428,1456,1457,1485,1486,1505,1506,1525,1526,1554,1555,1583,1584,1591,1592],{"type":241,"tag":310,"props":1338,"children":1339},{"class":312,"style":313},[1340,1344,1348,1352,1356,1360,1364,1368,1372],{"type":241,"tag":310,"props":1341,"children":1342},{"style":370},[1343],{"type":246,"value":373},{"type":241,"tag":310,"props":1345,"children":1346},{"style":370},[1347],{"type":246,"value":378},{"type":241,"tag":310,"props":1349,"children":1350},{"style":317},[1351],{"type":246,"value":383},{"type":241,"tag":310,"props":1353,"children":1354},{"style":386},[1355],{"type":246,"value":389},{"type":241,"tag":310,"props":1357,"children":1358},{"style":317},[1359],{"type":246,"value":394},{"type":241,"tag":310,"props":1361,"children":1362},{"style":370},[1363],{"type":246,"value":399},{"type":241,"tag":310,"props":1365,"children":1366},{"style":317},[1367],{"type":246,"value":404},{"type":241,"tag":310,"props":1369,"children":1370},{"style":350},[1371],{"type":246,"value":409},{"type":241,"tag":310,"props":1373,"children":1374},{"style":317},[1375],{"type":246,"value":414},{"type":246,"value":364},{"type":241,"tag":310,"props":1378,"children":1379},{"class":312,"style":313},[],{"type":246,"value":364},{"type":241,"tag":310,"props":1382,"children":1383},{"class":312,"style":313},[1384,1389,1394,1399,1403,1407,1411,1415],{"type":241,"tag":310,"props":1385,"children":1386},{"style":370},[1387],{"type":246,"value":1388},"export",{"type":241,"tag":310,"props":1390,"children":1391},{"style":329},[1392],{"type":246,"value":1393}," const",{"type":241,"tag":310,"props":1395,"children":1396},{"style":386},[1397],{"type":246,"value":1398}," gallery",{"type":241,"tag":310,"props":1400,"children":1401},{"style":317},[1402],{"type":246,"value":437},{"type":241,"tag":310,"props":1404,"children":1405},{"style":440},[1406],{"type":246,"value":389},{"type":241,"tag":310,"props":1408,"children":1409},{"style":386},[1410],{"type":246,"value":447},{"type":241,"tag":310,"props":1412,"children":1413},{"style":317},[1414],{"type":246,"value":342},{"type":241,"tag":310,"props":1416,"children":1417},{"style":386},[1418],{"type":246,"value":456},{"type":246,"value":364},{"type":241,"tag":310,"props":1421,"children":1422},{"class":312,"style":313},[1423],{"type":241,"tag":310,"props":1424,"children":1425},{"style":317},[1426],{"type":246,"value":465},{"type":246,"value":364},{"type":241,"tag":310,"props":1429,"children":1430},{"class":312,"style":313},[1431,1435,1439,1443,1448,1452],{"type":241,"tag":310,"props":1432,"children":1433},{"style":323},[1434],{"type":246,"value":474},{"type":241,"tag":310,"props":1436,"children":1437},{"style":317},[1438],{"type":246,"value":437},{"type":241,"tag":310,"props":1440,"children":1441},{"style":317},[1442],{"type":246,"value":404},{"type":241,"tag":310,"props":1444,"children":1445},{"style":350},[1446],{"type":246,"value":1447},"desert",{"type":241,"tag":310,"props":1449,"children":1450},{"style":317},[1451],{"type":246,"value":414},{"type":241,"tag":310,"props":1453,"children":1454},{"style":317},[1455],{"type":246,"value":496},{"type":246,"value":364},{"type":241,"tag":310,"props":1458,"children":1459},{"class":312,"style":313},[1460,1464,1468,1472,1477,1481],{"type":241,"tag":310,"props":1461,"children":1462},{"style":323},[1463],{"type":246,"value":505},{"type":241,"tag":310,"props":1465,"children":1466},{"style":317},[1467],{"type":246,"value":437},{"type":241,"tag":310,"props":1469,"children":1470},{"style":317},[1471],{"type":246,"value":404},{"type":241,"tag":310,"props":1473,"children":1474},{"style":350},[1475],{"type":246,"value":1476},"\u002Fphotos\u002Fdesert.jpg",{"type":241,"tag":310,"props":1478,"children":1479},{"style":317},[1480],{"type":246,"value":414},{"type":241,"tag":310,"props":1482,"children":1483},{"style":317},[1484],{"type":246,"value":496},{"type":246,"value":364},{"type":241,"tag":310,"props":1487,"children":1488},{"class":312,"style":313},[1489,1493,1497,1501],{"type":241,"tag":310,"props":1490,"children":1491},{"style":323},[1492],{"type":246,"value":535},{"type":241,"tag":310,"props":1494,"children":1495},{"style":317},[1496],{"type":246,"value":437},{"type":241,"tag":310,"props":1498,"children":1499},{"style":542},[1500],{"type":246,"value":545},{"type":241,"tag":310,"props":1502,"children":1503},{"style":317},[1504],{"type":246,"value":496},{"type":246,"value":364},{"type":241,"tag":310,"props":1507,"children":1508},{"class":312,"style":313},[1509,1513,1517,1521],{"type":241,"tag":310,"props":1510,"children":1511},{"style":323},[1512],{"type":246,"value":558},{"type":241,"tag":310,"props":1514,"children":1515},{"style":317},[1516],{"type":246,"value":437},{"type":241,"tag":310,"props":1518,"children":1519},{"style":542},[1520],{"type":246,"value":567},{"type":241,"tag":310,"props":1522,"children":1523},{"style":317},[1524],{"type":246,"value":496},{"type":246,"value":364},{"type":241,"tag":310,"props":1527,"children":1528},{"class":312,"style":313},[1529,1533,1537,1541,1546,1550],{"type":241,"tag":310,"props":1530,"children":1531},{"style":323},[1532],{"type":246,"value":580},{"type":241,"tag":310,"props":1534,"children":1535},{"style":317},[1536],{"type":246,"value":437},{"type":241,"tag":310,"props":1538,"children":1539},{"style":317},[1540],{"type":246,"value":404},{"type":241,"tag":310,"props":1542,"children":1543},{"style":350},[1544],{"type":246,"value":1545},"Desert at golden hour",{"type":241,"tag":310,"props":1547,"children":1548},{"style":317},[1549],{"type":246,"value":414},{"type":241,"tag":310,"props":1551,"children":1552},{"style":317},[1553],{"type":246,"value":496},{"type":246,"value":364},{"type":241,"tag":310,"props":1556,"children":1557},{"class":312,"style":313},[1558,1562,1566,1570,1575,1579],{"type":241,"tag":310,"props":1559,"children":1560},{"style":323},[1561],{"type":246,"value":610},{"type":241,"tag":310,"props":1563,"children":1564},{"style":317},[1565],{"type":246,"value":437},{"type":241,"tag":310,"props":1567,"children":1568},{"style":317},[1569],{"type":246,"value":404},{"type":241,"tag":310,"props":1571,"children":1572},{"style":350},[1573],{"type":246,"value":1574},"Desert Light",{"type":241,"tag":310,"props":1576,"children":1577},{"style":317},[1578],{"type":246,"value":414},{"type":241,"tag":310,"props":1580,"children":1581},{"style":317},[1582],{"type":246,"value":496},{"type":246,"value":364},{"type":241,"tag":310,"props":1585,"children":1586},{"class":312,"style":313},[1587],{"type":241,"tag":310,"props":1588,"children":1589},{"style":317},[1590],{"type":246,"value":640},{"type":246,"value":364},{"type":241,"tag":310,"props":1593,"children":1594},{"class":312,"style":313},[1595],{"type":241,"tag":310,"props":1596,"children":1597},{"style":386},[1598],{"type":246,"value":995},{"type":241,"tag":1600,"props":1601,"children":1602},"warning",{},[1603,1607,1609,1613],{"type":241,"tag":274,"props":1604,"children":1605},{},[1606],{"type":246,"value":1291},{"type":246,"value":1608}," and ",{"type":241,"tag":274,"props":1610,"children":1611},{},[1612],{"type":246,"value":1307},{"type":246,"value":1614}," must match the real image. Nuxt Photo uses them to lay out\nthumbnails before images load and to compute the lightbox transition frame.\nWrong dimensions can still render an image, but the layout and opening\nanimation will be wrong.",{"type":241,"tag":249,"props":1616,"children":1618},{"id":1617},"choose-the-next-task",[1619],{"type":246,"value":1620},"Choose the next task",{"type":241,"tag":256,"props":1622,"children":1623},{},[1624,1633,1643],{"type":241,"tag":260,"props":1625,"children":1626},{},[1627,1631],{"type":241,"tag":266,"props":1628,"children":1629},{"href":34},[1630],{"type":246,"value":30},{"type":246,"value":1632}," when you need a single photo,\nseveral albums, or a carousel.",{"type":241,"tag":260,"props":1634,"children":1635},{},[1636,1641],{"type":241,"tag":266,"props":1637,"children":1638},{"href":60},[1639],{"type":246,"value":1640},"Use your CMS photos",{"type":246,"value":1642}," when data comes from an\nAPI or content system.",{"type":241,"tag":260,"props":1644,"children":1645},{},[1646,1650],{"type":241,"tag":266,"props":1647,"children":1648},{"href":85},[1649],{"type":246,"value":82},{"type":246,"value":1651}," when the rows,\nspacing, or breakpoints need to change.",{"title":1653,"searchDepth":1654,"depth":1654,"links":1655},"",4,[1656,1658,1659,1660,1661],{"id":251,"depth":1657,"text":254},2,{"id":283,"depth":1657,"text":286},{"id":1180,"depth":1657,"text":1183},{"id":1212,"depth":1657,"text":1215},{"id":1617,"depth":1657,"text":1620},"markdown","docs",{"source":1665,"path":1666,"stem":1667,"dir":1668,"extension":1669},"content","docs\u002F1.start\u002F3.build-your-first-album.md","docs\u002F1.start\u002F3.build-your-first-album","start","md",{"requestedPath":28,"resolvedPath":28,"alternates":1671},[],{"requested":1673,"resolved":1674,"usedFallback":6},{},{"locale":8},{"previous":1676,"next":1677},{"title":20,"id":21,"canonicalKey":22,"locale":8,"draft":6,"path":23},{"title":30,"id":31,"canonicalKey":32,"locale":8,"draft":6,"navigation":1678,"path":34},{"title":30},{"left":1680,"top":1680,"width":1681,"height":1681,"rotate":1680,"vFlip":6,"hFlip":6,"body":1682},0,24,"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Crect width=\"8\" height=\"4\" x=\"8\" y=\"2\" rx=\"1\" ry=\"1\"\u002F>\u003Cpath d=\"M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2\"\u002F>\u003C\u002Fg>",{"left":1680,"top":1680,"width":1684,"height":1685,"rotate":1680,"vFlip":6,"hFlip":6,"body":1686},256,221,"\u003Cpath fill=\"#41b883\" d=\"M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0z\"\u002F>\u003Cpath fill=\"#41b883\" d=\"m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0z\"\u002F>\u003Cpath fill=\"#35495e\" d=\"M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0z\"\u002F>",{"left":1680,"top":1680,"width":1684,"height":1684,"rotate":1680,"vFlip":6,"hFlip":6,"body":1688},"\u003Cpath fill=\"#3178c6\" d=\"M20 0h216c11.046 0 20 8.954 20 20v216c0 11.046-8.954 20-20 20H20c-11.046 0-20-8.954-20-20V20C0 8.954 8.954 0 20 0\"\u002F>\u003Cpath fill=\"#fff\" d=\"M150.518 200.475v27.62q6.738 3.453 15.938 5.179T185.849 235q9.934 0 18.874-1.899t15.678-6.257q6.738-4.359 10.669-11.394q3.93-7.033 3.93-17.391q0-7.51-2.246-13.163a30.8 30.8 0 0 0-6.479-10.055q-4.232-4.402-10.149-7.898t-13.347-6.602q-5.442-2.245-9.761-4.359t-7.342-4.316q-3.024-2.2-4.665-4.661t-1.641-5.567q0-2.848 1.468-5.135q1.469-2.288 4.147-3.927t6.565-2.547q3.887-.906 8.638-.906q3.456 0 7.299.518q3.844.517 7.732 1.597a54 54 0 0 1 7.558 2.719a41.7 41.7 0 0 1 6.781 3.797v-25.807q-6.306-2.417-13.778-3.582T198.633 107q-9.847 0-18.658 2.115q-8.811 2.114-15.506 6.602q-6.694 4.49-10.582 11.437Q150 134.102 150 143.769q0 12.342 7.127 21.06t21.638 14.759a292 292 0 0 1 10.625 4.575q4.924 2.244 8.509 4.66t5.658 5.265t2.073 6.474a9.9 9.9 0 0 1-1.296 4.963q-1.295 2.287-3.93 3.97t-6.565 2.632t-9.2.95q-8.983 0-17.794-3.151t-16.327-9.451m-46.036-68.733H140V109H41v22.742h35.345V233h28.137z\"\u002F>",1788702877817]