th23

<p>WordPress has come a long way to be a fully featured content editor system, but the <strong>default gallery does not keep up</strong> with it. And while there are many plugins with various features, I did not find a small and simple one putting the <strong>focus on enlarged images</strong>.</p>
<p><a href="https://photoswipe.com/" rel="nofollow ugc"><strong>PhotoSwipe</strong></a> is a great basis and thus core component of my <strong>th23 Gallery</strong> plugin, which replaces the WordPress default to output galleries into a way containing all key information required while maintaining a <strong>simple and easy markup</strong>.</p>
<p><strong>th23 Gallery</strong> is built with some few goals in mind:</p>
<ul>
<li>Unintrusive way to <strong>focus on images</strong></li>
<li>Leveraging <strong>PhotoSwipe / Lightbox-like</strong> overlay</li>
<li>Navigation between images in all galleries in a post via <strong>intuitive swipe, keyboard or mouse</strong> activity</li>
<li>Compatibile with modern <strong>blocks and legacy shortcodes</strong></li>
<li><strong>Simple markup</strong> and styling for thumbnail preview images (polaroid-style)</li>
<li><strong>Plain styling</strong> for medium / large preview images allowing for theme based style</li>
<li><strong>Minimized footprint</strong> on page loading</li>
</ul>
<h3>Usage</h3>
<p><strong>th23 Gallery</strong> works out-of-the-box and does not require any special handling – right after activation all embedded galleries will use PhotoSwipe to enlarge pictures.</p>
<p><em>Note</em>: Polaroid-style works only on galleries which have set the preview image size to <code>Thumbnail</code></p>
<p><em>Note</em>: Previously inserted galleries might require a review to ensure link to media file and preview image size are set to work as expected – especially when also using the plugin on legacy <code>[gallery]</code> shortcodes.</p>


th23 Gallery

Replace standard Wordpress Gallery block and legacy [gallery] shortcode handler, opening galleries using PhotoSwipe

Katsushi Kawamori

<h4>Only HTML & CSS</h4>
<ul>
<li>Create an HTML and CSS only block. The display does not collapse even if the plugin is deactivate.</li>
</ul>
<h4>Masonry settings</h4>
<ul>
<li>Width</li>
<li>Space</li>
<li>Rounded Images</li>
</ul>
<h4>Slider settings</h4>
<ul>
<li>Interval</li>
</ul>
<h4>How it works</h4>
<span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/aQsExk6eDhs?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span>


Simple Block Gallery

Add the effect of Masonry and Slider to images.

th23 Gallery vs Simple Block Gallery