1:"$Sreact.fragment"
2:I[14627,["8173","static/chunks/8173-c3ed3bc2d0ae7ca8.js","7525","static/chunks/7525-7a1a5e1511dea190.js","7177","static/chunks/app/layout-11e1d5e45067277c.js"],"ThemeProvider"]
3:I[82025,["8173","static/chunks/8173-c3ed3bc2d0ae7ca8.js","7525","static/chunks/7525-7a1a5e1511dea190.js","7177","static/chunks/app/layout-11e1d5e45067277c.js"],"default"]
4:I[46525,["8173","static/chunks/8173-c3ed3bc2d0ae7ca8.js","7525","static/chunks/7525-7a1a5e1511dea190.js","7177","static/chunks/app/layout-11e1d5e45067277c.js"],"default"]
5:I[15244,[],""]
6:I[43866,[],""]
7:I[30191,["8173","static/chunks/8173-c3ed3bc2d0ae7ca8.js","406","static/chunks/406-889913e11df0a888.js","9952","static/chunks/app/examples/advanced-images/page-1bde23306b79a80b.js"],"default",1]
a:I[48173,["8173","static/chunks/8173-c3ed3bc2d0ae7ca8.js","406","static/chunks/406-889913e11df0a888.js","9952","static/chunks/app/examples/advanced-images/page-1bde23306b79a80b.js"],""]
b:I[86213,[],"OutletBoundary"]
d:I[86213,[],"MetadataBoundary"]
f:I[86213,[],"ViewportBoundary"]
11:I[34835,[],""]
:HL["/_next/static/media/a34f9d1faa5f3315-s.p.woff2","font",{"crossOrigin":"","type":"font/woff2"}]
:HL["/_next/static/css/7372fd73fc9f904e.css","style"]
8:T650,# Advanced image configuration
pictures:
  yearmonth_folders: true  # Organize uploads by year/month

  placeholder:             # Image placeholder settings
    text: 'Image not available'
    
  thumbnail:               # Default thumbnail size
    width: 150
    height: 150
    crop: true
    
  sizes:                   # Custom image sizes
    # Content images
    medium:
      width: 768
      height: 0
      crop: false
    large:
      width: 1200
      height: 0
      crop: false
      
    # Hero images
    hero-small:
      width: 576
      height: 300
      crop: true
    hero-medium:
      width: 768
      height: 400
      crop: true
    hero-large:
      width: 1200
      height: 500
      crop: true
    hero-xlarge:
      width: 1920
      height: 600
      crop: true
      
    # Square images for cards and thumbnails
    square-small:
      width: 150
      height: 150
      crop: true
    square-medium:
      width: 300
      height: 300
      crop: true
    square-large:
      width: 600
      height: 600
      crop: true
      
    # Portrait images for team members
    portrait-small:
      width: 200
      height: 300
      crop: true
    portrait-medium:
      width: 400
      height: 600
      crop: true
      
    # Landscape images for featured posts
    landscape-small:
      width: 400
      height: 300
      crop: true
    landscape-medium:
      width: 800
      height: 600
      crop: true
    
    # Gallery images
    gallery-thumbnail:
      width: 200
      height: 200
      crop: true
    gallery-full:
      width: 1200
      height: 800
      crop: false9:T811,// Simple vanilla JavaScript lazy loading
