https://icto.top/tags/image/Recent content in Image on 猪逻辑公园工作室Hugo -- gohugo.iozhSat, 26 Aug 2023 00:00:00 +0000https://icto.top/p/image-gallery/Sat, 26 Aug 2023 00:00:00 +0000https://icto.top/p/image-gallery/<img src="https://icto.top/p/image-gallery/2.jpg" alt="Featured image of post Image gallery" /><p>Hugo theme Stack supports the creation of interactive image galleries using Markdown. It&rsquo;s powered by <a class="link" href="https://photoswipe.com/" target="_blank" rel="noopener" >PhotoSwipe</a> and its syntax was inspired by <a class="link" href="https://typlog.com/" target="_blank" rel="noopener" >Typlog</a>.</p> <p>To use this feature, the image must be in the same directory as the Markdown file, as it uses Hugo&rsquo;s page bundle feature to read the dimensions of the image. <strong>External images are not supported.</strong></p> <h2 id="syntax">Syntax </h2><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt">1 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">![<span class="nt">Image 1</span>](<span class="na">1.jpg</span>) ![<span class="nt">Image 2</span>](<span class="na">2.jpg</span>) </span></span></code></pre></td></tr></table> </div> </div><h2 id="result">Result </h2><p><img alt="Image 1" class="gallery-image" data-flex-basis="342px" data-flex-grow="142" height="1400" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://icto.top/p/image-gallery/1.jpg" srcset="https://icto.top/p/image-gallery/1_hu_4c8600a66f278e44.jpg 800w, https://icto.top/p/image-gallery/1_hu_ba10ab92dc5a4e16.jpg 1600w, https://icto.top/p/image-gallery/1.jpg 2000w" width="2000"> <img alt="Image 2" class="gallery-image" data-flex-basis="160px" data-flex-grow="66" height="2250" loading="lazy" sizes="(max-width: 767px) calc(100vw - 30px), (max-width: 1023px) 700px, (max-width: 1279px) 950px, 1232px" src="https://icto.top/p/image-gallery/2.jpg" srcset="https://icto.top/p/image-gallery/2_hu_e511c73cee932c22.jpg 800w, https://icto.top/p/image-gallery/2.jpg 1500w" width="1500"></p> <blockquote> <p>Photo by <a class="link" href="https://unsplash.com/@mymind" target="_blank" rel="noopener" >mymind</a> and <a class="link" href="https://unsplash.com/@lukechesser" target="_blank" rel="noopener" >Luke Chesser</a> on <a class="link" href="https://unsplash.com/" target="_blank" rel="noopener" >Unsplash</a></p> </blockquote>