https://tedtwong.github.io/tags/photoswipe/ Recent content in photoswipe on Teddy's online desktop Hugo -- gohugo.io Mon, 20 Mar 2017 00:00:00 +0000 https://tedtwong.github.io/post/2017-03-20-photoswipe-gallery-sample/ Mon, 20 Mar 2017 00:00:00 +0000 https://tedtwong.github.io/post/2017-03-20-photoswipe-gallery-sample/ <p>Beautiful Hugo adds a few custom shortcodes created by <a href="https://www.liwen.id.au/heg/">Li-Wen Yip</a> and <a href="https://github.com/GjjvdBurg/HugoPhotoSwipe">Gert-Jan van den Berg</a> for making galleries with <a href="http://photoswipe.com">PhotoSwipe</a> .</p> <div class="gallery caption-position-bottom caption-effect-fade hover-effect-zoom hover-transition" itemscope itemtype="http://schema.org/ImageGallery"> <link rel="stylesheet" href="https://tedtwong.github.io/css/hugo-easy-gallery.css" /> <div class="box" > <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <div class="img" style="background-image: url('https://tedtwong.github.io/img/hexagon-thumb.jpg');"> <img itemprop="thumbnail" src="https://tedtwong.github.io/img/hexagon-thumb.jpg" alt="/img/hexagon-thumb.jpg"/> </div> <a href="https://tedtwong.github.io/img/hexagon.jpg" itemprop="contentUrl"></a> </figure> </div> <div class="box" > <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <div class="img" style="background-image: url('https://tedtwong.github.io/img/sphere-thumb.jpg');"> <img itemprop="thumbnail" src="https://tedtwong.github.io/img/sphere-thumb.jpg" alt="Sphere"/> </div> <a href="https://tedtwong.github.io/img/sphere.jpg" itemprop="contentUrl"></a> <figcaption> <p>Sphere</p> </figcaption> </figure> </div> <div class="box" > <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <div class="img" style="background-image: url('https://tedtwong.github.io/img/triangle-thumb.jpg');"> <img itemprop="thumbnail" src="https://tedtwong.github.io/img/triangle-thumb.jpg" alt="This is a long comment about a triangle"/> </div> <a href="https://tedtwong.github.io/img/triangle.jpg" itemprop="contentUrl"></a> <figcaption> <p>Triangle</p> </figcaption> </figure> </div> </div>