document.addEventListener('DOMContentLoaded', function() {
  var lazyImages = [].slice.call(document.querySelectorAll('img.lazy'));
  
  if ('IntersectionObserver' in window) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.srcset = lazyImage.dataset.srcset;
          lazyImage.classList.remove('lazy');
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });
    
    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  } else {
    // Fallback for browsers without IntersectionObserver support
    let active = false;
    
    const lazyLoad = function() {
      if (active === false) {
        active = true;
        
        setTimeout(function() {
          lazyImages.forEach(function(lazyImage) {
            if ((lazyImage.getBoundingClientRect().top <= window.innerHeight && lazyImage.getBoundingClientRect().bottom >= 0) && getComputedStyle(lazyImage).display !== 'none') {
              lazyImage.src = lazyImage.dataset.src;
              lazyImage.srcset = lazyImage.dataset.srcset;
              lazyImage.classList.remove('lazy');
              
              lazyImages = lazyImages.filter(function(image) {
                return image !== lazyImage;
              });
              
              if (lazyImages.length === 0) {
                document.removeEventListener('scroll', lazyLoad);
                window.removeEventListener('resize', lazyLoad);
                window.removeEventListener('orientationchange', lazyLoad);
              }
            }
          });
          
          active = false;
        }, 200);
      }
    };
    
    document.addEventListener('scroll', lazyLoad);
    window.addEventListener('resize', lazyLoad);
    window.addEventListener('orientationchange', lazyLoad);
  }
});0:{"P":null,"b":"ds2nZAjgJ_uSRgCt4uMw0","p":"","c":["","examples","advanced-images"],"i":false,"f":[[["",{"children":["examples",{"children":["advanced-images",{"children":["__PAGE__",{}]}]}]},"$undefined","$undefined",true],["",["$","$1","c",{"children":[[["$","link","0",{"rel":"stylesheet","href":"/_next/static/css/7372fd73fc9f904e.css","precedence":"next","crossOrigin":"$undefined","nonce":"$undefined"}]],["$","html",null,{"lang":"en","suppressHydrationWarning":true,"children":["$","body",null,{"className":"__className_d65c78","children":["$","$L2",null,{"attribute":"class","defaultTheme":"light","enableSystem":true,"disableTransitionOnChange":true,"children":["$","div",null,{"className":"flex flex-col min-h-screen","children":[["$","$L3",null,{}],["$","div",null,{"className":"flex flex-1 flex-col md:flex-row mt-16 md:mt-16","children":[["$","$L4",null,{}],["$","main",null,{"className":"flex-1 p-4 md:p-8 pb-16","children":["$","div",null,{"className":"container mx-auto max-w-4xl","children":["$","$L5",null,{"parallelRouterKey":"children","segmentPath":["children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":[[],[["$","title",null,{"children":"404: This page could not be found."}],["$","div",null,{"style":{"fontFamily":"system-ui,\"Segoe UI\",Roboto,Helvetica,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\"","height":"100vh","textAlign":"center","display":"flex","flexDirection":"column","alignItems":"center","justifyContent":"center"},"children":["$","div",null,{"children":[["$","style",null,{"dangerouslySetInnerHTML":{"__html":"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}"}}],["$","h1",null,{"className":"next-error-h1","style":{"display":"inline-block","margin":"0 20px 0 0","padding":"0 23px 0 0","fontSize":24,"fontWeight":500,"verticalAlign":"top","lineHeight":"49px"},"children":404}],["$","div",null,{"style":{"display":"inline-block"},"children":["$","h2",null,{"style":{"fontSize":14,"fontWeight":400,"lineHeight":"49px","margin":0},"children":"This page could not be found."}]}]]}]}]]],"forbidden":"$undefined","unauthorized":"$undefined"}]}]}]]}],["$","footer",null,{"className":"border-t border-border py-6 bg-muted/40","children":["$","div",null,{"className":"container mx-auto px-4 md:px-6","children":["$","div",null,{"className":"flex flex-col md:flex-row justify-between items-center","children":[["$","div",null,{"className":"mb-4 md:mb-0","children":["$","p",null,{"className":"text-sm text-muted-foreground","children":["© ",2025," Combo WordPress Plugin. All rights reserved."]}]}],["$","div",null,{"className":"flex space-x-6","children":[["$","a",null,{"href":"#","className":"text-sm text-muted-foreground hover:text-foreground transition-colors","children":"Privacy Policy"}],["$","a",null,{"href":"#","className":"text-sm text-muted-foreground hover:text-foreground transition-colors","children":"Terms of Service"}],["$","a",null,{"href":"#","className":"text-sm text-muted-foreground hover:text-foreground transition-colors","children":"Contact"}]]}]]}]}]}]]}]}]}]}]]}],{"children":["examples",["$","$1","c",{"children":[null,["$","$L5",null,{"parallelRouterKey":"children","segmentPath":["children","examples","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":["advanced-images",["$","$1","c",{"children":[null,["$","$L5",null,{"parallelRouterKey":"children","segmentPath":["children","examples","children","advanced-images","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L6",null,{}],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"}]]}],{"children":["__PAGE__",["$","$1","c",{"children":[["$","div",null,{"className":"space-y-8","children":[["$","div",null,{"children":[["$","h1",null,{"className":"text-3xl font-bold tracking-tight mb-4","children":"Advanced Image Configuration Example"}],["$","p",null,{"className":"text-muted-foreground","children":"Learn how to configure responsive image sizes and optimize image handling with the Combo plugin."}]]}],["$","div",null,{"className":"space-y-4","children":[["$","h2",null,{"className":"text-xl font-semibold","children":"Custom Image Sizes Configuration"}],["$","p",null,{"className":"text-muted-foreground mb-4","children":"This example demonstrates how to configure custom image sizes for different use cases:"}],["$","$L7",null,{"code":"$8","language":"yaml","filename":"config.yml"}]]}],["$","div",null,{"className":"space-y-4","children":[["$","h2",null,{"className":"text-xl font-semibold","children":"Using Custom Image Sizes"}],["$","p",null,{"className":"text-muted-foreground mb-4","children":"Here's how to use these custom image sizes in your theme:"}],["$","div",null,{"className":"space-y-6","children":[["$","div",null,{"children":[["$","h3",null,{"className":"text-lg font-medium","children":"Hero Section"}],["$","$L7",null,{"code":"<?php\n// Get the hero image from ACF\n$hero_image = get_field('hero_image');\n\n// Use responsive image sizes with srcset\ncbo_acf_img($hero_image, 'hero-large', [\n  ['hero-small', 576],\n  ['hero-medium', 768],\n  ['hero-large', 1200],\n  ['hero-xlarge', 1920],\n  ['sizes', '100vw']\n], [\n  'class' => 'hero-image',\n  'lazy' => true\n]);\n?>","language":"php"}]]}],["$","div",null,{"children":[["$","h3",null,{"className":"text-lg font-medium","children":"Team Member Grid"}],["$","$L7",null,{"code":"<?php\n// Get team members\n$team_members = get_field('team_members');\n\nif ($team_members) {\n  echo '<div class=\"team-grid\">';\n  \n  foreach ($team_members as $member) {\n    echo '<div class=\"team-member\">';\n    \n    // Display team member photo\n    cbo_acf_img($member['photo'], 'portrait-medium', [\n      ['portrait-small', 576],\n      ['portrait-medium', 992]\n    ], [\n      'class' => 'team-member-photo',\n      'lazy' => true\n    ]);\n    \n    echo '<h3>' . $member['name'] . '</h3>';\n    echo '<p>' . $member['position'] . '</p>';\n    echo '</div>';\n  }\n  \n  echo '</div>';\n}\n?>","language":"php"}]]}],["$","div",null,{"children":[["$","h3",null,{"className":"text-lg font-medium","children":"Featured Posts"}],["$","$L7",null,{"code":"<?php\n// Get featured posts\n$featured_posts = get_field('featured_posts');\n\nif ($featured_posts) {\n  echo '<div class=\"featured-posts\">';\n  \n  foreach ($featured_posts as $post) {\n    setup_postdata($post);\n    \n    echo '<div class=\"featured-post\">';\n    \n    // Display featured image\n    if (has_post_thumbnail()) {\n      $featured_image_id = get_post_thumbnail_id();\n      \n      cbo_img($featured_image_id, [\n        'size' => 'landscape-medium',\n        'class' => 'featured-post-image',\n        'lazy' => true\n      ]);\n    }\n    \n    echo '<h3><a href=\"' . get_permalink() . '\">' . get_the_title() . '</a></h3>';\n    echo '<div class=\"excerpt\">' . get_the_excerpt() . '</div>';\n    echo '</div>';\n  }\n  \n  wp_reset_postdata();\n  echo '</div>';\n}\n?>","language":"php"}]]}],["$","div",null,{"children":[["$","h3",null,{"className":"text-lg font-medium","children":"Image Gallery"}],["$","$L7",null,{"code":"<?php\n// Get gallery images\n$gallery_images = get_field('gallery');\n\nif ($gallery_images) {\n  echo '<div class=\"gallery\">';\n  \n  foreach ($gallery_images as $image) {\n    echo '<div class=\"gallery-item\">';\n    \n    // Create a link to the full-size image\n    echo '<a href=\"' . $image['url'] . '\" class=\"gallery-link\" data-fancybox=\"gallery\">';\n    \n    // Display thumbnail\n    cbo_acf_img($image, 'gallery-thumbnail', null, [\n      'class' => 'gallery-thumbnail',\n      'lazy' => true\n    ]);\n    \n    echo '</a>';\n    echo '</div>';\n  }\n  \n  echo '</div>';\n}\n?>","language":"php"}]]}]]}]]}],["$","div",null,{"className":"space-y-4","children":[["$","h2",null,{"className":"text-xl font-semibold","children":"Optimizing Image Loading"}],["$","p",null,{"className":"text-muted-foreground mb-4","children":"Configure lazy loading for images to improve page load performance:"}],["$","$L7",null,{"code":"# Configure lazy loading\nassets:\n  version: \"1.0.0\"\n  lazyload: true    # Enable native lazy loading\n\n# Or use vanilla JavaScript lazy loading\n# lazyload: 'vanilla'","language":"yaml"}],["$","p",null,{"className":"text-muted-foreground mt-4","children":"When using vanilla JavaScript lazy loading, you'll need to include a lazy loading script:"}],["$","$L7",null,{"code":"$9","language":"javascript"}]]}],["$","div",null,{"className":"space-y-4","children":[["$","h2",null,{"className":"text-xl font-semibold","children":"Best Practices for Image Handling"}],["$","ul",null,{"className":"list-disc pl-6 space-y-2 text-muted-foreground","children":[["$","li",null,{"children":"Define image sizes based on their purpose and where they'll be used in your theme"}],["$","li",null,{"children":"Use descriptive names for custom image sizes"}],["$","li",null,{"children":"Enable lazy loading for images below the fold"}],["$","li",null,{"children":"Use srcset and sizes attributes for responsive images"}],["$","li",null,{"children":"Set appropriate crop parameters based on the image's purpose"}],["$","li",null,{"children":"Consider using WebP format for better compression (requires additional configuration)"}]]}]]}],["$","div",null,{"className":"mt-8 border-t border-border pt-6","children":["$","div",null,{"className":"flex justify-between","children":[["$","$La",null,{"href":"/examples/basic","className":"text-primary hover:underline","children":"← Basic Configuration"}],["$","$La",null,{"href":"/examples/multilingual","className":"text-primary hover:underline","children":"Multilingual Setup →"}]]}]}]]}],null,["$","$Lb",null,{"children":"$Lc"}]]}],{},null,false]},null,false]},null,false]},null,false],["$","$1","h",{"children":[null,["$","$1","-m4mAo8HjLMwOhhuwKIzF",{"children":[["$","$Ld",null,{"children":"$Le"}],["$","$Lf",null,{"children":"$L10"}],["$","meta",null,{"name":"next-size-adjust","content":""}]]}]]}],false]],"m":"$undefined","G":["$11","$undefined"],"s":false,"S":true}
10:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"}]]
e:[["$","meta","0",{"charSet":"utf-8"}],["$","title","1",{"children":"Combo WordPress Plugin Documentation"}],["$","meta","2",{"name":"description","content":"Documentation for the Combo WordPress plugin - A powerful configuration system and optimization toolkit"}],["$","meta","3",{"name":"generator","content":"v0.dev"}]]
c:null