I imagine this has to be implemented on the theme level to some degree but I’m not clear on how it would be done exactly as lightboxing images generally means pulling up two different resolution versions of the image, a thumbnail and then a full res image which can be viewed in a full screen mode.
Do you want lightboxing for native WP galleries?
Hey sorry, thinking over this I think maybe my post doesn’t make sense as a feature request. Maybe I’m really just more asking for some guidance on how to approach the issue.
From your question I realized that frontity should provide a direct link to the media file which can then probably be used to create a lightbox right? But is that media file a different size than the file which appears on the page?
Additionally, the lightbox I previously set up when I first learned wordpress used jQuery. I imagine that a component would be needed to be written for a theme entirely from scratch since jQuery really shouldn’t be used in React.
I guess that would be handled by something like react-spring though right?
But I’m also interested in multimedia galleries that are built using a custom Gutenberg Block. When I first learned Wordpress 2 years ago I used ACF to create a multimedia gallery that could take images, autoplaying muted videos, and Sketchfab embeds (which served a picture as a thumbnail which when clicked on created an iframe based sketchfab embed in the lightbox.
I’m working on rebuilding this gallery as a Gutenberg component rather than using ACF, so that it’s better integrated into WP 5’s way of doing things (and also because it should hopefully be easier to use and better UI). If I were to want to build a multimedia gallery like that, would that even be possible currently in frontity?
Sorry to ask so many questions!
I still would like to know where are you going to get the images from. Is it native WP galleries in content.rendered?
If your galleries include proper srcSet fields, I guess you’re good to go because the browser will choose the proper size:
<figure class="wp-block-gallery columns-3 is-cropped">
<ul class="blocks-gallery-grid">
<li class="blocks-gallery-item">
<figure><img
src="http://site.local/wp-content/uploads/2019/07/image1-1024x847.png" alt=""
data-id="11"
data-full-url="http://site.local/wp-content/uploads/2019/07/image1.png"
data-link="http://site.local/hello-world/image1-49-29/" class="wp-image-11"
srcset="http://site.local/wp-content/uploads/2019/07/image1-1024x847.png 1024w, http://site.local/wp-content/uploads/2019/07/image1-300x248.png 300w, http://site.local/wp-content/uploads/2019/07/image1-768x635.png 768w, http://site.local/wp-content/uploads/2019/07/image1-1536x1271.png 1536w, http://site.local/wp-content/uploads/2019/07/image1-2048x1694.png 2048w, http://site.local/wp-content/uploads/2019/07/image1-1568x1297.png 1568w"
sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
</li>
<li class="blocks-gallery-item">
<figure><img
src="http://site.local/wp-content/uploads/2019/07/image1-1024x874.png" alt=""
data-id="12"
data-full-url="http://site.local/wp-content/uploads/2019/07/image1.png"
data-link="http://site.local/hello-world/image1-49-32/" class="wp-image-12"
srcset="http://site.local/wp-content/uploads/2019/07/image1-1024x874.png 1024w, http://site.local/wp-content/uploads/2019/07/image1-300x256.png 300w, http://site.local/wp-content/uploads/2019/07/image1-768x655.png 768w, http://site.local/wp-content/uploads/2019/07/image1-1536x1311.png 1536w, http://site.local/wp-content/uploads/2019/07/image1-2048x1748.png 2048w, http://site.local/wp-content/uploads/2019/07/Screen-Shot-2019-11-30-at-11.49.32-1568x1338.png 1568w"
sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
</li>
</ul>
</figure>
Yes, that go be a good approach.
You can also look for ready-to-use react packages in npm, like this one which is created precisely with react-spring:
- https://www.npmjs.com/package/react-spring-lightbox
- https://codesandbox.io/s/react-spring-lightbox-mosaic-71hts
Sure. You can use a processor to catch the wp-block-gallery class and convert it to React.
1 Like