(function () { 'use strict'; var POST_FEED_SELECTOR = '#post-feed-list.stack-list'; var MEDIA_GRID_SELECTOR = '.post-media-grid'; var MOBILE_BREAKPOINT = 680; var COLLAGE_LAYOUTS = { 2: [ { name: 'two-balanced-row', cols: [1, 1], rows: [1], slots: [{ c: 1, r: 1 }, { c: 2, r: 1 }], minAspect: 1.05, maxAspect: 3.2, penalty: 0 }, { name: 'two-hero-row', cols: [3, 2], rows: [1], slots: [{ c: 1, r: 1 }, { c: 2, r: 1 }], minAspect: 1.05, maxAspect: 3.2, penalty: 0.04 }, { name: 'two-balanced-column', cols: [1], rows: [1, 1], slots: [{ c: 1, r: 1 }, { c: 1, r: 2 }], minAspect: 0.5, maxAspect: 1.15, penalty: 0.03 }, { name: 'two-hero-column', cols: [1], rows: [3, 2], slots: [{ c: 1, r: 1 }, { c: 1, r: 2 }], minAspect: 0.45, maxAspect: 1.15, penalty: 0.08 } ], 3: [ { name: 'three-hero-left', cols: [2, 1], rows: [1, 1], slots: [{ c: 1, r: 1, rs: 2 }, { c: 2, r: 1 }, { c: 2, r: 2 }], minAspect: 0.95, maxAspect: 2.4, penalty: 0 }, { name: 'three-hero-top', cols: [1, 1], rows: [2, 1], slots: [{ c: 1, r: 1, cs: 2 }, { c: 1, r: 2 }, { c: 2, r: 2 }], minAspect: 0.6, maxAspect: 1.5, penalty: 0.02 }, { name: 'three-row', cols: [1, 1, 1], rows: [1], slots: [{ c: 1, r: 1 }, { c: 2, r: 1 }, { c: 3, r: 1 }], minAspect: 1.4, maxAspect: 4, penalty: 0.09 }, { name: 'three-column', cols: [1], rows: [1, 1, 1], slots: [{ c: 1, r: 1 }, { c: 1, r: 2 }, { c: 1, r: 3 }], minAspect: 0.35, maxAspect: 1, penalty: 0.11 } ], 4: [ { name: 'four-grid', cols: [1, 1], rows: [1, 1], slots: [{ c: 1, r: 1 }, { c: 2, r: 1 }, { c: 1, r: 2 }, { c: 2, r: 2 }], minAspect: 0.7, maxAspect: 1.8, penalty: 0 }, { name: 'four-row', cols: [1, 1, 1, 1], rows: [1], slots: [{ c: 1, r: 1 }, { c: 2, r: 1 }, { c: 3, r: 1 }, { c: 4, r: 1 }], minAspect: 1.7, maxAspect: 5, penalty: 0.14 }, { name: 'four-column', cols: [1], rows: [1, 1, 1, 1], slots: [{ c: 1, r: 1 }, { c: 1, r: 2 }, { c: 1, r: 3 }, { c: 1, r: 4 }], minAspect: 0.3, maxAspect: 0.95, penalty: 0.14 } ], 5: [ { name: 'five-two-three', cols: [1, 1, 1, 1, 1, 1], rows: [1, 1], slots: [ { c: 1, r: 1, cs: 3 }, { c: 4, r: 1, cs: 3 }, { c: 1, r: 2, cs: 2 }, { c: 3, r: 2, cs: 2 }, { c: 5, r: 2, cs: 2 } ], minAspect: 0.85, maxAspect: 2.35, penalty: 0 }, { name: 'five-hero-top', cols: [1, 1], rows: [2, 1, 1], slots: [ { c: 1, r: 1, cs: 2 }, { c: 1, r: 2 }, { c: 2, r: 2 }, { c: 1, r: 3 }, { c: 2, r: 3 } ], minAspect: 0.6, maxAspect: 1.6, penalty: 0.03 }, { name: 'five-hero-left', cols: [2, 1, 1], rows: [1, 1], slots: [ { c: 1, r: 1, rs: 2 }, { c: 2, r: 1 }, { c: 3, r: 1 }, { c: 2, r: 2 }, { c: 3, r: 2 } ], minAspect: 0.95, maxAspect: 2.3, penalty: 0.02 } ], 6: [ { name: 'six-grid-wide', cols: [1, 1, 1], rows: [1, 1], slots: [ { c: 1, r: 1 }, { c: 2, r: 1 }, { c: 3, r: 1 }, { c: 1, r: 2 }, { c: 2, r: 2 }, { c: 3, r: 2 } ], minAspect: 1.05, maxAspect: 2.8, penalty: 0 }, { name: 'six-grid-tall', cols: [1, 1], rows: [1, 1, 1], slots: [ { c: 1, r: 1 }, { c: 2, r: 1 }, { c: 1, r: 2 }, { c: 2, r: 2 }, { c: 1, r: 3 }, { c: 2, r: 3 } ], minAspect: 0.55, maxAspect: 1.2, penalty: 0.04 } ], 7: [ { name: 'seven-wide', cols: [1, 1, 1, 1], rows: [1, 1], slots: [ { c: 1, r: 1, cs: 2 }, { c: 3, r: 1 }, { c: 4, r: 1 }, { c: 1, r: 2 }, { c: 2, r: 2 }, { c: 3, r: 2 }, { c: 4, r: 2 } ], minAspect: 1.1, maxAspect: 3.2, penalty: 0 }, { name: 'seven-tall', cols: [1, 1], rows: [1, 1, 1, 1], slots: [ { c: 1, r: 1, rs: 2 }, { c: 2, r: 1 }, { c: 2, r: 2 }, { c: 1, r: 3 }, { c: 2, r: 3 }, { c: 1, r: 4 }, { c: 2, r: 4 } ], minAspect: 0.45, maxAspect: 1.15, penalty: 0.05 } ], 8: [ { name: 'eight-wide', cols: [1, 1, 1, 1], rows: [1, 1], slots: [ { c: 1, r: 1 }, { c: 2, r: 1 }, { c: 3, r: 1 }, { c: 4, r: 1 }, { c: 1, r: 2 }, { c: 2, r: 2 }, { c: 3, r: 2 }, { c: 4, r: 2 } ], minAspect: 1.2, maxAspect: 3.6, penalty: 0 }, { name: 'eight-tall', cols: [1, 1], rows: [1, 1, 1, 1], slots: [ { c: 1, r: 1 }, { c: 2, r: 1 }, { c: 1, r: 2 }, { c: 2, r: 2 }, { c: 1, r: 3 }, { c: 2, r: 3 }, { c: 1, r: 4 }, { c: 2, r: 4 } ], minAspect: 0.45, maxAspect: 1.15, penalty: 0.05 } ] }; function parsePx(raw, fallback) { var text = String(raw || '').trim(); if (!text || text.indexOf('%') !== -1) return fallback; var value = parseFloat(text); return Number.isFinite(value) && value >= 0 ? value : fallback; } function parseCount(raw, fallback) { var value = parseInt(String(raw || '').trim(), 10); return Number.isFinite(value) && value > 0 ? value : fallback; } function readRootStyles() { return window.getComputedStyle(document.documentElement); } function setStyle(el, property, value) { if (el.style.getPropertyValue(property) !== value) { el.style.setProperty(property, value); } } function clamp(value, min, max) { return Math.min(max, Math.max(min, value)); } function sum(values) { return values.reduce(function (acc, value) { return acc + value; }, 0); } function geometricMean(values) { if (!values.length) return 1; var total = values.reduce(function (acc, value) { return acc + Math.log(clamp(value, 0.2, 5)); }, 0); return Math.exp(total / values.length); } function getAvailableWidth(root) { var source = root.parentElement || root; var rectWidth = Math.ceil(source.getBoundingClientRect().width); var clientWidth = source.clientWidth || 0; return Math.max(clientWidth, rectWidth, 0); } function resolveFixedColumns(availableWidth, itemWidth, gap, maxColumns) { if (!(availableWidth > 0)) return null; if (!(itemWidth > 0) || availableWidth <= MOBILE_BREAKPOINT || itemWidth > availableWidth) { return { columnCount: 1, rootWidth: '100%', itemWidth: '100%' }; } var columnCount = Math.max(1, Math.min(maxColumns, Math.floor((availableWidth + gap) / (itemWidth + gap)))); var fittedWidth = columnCount * itemWidth + Math.max(0, columnCount - 1) * gap; var fittedWidthPx = Math.min(fittedWidth, availableWidth) + 'px'; return { columnCount: columnCount, rootWidth: fittedWidthPx, itemWidth: itemWidth + 'px' }; } function applyPostFeedLayout(root) { var rootStyles = readRootStyles(); var computed = window.getComputedStyle(root); var availableWidth = getAvailableWidth(root); var itemWidth = parsePx( rootStyles.getPropertyValue('--starter-global-post-width') || rootStyles.getPropertyValue('--m3-global-post-width'), 0 ); var gap = parsePx( rootStyles.getPropertyValue('--starter-global-post-feed-gap') || rootStyles.getPropertyValue('--m3-global-post-feed-gap') || computed.columnGap || computed.gap, 34 ); var maxColumns = parseCount( rootStyles.getPropertyValue('--starter-global-post-feed-columns') || rootStyles.getPropertyValue('--m3-global-post-feed-columns'), 1 ); var layout = resolveFixedColumns(availableWidth, itemWidth, gap, maxColumns); if (!layout) return; if (maxColumns >= 2 && availableWidth > MOBILE_BREAKPOINT) { var __tcF = Math.floor((availableWidth - (maxColumns - 1) * gap) / maxColumns); layout.columnCount = maxColumns; layout.rootWidth = '100%'; layout.itemWidth = __tcF + 'px'; layout.columnWidth = __tcF + 'px'; } /* tc-fill-feed-v2 */ setStyle(root, 'width', layout.rootWidth); setStyle(root, 'max-width', layout.rootWidth); setStyle(root, '--starter-post-feed-item-width', layout.itemWidth); setStyle(root, '--m3-post-feed-item-width', layout.itemWidth); root.dataset.postFeedColumns = String(layout.columnCount); } function mediaItems(grid) { return Array.from(grid.children).filter(function (child) { if (!(child instanceof HTMLElement)) return false; if (child.matches('.post-media-link, .post-media-item')) { return Boolean(child.querySelector('img.post-media-img, img')); } return child.matches('.post-media-img, img'); }); } function resetGrid(grid) { [ 'display', 'gap', 'grid-template-columns', 'grid-template-rows', 'grid-auto-flow', 'grid-auto-rows', 'aspect-ratio' ].forEach(function (property) { grid.style.removeProperty(property); }); grid.classList.remove('post-media-grid--collage', 'is-single'); grid.removeAttribute('data-media-count'); grid.removeAttribute('data-collage-layout'); } function resetMediaItem(el) { [ 'grid-column', 'grid-row', 'grid-row-end', 'display', 'width', 'height', 'overflow' ].forEach(function (property) { el.style.removeProperty(property); }); var media = mediaElement(el); if (!media) return; ['display', 'width', 'height', 'object-fit', 'object-position'].forEach(function (property) { media.style.removeProperty(property); }); } function mediaElement(el) { if (el.tagName === 'IMG' || el.tagName === 'VIDEO') return el; return el.querySelector('img, video'); } function bindMediaReady(media) { if (!(media instanceof HTMLImageElement) || media.complete || media.dataset.tcCollageBound === '1') return; media.dataset.tcCollageBound = '1'; var rerun = function () { media.removeEventListener('load', rerun); media.removeEventListener('error', rerun); delete media.dataset.tcCollageBound; schedule(); }; media.addEventListener('load', rerun, { once: true }); media.addEventListener('error', rerun, { once: true }); } function readMediaRatio(el) { var media = mediaElement(el); if (!media) return 1; if (media instanceof HTMLImageElement) { bindMediaReady(media); if (media.naturalWidth > 0 && media.naturalHeight > 0) { return clamp(media.naturalWidth / media.naturalHeight, 0.35, 3.5); } } if (media instanceof HTMLVideoElement && media.videoWidth > 0 && media.videoHeight > 0) { return clamp(media.videoWidth / media.videoHeight, 0.35, 3.5); } var rect = media.getBoundingClientRect(); if (rect.width > 0 && rect.height > 0) { return clamp(rect.width / rect.height, 0.35, 3.5); } return 1; } function trackSpanFraction(tracks, start, span) { return tracks.slice(start - 1, start - 1 + span).reduce(function (acc, value) { return acc + value; }, 0); } function evaluateLayout(layout, ratios) { var totalCols = sum(layout.cols); var totalRows = sum(layout.rows); var preferredAspects = []; var multipliers = layout.slots.map(function (slot, index) { var colSpan = slot.cs || 1; var rowSpan = slot.rs || 1; var colFraction = trackSpanFraction(layout.cols, slot.c, colSpan) / totalCols; var rowFraction = trackSpanFraction(layout.rows, slot.r, rowSpan) / totalRows; var multiplier = colFraction / rowFraction; preferredAspects.push(clamp(ratios[index] / multiplier, 0.3, 6)); return multiplier; }); var aspect = clamp( geometricMean(preferredAspects), layout.minAspect || 0.4, layout.maxAspect || 4 ); var score = ratios.reduce(function (acc, ratio, index) { var target = clamp(aspect * multipliers[index], 0.2, 6); return acc + Math.abs(Math.log(target / ratio)); }, layout.penalty || 0); return { layout: layout, aspect: aspect, score: score }; } function chooseCollageLayout(items) { var layouts = COLLAGE_LAYOUTS[items.length]; if (!layouts || !layouts.length) return null; var ratios = items.map(readMediaRatio); return layouts.reduce(function (best, layout) { var current = evaluateLayout(layout, ratios); if (!best || current.score < best.score) return current; return best; }, null); } function applyPlacement(el, slot) { var colSpan = slot.cs || 1; var rowSpan = slot.rs || 1; setStyle(el, 'grid-column', slot.c + ' / span ' + colSpan); setStyle(el, 'grid-row', slot.r + ' / span ' + rowSpan); } function applyPhotoset(grid) { var items = mediaItems(grid); var count = items.length; var chosen; resetGrid(grid); items.forEach(resetMediaItem); if (grid.querySelector('video')) return; if (count <= 1) { if (count === 1) grid.classList.add('is-single'); return; } if (count > 8) return; chosen = chooseCollageLayout(items); if (!chosen) return; grid.classList.add('post-media-grid--collage'); grid.dataset.mediaCount = String(count); grid.dataset.collageLayout = chosen.layout.name; setStyle(grid, 'display', 'grid'); setStyle(grid, 'grid-template-columns', chosen.layout.cols.map(function (value) { return value + 'fr'; }).join(' ')); setStyle(grid, 'grid-template-rows', chosen.layout.rows.map(function (value) { return value + 'fr'; }).join(' ')); setStyle(grid, 'grid-auto-flow', 'dense'); setStyle(grid, 'aspect-ratio', chosen.aspect.toFixed(4)); setStyle(grid, 'gap', window.innerWidth <= MOBILE_BREAKPOINT ? '1px' : '2px'); items.forEach(function (item, index) { applyPlacement(item, chosen.layout.slots[index]); }); } function applyAll() { document.querySelectorAll(POST_FEED_SELECTOR).forEach(function (root) { applyPostFeedLayout(root); }); document.querySelectorAll(MEDIA_GRID_SELECTOR).forEach(function (grid) { applyPhotoset(grid); }); } function schedule() { if (schedule.frame) window.cancelAnimationFrame(schedule.frame); schedule.frame = window.requestAnimationFrame(function () { schedule.frame = 0; applyAll(); }); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', applyAll); } else { applyAll(); } window.addEventListener('resize', schedule, { passive: true }); if (typeof MutationObserver !== 'undefined') { new MutationObserver(schedule).observe(document.documentElement, { childList: true, subtree: true }); } })(); /* tc-nav-outside-close-v1 */ ;(function(){if(window.__tcNavOutsideClose)return;window.__tcNavOutsideClose=1;document.addEventListener('click',function(e){if(e.target.closest('.site-nav-group'))return;var open=document.querySelectorAll('.site-nav-group.is-open');for(var i=0;i -vh * 0.5; } function watch(container, sel, lc, rc){ if (!container || container.dataset.tcRevealBound === '1') return; container.dataset.tcRevealBound = '1'; var all = [].slice.call(container.querySelectorAll(sel)).filter(function(el){ return el.tagName === 'IMG' || el.tagName === 'VIDEO'; }); // Only gate on media initially near the viewport; below-fold lazy media never loads until // scrolled and would otherwise pin the reveal to the timeout. var gated = all.filter(nearViewport); if (!gated.length){ markReady(container, lc, rc); return; } var pending = 0, done = false, timer = 0; function finish(){ if (done) return; done = true; if (timer) clearTimeout(timer); markReady(container, lc, rc); } function dec(){ pending--; if (pending <= 0) finish(); } gated.forEach(function(el){ if (el.tagName === 'IMG'){ if (el.complete) return; pending++; var h = function(){ el.removeEventListener('load', h); el.removeEventListener('error', h); dec(); }; el.addEventListener('load', h, { once: true }); el.addEventListener('error', h, { once: true }); } else { if (el.readyState >= 2) return; pending++; var hv = function(){ el.removeEventListener('loadeddata', hv); el.removeEventListener('error', hv); dec(); }; el.addEventListener('loadeddata', hv, { once: true }); el.addEventListener('error', hv, { once: true }); } }); if (pending === 0){ finish(); return; } setState(container, true, lc, rc); timer = setTimeout(finish, READY_TIMEOUT); } function scan(){ [].slice.call(document.querySelectorAll('.gallery-grid')).forEach(function(g){ watch(g, 'img, video', 'is-gallery-loading', 'is-gallery-ready'); }); [].slice.call(document.querySelectorAll('#post-feed-list .post-card, .post-feed-list .post-card')).forEach(function(c){ watch(c, 'img, video', 'is-media-loading', 'is-media-ready'); }); } function forceReveal(){ [].slice.call(document.querySelectorAll('.gallery-grid')).forEach(function(g){ markReady(g, 'is-gallery-loading', 'is-gallery-ready'); }); [].slice.call(document.querySelectorAll('.post-card')).forEach(function(c){ markReady(c, 'is-media-loading', 'is-media-ready'); }); } if (document.readyState === 'loading'){ document.addEventListener('DOMContentLoaded', scan); } else { scan(); } // Re-scan appended content (load-more / infinite scroll), debounced. if (typeof MutationObserver !== 'undefined'){ var pend = 0; var mo = new MutationObserver(function(){ if (pend) return; pend = window.requestAnimationFrame(function(){ pend = 0; scan(); }); }); mo.observe(document.documentElement, { childList: true, subtree: true }); } // Safety: never leave content hidden if something went wrong. window.addEventListener('load', function(){ scan(); setTimeout(forceReveal, 300); }); })(); /* TC_MARGIN_MEDIA_REVEAL_END */ /* TC_MARGIN_MASONRY */ ;(function(){ if (window.__tcMarginMasonry) return; window.__tcMarginMasonry = 1; var SEL = '#post-feed-list:not(.product-grid), .post-feed-list:not(.product-grid)'; function colCount(){ var n = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--starter-global-post-feed-columns'), 10); if (!(n > 0)) n = 1; if (window.innerWidth <= 760) n = 1; return Math.max(1, n); } function cardsOf(feed){ return [].slice.call(feed.children).filter(function(c){ return c.nodeType === 1 && c.classList && c.classList.contains('post-card'); }); } function reset(feed, cards){ feed.style.position = ''; feed.style.height = ''; cards.forEach(function(c){ c.style.position=''; c.style.left=''; c.style.top=''; c.style.width=''; }); } function layout(feed){ var cards = cardsOf(feed); if (!cards.length) return; var cols = colCount(); if (cols <= 1){ reset(feed, cards); feed.removeAttribute('data-tc-masonry'); return; } var gap = parseFloat(getComputedStyle(feed).columnGap || getComputedStyle(feed).rowGap || getComputedStyle(feed).gap) || 24; var feedW = feed.clientWidth; if (!(feedW > 0)) return; var colW = (feedW - gap * (cols - 1)) / cols; feed.style.position = 'relative'; feed.setAttribute('data-tc-masonry', '1'); var colH = new Array(cols).fill(0); cards.forEach(function(c){ c.style.position = 'absolute'; c.style.width = colW + 'px'; var min = 0; for (var i = 1; i < cols; i++){ if (colH[i] < colH[min]) min = i; } c.style.left = (min * (colW + gap)) + 'px'; c.style.top = colH[min] + 'px'; colH[min] += c.offsetHeight + gap; }); feed.style.height = (Math.max.apply(null, colH) - gap) + 'px'; } function run(){ var feeds = document.querySelectorAll(SEL); for (var i = 0; i < feeds.length; i++) layout(feeds[i]); } var raf = 0; function schedule(){ if (raf) cancelAnimationFrame(raf); raf = requestAnimationFrame(function(){ raf = 0; run(); }); } if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', schedule); else schedule(); window.addEventListener('load', schedule); window.addEventListener('resize', schedule, { passive: true }); // images change card heights as they decode → re-pack document.addEventListener('load', function(e){ var t = e.target; if (t && t.tagName === 'IMG' && t.closest && t.closest(SEL)) schedule(); }, true); // load-more / infinite scroll append cards (childList only → not triggered by our own style writes) if (typeof MutationObserver !== 'undefined'){ new MutationObserver(function(muts){ for (var i = 0; i < muts.length; i++){ if (muts[i].addedNodes && muts[i].addedNodes.length){ schedule(); return; } } }).observe(document.documentElement, { childList: true, subtree: true }); } })(); /* TC_MARGIN_MASONRY_END */

Illustration

Comments