use custom <images> tag to display a list of stock images

Hunter
Friday, December 19th, 2025 at 10:56 PM


index.html+14-2
index.html
265  					return match;
266  				});
267  		}
268 +
269 +		// Expand <images> tags into gallery table
270 +		function expandImagesTag(html) {
271 +			return html.replace(/<images\s*\/?>/gi, () => {
272 +				const images = Array.from(stockImages).sort();
273 +				if (images.length === 0) return '<p>No images available</p>';
274 +				const rows = images.map(filename =>
275 +					`<tr><td>${filename}</td><td style="text-align:center;"><img src="images/${filename}"></td></tr>`
276 +				).join('');
277 +				return `<table border="1" cellpadding="8" cellspacing="0" style="width:100%;"><colgroup><col style="width:50%"><col style="width:50%"></colgroup>${rows}</table>`;
278 +			});
279 +		}
280  		const editorPane = document.querySelector('.editor-pane');
281  		const previewPane = document.querySelector('.preview-pane');
282  		const storageKey = 'html-lab-content';

393  			}
394  			
395  			// Use srcdoc to create a completely fresh document context
    -			// Rewrite bare stock image filenames to include images/ prefix
    -			const processedCode = rewriteBareImageSrcs(code.trim()) || '<!DOCTYPE html><html><head></head><body></body></html>';
396 +			// Expand <images> tag and rewrite bare stock image filenames
397 +			const processedCode = expandImagesTag(rewriteBareImageSrcs(code.trim())) || '<!DOCTYPE html><html><head></head><body></body></html>';
398  			preview.srcdoc = processedCode;
399  			
400  			// Add our functionality after the iframe loads