Here are the fully updated files integrating the requested layout variations. ### Updated PHP File This updated PHP file adds the "White Cube" and "Museum Wall" layout modes to the documentation header and ensures the natural image width and height attributes are printed for the new layouts to prevent cumulative layout shift. ```php <?php require_once __DIR__ . '/../../../lib/dynamic_gallery_data.php';// Layout $layout=$settings['layout'] ?? 'grid';$columns=(int)($settings['columns'] ?? 3);$gap_class='reach-gallery--gap-' . ($settings['gap'] ?? 'medium');$hover_effect=$settings['hover_effect'] ?? 'zoom';$full_width=!empty($settings['full_width']);// Universal classes (padding,width,etc.) $universal_classes=get_universal_classes($settings);// Data if ($settings['limit']==='all'){$limit=999}else{$limit=(int)$settings['limit'];// cast to int for safety $limit=min(max($limit, 1), 50);// clamp between 1 and 50}$sort=$settings['sort'] ?? 'newest';$album=$settings['album'] ?? 'all';// Visibility $show_title=!empty($settings['show_title']);$show_price=!empty($settings['show_price']);$show_medium=!empty($settings['show_medium']);$show_dimensions=!empty($settings['show_dimensions']);$show_sold_badge=!empty($settings['show_sold_badge']);$has_info=$show_title || $show_price || $show_medium || $show_dimensions;// Title typography $title_style_parts=[];$ts=$settings['title_size'] ?? '0.9375rem';$tw=$settings['title_weight'] ?? '600';$tt=$settings['title_transform'] ?? 'none';$ta=$settings['title_align'] ?? 'left';$tc=$settings['title_color'] ?? '';if ($ts !=='0.9375rem') $title_style_parts[]="font-size:{$ts}";if ($tw !=='600') $title_style_parts[]="font-weight:{$tw}";if ($tt !=='none') $title_style_parts[]="text-transform:{$tt}";if ($ta !=='left') $title_style_parts[]="text-align:{$ta}";if ($tc) $title_style_parts[]="color:" . e($tc);$title_style=$title_style_parts ? ' style="' . implode(';',$title_style_parts) . '"' :'';// Price typography $price_style_parts=[];$ps=$settings['price_size'] ?? '0.875rem';$pw=$settings['price_weight'] ?? '600';$pc=$settings['price_color'] ?? '';if ($ps !=='0.875rem') $price_style_parts[]="font-size:{$ps}";if ($pw !=='600') $price_style_parts[]="font-weight:{$pw}";if ($pc) $price_style_parts[]="color:" . e($pc);$price_style=$price_style_parts ? ' style="' . implode(';',$price_style_parts) . '"' :'';// Meta typography $meta_style_parts=[];$ms=$settings['meta_size'] ?? '0.8125rem';$mc=$settings['meta_color'] ?? '';if ($ms !=='0.8125rem') $meta_style_parts[]="font-size:{$ms}";if ($mc) $meta_style_parts[]="color:" . e($mc);$meta_style=$meta_style_parts ? ' style="' . implode(';',$meta_style_parts) . '"' :'';// Info alignment $info_style=($ta !=='left') ? ' style="text-align:' . e($ta) . '"' :'';// Fetch artwork $items=reach_get_dynamic_gallery_items($artist,$limit,$sort,$album);$layout_class='reach-dg--' . e($layout);$hover_class='reach-dg--hover-' . e($hover_effect);?><section id="<?= e($section_id) ?>" class="reach-section reach-gallery reach-dynamic-gallery <?= $layout_class ?> <?= $hover_class ?> <?= e($gap_class) ?> <?= e($universal_classes) ?>"><?php ?><?=render_universal_styles($section_id,$settings) ?><?php if ($full_width):?><style>#<?=e($section_id) ?>{padding:0}#<?=e($section_id) ?>.reach-gallery__inner,#<?=e($section_id) ?>.reach-gallery__grid{max-width:unset;width:100%}</style><?php endif;?><div class="reach-gallery__inner"><?php if (!empty($settings['heading'])):?><h2 class="reach-section__heading" style="text-align: center;"><?=e($settings['heading']) ?></h2><?php endif;?><?php if ($layout==='slider'):?><div class="reach-dg__slider" style="--gallery-columns: <?= $columns ?>;"><div class="reach-dg__slider-track"><?php else:?><div class="reach-gallery__grid reach-dg__grid" style="--gallery-columns: <?= $columns ?>;"><?php endif;?><?php if (empty($items)):?><div style="grid-column:1/-1; text-align:center; padding:3rem; color:var(--reach-text-light);">No artwork found. </div><?php else:?><?php foreach ($items as $item):?><a href="<?= e($item['url']) ?>" class="reach-dg__item" style="text-decoration:none; color:inherit;"><?php if ($item['image_url']):?><div class="reach-dg__img-wrap"><img class="reach-dg__img" src="<?= e($item['image_url']) ?>" alt="<?= e($item['title'] ?? '') ?>" loading="lazy" <?php if (in_array($layout,['masonry','justified','white-cube','museum-wall'])):?>width="<?= (int)$item['img_width'] ?>" height="<?= (int)$item['img_height'] ?>" <?php endif;?>><?php if ($show_sold_badge && $item['sold']):?><span class="reach-dg__sold-badge">Sold</span><?php endif;?></div><?php endif;?><?php if ($has_info):?><div class="reach-dg__info"<?=$info_style ?>><?php if ($show_title && $item['title']):?><h3 class="reach-dg__title"<?=$title_style ?>><?=e($item['title']) ?></h3><?php endif;?><?php if ($show_medium && $item['medium']):?><p class="reach-dg__meta"<?=$meta_style ?>><?=e($item['medium']) ?></p><?php endif;?><?php if ($show_dimensions && !empty($item['dimensions'])) :?><p class="reach-dg__meta"<?=$meta_style ?>><?=e($item['dimensions']) ?></p><?php endif;?><?php if ($show_price && $item['price']):?><p class="reach-dg__price"<?=$price_style ?>><?=e($item['formatted_price']) ?></p><?php endif;?></div><?php endif;?></a><?php endforeach;?><?php endif;?><?php if ($layout==='slider'):?></div></div><?php else:?></div><?php endif;?></div></section>``` --- ### Updated CSS File This updated CSS file includes the structural definitions for the `reach-dg--white-cube` and `reach-dg--museum-wall` layout classes,along with all corresponding gap modifiers and responsive behavior. ```css .reach-dynamic-gallery{padding-left:1.5rem;padding-right:1.5rem}.reach-dynamic-gallery .reach-gallery__inner{max-width:var(--reach-max-width);margin:0 auto}.reach-dg__item{display:block;overflow:hidden;border-radius:var(--reach-border-radius)}.reach-dg__img-wrap{position:relative;overflow:hidden;background:var(--reach-surface);border-radius:var(--reach-border-radius)}.reach-dg__img{display:block;width:100%;transition:transform 0.4s ease,opacity 0.4s ease}.reach-dg__sold-badge{position:absolute;top:8px;right:8px;background:rgb(0 0 0 / .72);color:#fff;font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;padding:3px 8px;border-radius:3px}.reach-dg__info{padding:.6rem .125rem 0}.reach-dg__title{font-family:var(--reach-font-heading),serif;font-size:.9375rem;font-weight:600;color:var(--reach-primary);margin:0;line-height:1.35}.reach-dg__meta{font-size:.8125rem;color:var(--reach-text-light);margin:.15rem 0 0;line-height:1.4}.reach-dg__price{font-size:.875rem;font-weight:600;color:var(--reach-primary);margin:.3rem 0 0}.reach-dg--grid .reach-dg__grid{display:grid;grid-template-columns:repeat(var(--gallery-columns,3),1fr)}.reach-dg--grid .reach-dg__img-wrap{aspect-ratio:1 / 1}.reach-dg--grid .reach-dg__img{height:100%;object-fit:cover}.reach-dg--masonry .reach-dg__grid{display:columns;column-count:var(--gallery-columns,3);column-fill:balance}.reach-dg--masonry .reach-gallery__grid{display:block;column-count:var(--gallery-columns,3)}.reach-dg--masonry .reach-dg__item{break-inside:avoid;margin-bottom:0}.reach-dg--masonry .reach-dg__img{height:auto}.reach-dg--masonry.reach-gallery--gap-none .reach-gallery__grid{column-gap:0}.reach-dg--masonry.reach-gallery--gap-none .reach-dg__item{margin-bottom:0}.reach-dg--masonry.reach-gallery--gap-small .reach-gallery__grid{column-gap:.5rem}.reach-dg--masonry.reach-gallery--gap-small .reach-dg__item{margin-bottom:.5rem}.reach-dg--masonry.reach-gallery--gap-medium .reach-gallery__grid{column-gap:1rem}.reach-dg--masonry.reach-gallery--gap-medium .reach-dg__item{margin-bottom:1rem}.reach-dg--masonry.reach-gallery--gap-large .reach-gallery__grid{column-gap:1.5rem}.reach-dg--masonry.reach-gallery--gap-large .reach-dg__item{margin-bottom:1.5rem}.reach-dg--justified .reach-dg__grid{display:flex;flex-wrap:wrap}.reach-dg--justified .reach-dg__item{flex-grow:1;min-width:calc(100% / (var(--gallery-columns, 3) + 1));max-width:calc(100% / (var(--gallery-columns, 3) - 1))}.reach-dg--justified .reach-dg__img-wrap{height:240px}.reach-dg--justified .reach-dg__img{height:100%;object-fit:cover}.reach-dg--justified.reach-gallery--gap-none .reach-dg__grid{gap:0}.reach-dg--justified.reach-gallery--gap-small .reach-dg__grid{gap:.5rem}.reach-dg--justified.reach-gallery--gap-medium .reach-dg__grid{gap:1rem}.reach-dg--justified.reach-gallery--gap-large .reach-dg__grid{gap:1.5rem}.reach-dg--white-cube .reach-dg__grid{display:grid;grid-template-columns:repeat(var(--gallery-columns,3),1fr)}.reach-dg--white-cube .reach-dg__img-wrap{aspect-ratio:1 / 1}.reach-dg--white-cube .reach-dg__img{height:100%;width:100%;object-fit:contain;padding:5%}.reach-dg--white-cube.reach-gallery--gap-none .reach-dg__grid{gap:0}.reach-dg--white-cube.reach-gallery--gap-small .reach-dg__grid{gap:.5rem}.reach-dg--white-cube.reach-gallery--gap-medium .reach-dg__grid{gap:1rem}.reach-dg--white-cube.reach-gallery--gap-large .reach-dg__grid{gap:1.5rem}.reach-dg--museum-wall .reach-dg__grid{display:flex;flex-wrap:wrap;align-items:flex-end}.reach-dg--museum-wall .reach-dg__item{flex:auto}.reach-dg--museum-wall .reach-dg__img-wrap{height:300px;display:flex;justify-content:center}.reach-dg--museum-wall .reach-dg__img{height:100%;width:auto;max-width:100%;object-fit:contain}.reach-dg--museum-wall.reach-gallery--gap-none .reach-dg__grid{gap:0}.reach-dg--museum-wall.reach-gallery--gap-small .reach-dg__grid{gap:.5rem}.reach-dg--museum-wall.reach-gallery--gap-medium .reach-dg__grid{gap:1rem}.reach-dg--museum-wall.reach-gallery--gap-large .reach-dg__grid{gap:1.5rem}.reach-dg__slider{overflow:hidden;position:relative}.reach-dg__slider-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--reach-surface) #fff0;padding-bottom:.5rem}.reach-dg__slider-track::-webkit-scrollbar{height:6px}.reach-dg__slider-track::-webkit-scrollbar-thumb{background:var(--reach-surface);border-radius:3px}.reach-dg--slider .reach-dg__item{flex:0 0 calc(100% / var(--gallery-columns, 3));scroll-snap-align:start;min-width:0}.reach-dg--slider .reach-dg__slider-track{gap:0}.reach-dg--slider.reach-gallery--gap-small .reach-dg__slider-track{gap:.5rem}.reach-dg--slider.reach-gallery--gap-medium .reach-dg__slider-track{gap:1rem}.reach-dg--slider.reach-gallery--gap-large .reach-dg__slider-track{gap:1.5rem}.reach-dg--slider .reach-dg__img-wrap{aspect-ratio:1 / 1}.reach-dg--slider .reach-dg__img{height:100%;object-fit:cover}.reach-dg--hover-zoom .reach-dg__item:hover .reach-dg__img{transform:scale(1.05)}.reach-dg--hover-fade .reach-dg__img{opacity:.92}.reach-dg--hover-fade .reach-dg__item:hover .reach-dg__img{opacity:1}.reach-dg--hover-lift .reach-dg__item{transition:transform 0.3s ease,box-shadow 0.3s ease}.reach-dg--hover-lift .reach-dg__item:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgb(0 0 0 / .1)}.reach-dg--hover-none .reach-dg__item:hover .reach-dg__img{transform:none}@media (max-width:768px){.reach-dg--grid .reach-dg__grid,.reach-dg--white-cube .reach-dg__grid,.reach-dg--masonry .reach-gallery__grid{grid-template-columns:repeat(2,1fr);column-count:2}.reach-dg--justified .reach-dg__item{min-width:45%}.reach-dg--slider .reach-dg__item{flex:0 0 calc(100% / 2)}.reach-dg--justified .reach-dg__img-wrap{height:180px}.reach-dg--museum-wall .reach-dg__img-wrap{height:220px}}@media (max-width:480px){.reach-dg--grid .reach-dg__grid,.reach-dg--white-cube .reach-dg__grid,.reach-dg--masonry .reach-gallery__grid{grid-template-columns:1fr;column-count:1}.reach-dg--justified .reach-dg__item,.reach-dg--museum-wall .reach-dg__item{min-width:100%}.reach-dg--slider .reach-dg__item{flex:0 0 85%}.reach-dg--justified .reach-dg__img-wrap{height:200px}.reach-dg--museum-wall .reach-dg__img-wrap{height:250px}}```