https://blog.bitlager.de/series/hugo/ Recent content in Hugo on Bitlager Blog Hugo -- 0.145.0 en Thu, 01 Jan 1970 00:30:00 +0100 https://blog.bitlager.de/posts/tech/hugo-gallery-shortcode-example/ Thu, 01 Jan 1970 00:30:00 +0100 https://blog.bitlager.de/posts/tech/hugo-gallery-shortcode-example/ <h2 id="gallery-with-3-images">Gallery with 3 images</h2> <h3 id="first-gallery">First gallery</h3> <style> .image-gallery { overflow: auto; margin-left: -1% !important; } .image-gallery li { float: left; display: block; margin: 0 0 1% 1%; } .image-gallery[data-count="2"] li { width: 49%; } .image-gallery[data-count="3"] li { width: 32%; } .image-gallery[data-count="4"] li { width: 24%; } .image-gallery[data-count="5"] li { width: 19%; } .post-content .image-gallery a { box-shadow: none; box-decoration-break: none; -webkit-box-decoration-break: none; } .image-gallery li a { text-align: center; text-decoration: none; color: #777; display: block; } .image-gallery li a span { display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding: 3px 0; } .image-gallery li a img { width: 100%; aspect-ratio: 1 / 1; display: block; border-radius: 8px; object-fit: cover; background: #f5f5f5; transition: transform 0.3s ease; } .image-gallery li a:hover img { transform: scale(1.01); } .simple-lightbox { display: none; position: fixed; z-index: 999; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); } .simple-lightbox.active { display: flex; justify-content: center; align-items: center; } .lightbox-content { position: relative; max-width: 90%; max-height: 90vh; } .lightbox-content img { max-width: 100%; max-height: 90vh; object-fit: contain; } .lightbox-caption { position: absolute; bottom: -60px; left: 0; right: 0; color: white; text-align: center; padding: 10px; } .lightbox-close { position: absolute; top: 20px; right: 20px; color: white; font-size: 30px; cursor: pointer; width: 30px; height: 30px; line-height: 30px; text-align: center; } .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); color: white; font-size: 30px; cursor: pointer; padding: 20px; user-select: none; } .lightbox-prev { left: 20px; } .lightbox-next { right: 20px; } </style> <div class="simple-lightbox" id="simple-lightbox-gallery-49a5b11077ae441f9a5c85c7d0f031859528bcff"> <div class="lightbox-content"> <img src="" alt=""> <div class="lightbox-caption"></div> </div> <div class="lightbox-close">&times;</div> <div class="lightbox-nav lightbox-prev">&lt;</div> <div class="lightbox-nav lightbox-next">&gt;</div> </div> <ul class="image-gallery" id="image-gallery-gallery-49a5b11077ae441f9a5c85c7d0f031859528bcff"> <li> <a href="https://blog.bitlager.de/images/example/1%20Custom%20Caption.jpeg" title="1 Custom Caption" class="gallery-image" data-caption="1 Custom Caption"> <img src="https://blog.bitlager.de/images/example/1%20Custom%20Caption.jpeg" alt="1 Custom Caption" title="1 Custom Caption"> <span>1 Custom Caption</span> </a> </li> <li> <a href="https://blog.bitlager.de/images/example/2-This-is-a-caption.jpeg" title="2-This-is-a-caption" class="gallery-image" data-caption="2-This-is-a-caption"> <img src="https://blog.bitlager.de/images/example/2-This-is-a-caption.jpeg" alt="2-This-is-a-caption" title="2-This-is-a-caption"> <span>2-This-is-a-caption</span> </a> </li> <li> <a href="https://blog.bitlager.de/images/example/3%20Naming%20defines%20order.jpeg" title="3 Naming defines order" class="gallery-image" data-caption="3 Naming defines order"> <img src="https://blog.bitlager.de/images/example/3%20Naming%20defines%20order.jpeg" alt="3 Naming defines order" title="3 Naming defines order"> <span>3 Naming defines order</span> </a> </li> </ul> <script> document.addEventListener('DOMContentLoaded', function () { const lightbox = document.querySelector('#simple-lightbox-gallery-49a5b11077ae441f9a5c85c7d0f031859528bcff'); const lightboxImg = lightbox.querySelector('img'); const lightboxCaption = lightbox.querySelector('.lightbox-caption'); const gallery = document.querySelector('#image-gallery-gallery-49a5b11077ae441f9a5c85c7d0f031859528bcff'); let currentIndex = 0; let images = []; const imageCount = gallery.querySelectorAll('.gallery-image').length; gallery.setAttribute('data-count', imageCount.toString()); gallery.querySelectorAll('.gallery-image').forEach((link, index) => { images.push({ src: link.href, title: link.getAttribute('data-caption') }); link.addEventListener('click', (e) => { e.preventDefault(); currentIndex = index; showImage(currentIndex); }); }); function showImage(index) { lightboxImg.src = images[index].src; lightboxCaption.textContent = images[index].title; lightbox.classList.add('active'); } lightbox.querySelector('.lightbox-close').addEventListener('click', () => { lightbox.classList.remove('active'); }); lightbox.querySelector('.lightbox-prev').addEventListener('click', () => { currentIndex = (currentIndex - 1 + images.length) % images.length; showImage(currentIndex); }); lightbox.querySelector('.lightbox-next').addEventListener('click', () => { currentIndex = (currentIndex + 1) % images.length; showImage(currentIndex); }); document.addEventListener('keydown', (e) => { if (!lightbox.classList.contains('active')) return; if (e.key === 'Escape') { lightbox.classList.remove('active'); } else if (e.key === 'ArrowLeft') { currentIndex = (currentIndex - 1 + images.length) % images.length; showImage(currentIndex); } else if (e.key === 'ArrowRight') { currentIndex = (currentIndex + 1) % images.length; showImage(currentIndex); } }); lightbox.addEventListener('click', (e) => { if (e.target === lightbox) { lightbox.classList.remove('active'); } }); }); </script> <h3 id="second-gallery">Second gallery</h3> <style> .image-gallery { overflow: auto; margin-left: -1% !important; } .image-gallery li { float: left; display: block; margin: 0 0 1% 1%; } .image-gallery[data-count="2"] li { width: 49%; } .image-gallery[data-count="3"] li { width: 32%; } .image-gallery[data-count="4"] li { width: 24%; } .image-gallery[data-count="5"] li { width: 19%; } .post-content .image-gallery a { box-shadow: none; box-decoration-break: none; -webkit-box-decoration-break: none; } .image-gallery li a { text-align: center; text-decoration: none; color: #777; display: block; } .image-gallery li a span { display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding: 3px 0; } .image-gallery li a img { width: 100%; aspect-ratio: 1 / 1; display: block; border-radius: 8px; object-fit: cover; background: #f5f5f5; transition: transform 0.3s ease; } .image-gallery li a:hover img { transform: scale(1.01); } .simple-lightbox { display: none; position: fixed; z-index: 999; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); } .simple-lightbox.active { display: flex; justify-content: center; align-items: center; } .lightbox-content { position: relative; max-width: 90%; max-height: 90vh; } .lightbox-content img { max-width: 100%; max-height: 90vh; object-fit: contain; } .lightbox-caption { position: absolute; bottom: -60px; left: 0; right: 0; color: white; text-align: center; padding: 10px; } .lightbox-close { position: absolute; top: 20px; right: 20px; color: white; font-size: 30px; cursor: pointer; width: 30px; height: 30px; line-height: 30px; text-align: center; } .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); color: white; font-size: 30px; cursor: pointer; padding: 20px; user-select: none; } .lightbox-prev { left: 20px; } .lightbox-next { right: 20px; } </style> <div class="simple-lightbox" id="simple-lightbox-gallery-6d118b487789e2bffdd0b20fcbeb866da062010a"> <div class="lightbox-content"> <img src="" alt=""> <div class="lightbox-caption"></div> </div> <div class="lightbox-close">&times;</div> <div class="lightbox-nav lightbox-prev">&lt;</div> <div class="lightbox-nav lightbox-next">&gt;</div> </div> <ul class="image-gallery" id="image-gallery-gallery-6d118b487789e2bffdd0b20fcbeb866da062010a"> <li> <a href="https://blog.bitlager.de/images/example2/1%20Custom%20Caption.jpeg" title="1 Custom Caption" class="gallery-image" data-caption="1 Custom Caption"> <img src="https://blog.bitlager.de/images/example2/1%20Custom%20Caption.jpeg" alt="1 Custom Caption" title="1 Custom Caption"> <span>1 Custom Caption</span> </a> </li> <li> <a href="https://blog.bitlager.de/images/example2/2-This-is-a-caption.jpeg" title="2-This-is-a-caption" class="gallery-image" data-caption="2-This-is-a-caption"> <img src="https://blog.bitlager.de/images/example2/2-This-is-a-caption.jpeg" alt="2-This-is-a-caption" title="2-This-is-a-caption"> <span>2-This-is-a-caption</span> </a> </li> <li> <a href="https://blog.bitlager.de/images/example2/3%20Naming%20defines%20order.jpeg" title="3 Naming defines order" class="gallery-image" data-caption="3 Naming defines order"> <img src="https://blog.bitlager.de/images/example2/3%20Naming%20defines%20order.jpeg" alt="3 Naming defines order" title="3 Naming defines order"> <span>3 Naming defines order</span> </a> </li> </ul> <script> document.addEventListener('DOMContentLoaded', function () { const lightbox = document.querySelector('#simple-lightbox-gallery-6d118b487789e2bffdd0b20fcbeb866da062010a'); const lightboxImg = lightbox.querySelector('img'); const lightboxCaption = lightbox.querySelector('.lightbox-caption'); const gallery = document.querySelector('#image-gallery-gallery-6d118b487789e2bffdd0b20fcbeb866da062010a'); let currentIndex = 0; let images = []; const imageCount = gallery.querySelectorAll('.gallery-image').length; gallery.setAttribute('data-count', imageCount.toString()); gallery.querySelectorAll('.gallery-image').forEach((link, index) => { images.push({ src: link.href, title: link.getAttribute('data-caption') }); link.addEventListener('click', (e) => { e.preventDefault(); currentIndex = index; showImage(currentIndex); }); }); function showImage(index) { lightboxImg.src = images[index].src; lightboxCaption.textContent = images[index].title; lightbox.classList.add('active'); } lightbox.querySelector('.lightbox-close').addEventListener('click', () => { lightbox.classList.remove('active'); }); lightbox.querySelector('.lightbox-prev').addEventListener('click', () => { currentIndex = (currentIndex - 1 + images.length) % images.length; showImage(currentIndex); }); lightbox.querySelector('.lightbox-next').addEventListener('click', () => { currentIndex = (currentIndex + 1) % images.length; showImage(currentIndex); }); document.addEventListener('keydown', (e) => { if (!lightbox.classList.contains('active')) return; if (e.key === 'Escape') { lightbox.classList.remove('active'); } else if (e.key === 'ArrowLeft') { currentIndex = (currentIndex - 1 + images.length) % images.length; showImage(currentIndex); } else if (e.key === 'ArrowRight') { currentIndex = (currentIndex + 1) % images.length; showImage(currentIndex); } }); lightbox.addEventListener('click', (e) => { if (e.target === lightbox) { lightbox.classList.remove('active'); } }); }); </script> <h3 id="stacked-gallery">Stacked gallery</h3> <style> .stacked-image-gallery { position: relative; max-width: 400px; min-height: 400px; margin: 0 auto; padding: 20px 0 420px 0; }.stacked-image-gallery li { list-style: none; position: absolute; width: 80%; max-width: 300px; transition: transform 0.3s ease, z-index 0.3s ease; } .stacked-image-gallery li:nth-child(1) { transform: rotate(2deg) translate(0, 0); z-index: 1; } .stacked-image-gallery li:nth-child(2) { transform: rotate(-3deg) translate(10px, 5px); z-index: 2; } .stacked-image-gallery li:nth-child(3) { transform: rotate(4deg) translate(-10px, 10px); z-index: 3; } .stacked-image-gallery li:nth-child(4) { transform: rotate(-2deg) translate(15px, -5px); z-index: 4; } .stacked-image-gallery li:nth-child(5) { transform: rotate(5deg) translate(-5px, 15px); z-index: 5; } .stacked-image-gallery li:hover { transform: scale(1.1) translateY(-20px); z-index: 10; } .stacked-image-gallery li a { display: block; text-decoration: none; color: #777; background: #fff; padding: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); border-radius: 4px; } .stacked-image-gallery li a img { width: 100%; aspect-ratio: 1 / 1; display: block; border-radius: 4px; object-fit: cover; background: #f5f5f5; } .stacked-image-gallery li a span { display: block; text-align: center; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding: 5px 0; font-size: 14px; } .simple-lightbox { display: none; position: fixed; z-index: 999; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); } .simple-lightbox.active { display: flex; justify-content: center; align-items: center; } .lightbox-content { position: relative; max-width: 90%; max-height: 90vh; } .lightbox-content img { max-width: 100%; max-height: 90vh; object-fit: contain; } .lightbox-caption { position: absolute; bottom: -60px; left: 0; right: 0; color: white; text-align: center; padding: 10px; } .lightbox-close { position: absolute; top: 20px; right: 20px; color: white; font-size: 30px; cursor: pointer; width: 30px; height: 30px; line-height: 30px; text-align: center; } .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); color: white; font-size: 30px; cursor: pointer; padding: 20px; user-select: none; } .lightbox-prev { left: 20px; } .lightbox-next { right: 20px; }</style> <div class="simple-lightbox" id="simple-lightbox-stacked-gallery-49a5b11077ae441f9a5c85c7d0f031859528bcff"> <div class="lightbox-content"> <img src="" alt=""> <div class="lightbox-caption"></div> </div> <div class="lightbox-close">&times;</div> <div class="lightbox-nav lightbox-prev">&lt;</div> <div class="lightbox-nav lightbox-next">></div> </div> <ul class="stacked-image-gallery" id="stacked-image-gallery-stacked-gallery-49a5b11077ae441f9a5c85c7d0f031859528bcff"> <li> <a href="https://blog.bitlager.de/images/example/1%20Custom%20Caption.jpeg" title="1 Custom Caption" class="gallery-image" data-caption="1 Custom Caption"> <img src="https://blog.bitlager.de/images/example/1%20Custom%20Caption.jpeg" alt="1 Custom Caption" title="1 Custom Caption"> <span>1 Custom Caption</span> </a> </li> <li> <a href="https://blog.bitlager.de/images/example/2-This-is-a-caption.jpeg" title="2-This-is-a-caption" class="gallery-image" data-caption="2-This-is-a-caption"> <img src="https://blog.bitlager.de/images/example/2-This-is-a-caption.jpeg" alt="2-This-is-a-caption" title="2-This-is-a-caption"> <span>2-This-is-a-caption</span> </a> </li> <li> <a href="https://blog.bitlager.de/images/example/3%20Naming%20defines%20order.jpeg" title="3 Naming defines order" class="gallery-image" data-caption="3 Naming defines order"> <img src="https://blog.bitlager.de/images/example/3%20Naming%20defines%20order.jpeg" alt="3 Naming defines order" title="3 Naming defines order"> <span>3 Naming defines order</span> </a> </li> </ul> <script> document.addEventListener('DOMContentLoaded', function () { const lightbox = document.querySelector('#simple-lightbox-stacked-gallery-49a5b11077ae441f9a5c85c7d0f031859528bcff'); const lightboxImg = lightbox.querySelector('img'); const lightboxCaption = lightbox.querySelector('.lightbox-caption'); const gallery = document.querySelector('#stacked-image-gallery-stacked-gallery-49a5b11077ae441f9a5c85c7d0f031859528bcff'); let currentIndex = 0; let images = []; gallery.querySelectorAll('.gallery-image').forEach((link, index) => { images.push({ src: link.href, title: link.getAttribute('data-caption') }); link.addEventListener('click', (e) => { e.preventDefault(); currentIndex = index; showImage(currentIndex); }); }); function showImage(index) { lightboxImg.src = images[index].src; lightboxCaption.textContent = images[index].title; lightbox.classList.add('active'); } lightbox.querySelector('.lightbox-close').addEventListener('click', () => { lightbox.classList.remove('active'); }); lightbox.querySelector('.lightbox-prev').addEventListener('click', () => { currentIndex = (currentIndex - 1 + images.length) % images.length; showImage(currentIndex); }); lightbox.querySelector('.lightbox-next').addEventListener('click', () => { currentIndex = (currentIndex + 1) % images.length; showImage(currentIndex); }); document.addEventListener('keydown', (e) => { if (!lightbox.classList.contains('active')) return; if (e.key === 'Escape') { lightbox.classList.remove('active'); } else if (e.key === 'ArrowLeft') { currentIndex = (currentIndex - 1 + images.length) % images.length; showImage(currentIndex); } else if (e.key === 'ArrowRight') { currentIndex = (currentIndex + 1) % images.length; showImage(currentIndex); } }); lightbox.addEventListener('click', (e) => { if (e.target === lightbox) { lightbox.classList.remove('active'); } }); }); </script> <p><strong>SOURCE</strong>: <a href="https://github.com/thisdev/hugo-gallery-shortcode" target="_blank" rel="noopener">Github</a></p>