|
42 | 42 |
|
43 | 43 | function buildSingleImage(imgData) { |
44 | 44 | const container = el('div', { className: 'image-container' }); |
| 45 | + if (imgData.maxWidth) { |
| 46 | + container.classList.add('media-bounded'); |
| 47 | + container.style.maxWidth = imgData.maxWidth; |
| 48 | + } |
| 49 | + if (imgData.noZoom) container.classList.add('image-static'); |
45 | 50 | const attrs = { |
46 | 51 | src: IMG + encodeURI(imgData.file), |
47 | 52 | alt: imgData.alt || '' |
48 | 53 | }; |
49 | 54 | if (!imgData.noZoom) attrs.className = 'zoomable'; |
50 | | - if (imgData.maxWidth) attrs.style = { maxWidth: imgData.maxWidth }; |
51 | 55 | container.append(el('img', attrs)); |
52 | 56 | if (imgData.caption) { |
53 | 57 | container.append(el('span', { className: 'image-caption' }, imgData.caption)); |
54 | 58 | } |
55 | 59 | return container; |
56 | 60 | } |
57 | 61 |
|
| 62 | + function buildVideoEmbed(embedHtml, maxWidth) { |
| 63 | + const container = el('div', { className: 'video-embed' }); |
| 64 | + if (maxWidth) container.style.maxWidth = maxWidth; |
| 65 | + container.innerHTML = embedHtml; |
| 66 | + return container; |
| 67 | + } |
| 68 | + |
58 | 69 | // ---------- Add nav link ---------- |
59 | 70 | function addNavLink(href, label, isFirst) { |
60 | 71 | const li = el('li'); |
|
77 | 88 | ); |
78 | 89 |
|
79 | 90 | const imgDiv = el('div', { className: 'hero-image' }); |
80 | | - imgDiv.append(el('img', { src: IMG + hero.image, alt: 'OpenChess demo' })); |
| 91 | + if (hero.image && hero.videoEmbed) { |
| 92 | + imgDiv.classList.add('hero-media-pair'); |
| 93 | + imgDiv.append( |
| 94 | + el('img', { src: IMG + hero.image, alt: 'OpenChess demo' }), |
| 95 | + buildVideoEmbed(hero.videoEmbed) |
| 96 | + ); |
| 97 | + } else if (hero.videoEmbed) { |
| 98 | + imgDiv.append(buildVideoEmbed(hero.videoEmbed)); |
| 99 | + } else { |
| 100 | + imgDiv.append(el('img', { src: IMG + hero.image, alt: 'OpenChess demo' })); |
| 101 | + } |
81 | 102 |
|
82 | 103 | section.append(textDiv, imgDiv); |
83 | 104 | contentEl.append(section); |
|
123 | 144 | if (step.items && step.items.length) |
124 | 145 | step.items.forEach(item => card.insertAdjacentHTML('beforeend', item)); |
125 | 146 |
|
| 147 | + if (step.videoEmbed) { |
| 148 | + card.append(buildVideoEmbed(step.videoEmbed, step.videoMaxWidth)); |
| 149 | + } |
| 150 | + |
126 | 151 | if (step.images && step.images.length) { |
127 | 152 | // Demo gallery: split into rows of 2 |
128 | 153 | if (sec.id === 'demo' && step.images.length > 2 && !step.centerContent) { |
|
0 commit comments