<\/p>\n
ACF Gallery Fields enable multiple image uploads and management through drag-and-drop interfaces returning arrays of image data for custom gallery displays. From simple grid layouts and masonry galleries to lightbox integrations and responsive image galleries, the Gallery field eliminates plugin dependencies. This comprehensive tutorial teaches Gallery field setup, image array manipulation, responsive grid layouts, lightbox library integration, and advanced techniques creating professional custom image galleries with ACF PRO.<\/p>\n
Add Gallery Field via ACF UI<\/strong>:<\/p>\n Field Configuration Options<\/strong>:<\/p>\n Simple Gallery Grid<\/strong>:<\/p>\n CSS for Grid Layout<\/strong>:<\/p>\n Display Images with Captions<\/strong>:<\/p>\n\n
\n
Return Format:\n- Array: Full image data (recommended)\n- URL: Image URLs only\n- ID: Attachment IDs only\n\nLibrary:\n- all: All images in media library\n- uploadedTo: Only images uploaded to this post\n\nMin\/Max:\n- Min: 1 (require at least one image)\n- Max: 20 (limit to 20 images)\n\nInsert:\n- append: Add new images to end\n- prepend: Add new images to beginning<\/code><\/pre>\nBasic Gallery Display<\/h2>\n
<\/a><?php<\/span><\/span>\n<\/a>$images<\/span> = get_field(<\/span>'project_gallery'<\/span>);<\/span><\/span>\n<\/a><\/span>\n<\/a>if<\/span> (<\/span>$images<\/span>)<\/span> :<\/span>\n<\/a> ?><\/span><\/span>\n<\/a> <div class<\/span>="image-gallery"<\/span>><\/span>\n<\/a> <?<\/span>php foreach<\/span> (<\/span>$images<\/span> as<\/span> $image<\/span>)<\/span> :<\/span> ?><\/span><\/span>\n<\/a> <div class<\/span>="gallery-item"<\/span>><\/span>\n<\/a> <img src="<?php echo esc_url(<\/span>$image<\/span>['sizes']['medium']); ?>"<\/span><\/span>\n<\/a> alt="<?php echo esc_attr(<\/span>$image<\/span>['alt']); ?>"<\/span><\/span>\n<\/a> title="<?php echo esc_attr(<\/span>$image<\/span>['title']); ?>"<\/span> \/><\/span>\n<\/a> <\/div><\/span>\n<\/a> <?<\/span>php endfor<\/span>each;<\/span> ?><\/span><\/span>\n<\/a> <\/div><\/span>\n<\/a><?<\/span>php endif<\/span>;<\/span> ?><\/span><\/span><\/code><\/pre>\n<\/div>\n<\/a>.image-gallery<\/span> {<\/span>\n<\/a> display<\/span>: grid;<\/span><\/span>\n<\/a> grid-template-columns<\/span>: repeat(<\/span>auto-fill,<\/span> minmax(250<\/span>px<\/span>,<\/span> 1<\/span>fr)<\/span>);<\/span><\/span>\n<\/a> gap<\/span>: 20<\/span>px<\/span>;<\/span><\/span>\n<\/a> padding<\/span>: 20<\/span>px<\/span> 0<\/span>;<\/span><\/span>\n<\/a>}<\/span>\n<\/a><\/span>\n<\/a>.gallery-item<\/span> {<\/span>\n<\/a> position<\/span>: relative<\/span>;<\/span><\/span>\n<\/a> overflow<\/span>: hidden<\/span>;<\/span><\/span>\n<\/a> border-radius<\/span>: 8<\/span>px<\/span>;<\/span><\/span>\n<\/a>}<\/span>\n<\/a><\/span>\n<\/a>.gallery-item<\/span> img {<\/span>\n<\/a> width<\/span>: 100<\/span>%<\/span>;<\/span><\/span>\n<\/a> height<\/span>: 250<\/span>px<\/span>;<\/span><\/span>\n<\/a> object-fit<\/span>: cover<\/span>;<\/span><\/span>\n<\/a> transition<\/span>: transform 0.3<\/span>s<\/span> ease<\/span>;<\/span><\/span>\n<\/a>}<\/span>\n<\/a><\/span>\n<\/a>.gallery-item<\/span>:hover<\/span> img {<\/span>\n<\/a> transform<\/span>: scale(<\/span>1.05<\/span>)<\/span>;<\/span><\/span>\n<\/a>}<\/span><\/code><\/pre>\n<\/div>\nGallery with Captions<\/h2>\n
<\/a><?php<\/span><\/span>\n<\/a>$images<\/span> = get_field(<\/span>'project_gallery'<\/span>);<\/span><\/span>\n<\/a><\/span>\n<\/a>if<\/span> (<\/span>$images<\/span>)<\/span> :<\/span>\n<\/a> ?><\/span><\/span>\n<\/a> <div class<\/span>="gallery-with-captions"<\/span>><\/span>\n<\/a> <?<\/span>php foreach<\/span> (<\/span>$images<\/span> as<\/span> $image<\/span>)<\/span> :<\/span> ?><\/span><\/span>\n<\/a> <figure class<\/span>="gallery-item"<\/span>><\/span>\n<\/a> <img src="<?php echo esc_url(<\/span>$image<\/span>['sizes']['large']); ?>"<\/span><\/span>\n<\/a> alt="<?php echo esc_attr(<\/span>$image<\/span>['alt']); ?>"<\/span> \/><\/span>\n<\/a><\/span>\n<\/a> <?<\/span>php if<\/span> (<\/span>$image<\/span>