Support » Plugin: Block Gallery - Photo Gallery Gutenberg Blocks » Feature Request: Video Clips and/or embeds

  • I have made my own custom masonry gallery for WordPress previously. It’s a very hacky affair I made using ACF. I am currently learning Gutenberg stuff, and am looking to replicate the functionality of my custom gallery.

    BUT you’ve already got a pretty good headstart, so I would just make a suggestion for some other features and why I think they would be useful.

    Serving a gallery of short looping autoplaying mp4s is much better than serving a gallery of gifs. Much less memory, cpu, smaller footprint, better quality. Maybe consider trying to add that to your gallery?

    Currently, I can make an inner block that allows me to insert an image, or video at a time. I can also insert a gallery as as a child block. I can’t select a bunch of single images or a bunch of single videos to insert. I could do this with the ACF repeater field but doesn’t seem so here. Seems the only way to do it is with wordpress gallery, which it seems you’re doing. How hard is it to add videos to the native wordpress gallery implementation? Do you think that’s even possible for you or I to do?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Rich Tabor

    (@richtabor)

    Great feedback @thedonquixotic!

    I don’t think it’d be too difficult to do honestly. I’ll run some tests and see what I can get rolling. Do you have a mp4 gallery online somewhere that I could use for testing?

    @richtabor

    I have a live version of my gallery on my portfolio website.

    Here’s one that is photos and mp4s: https://www.jackalope.tech/case_study/lodestone-social-atomic-design-system/

    Here’s one that is links to external pages: https://www.jackalope.tech/side_project/static-websites/

    And here’s one where the lightbox brings up a sketchfab iframe for viewing 3D models: https://www.jackalope.tech/side_project/3d-models-and-shaders/

    Also today I just finished doing a conversion of my custom media library to a Gutenberg block using the ACF beta. So it’s not a native implementation which I’m still hoping to do at some point, but maybe it can give you an idea of what I’ve done: https://github.com/jcklpe/Jackalope/blob/master/template-parts/blocks/mega-multimedia-gallery.php

    This isn’t done the way you do things, but I honestly think most of the functionality I am looking for can just be handled by a custom Inner Block (container block, parent block. whatever the term is) importing the other native media blocks (so images and video in this case). After posting this I checked the Media Upload component documentation and there’s the ability to set a prop to multiple: true which allows you to select multiple things when the media uploader comes up. That seemed to me to be enough to do what I wanted, but when I make it true, I don’t see any change in my ability to select multiple objects in the media uploader.

    Plugin Author Rich Tabor

    (@richtabor)

    Thanks @thedonquixotic, I figured out how to enable videos within the blocks, but the issue I’m having currently is to distinguish a way for my GalleryImage component to identify if it’s a video or an image. That way it can properly determine the correct markup to use.

    Do you have any ideas on that front?

    You could use conditional JSX statements in the save field. That’s basically what I did when I made my php version. I created a switch statement that tested to see what sub field was used and then changed the output html based on that. For Gutenberg you probably don’t have access to different subfield stuff, but I bet you could use javascript to check the file extension or maybe the MIME type. This might be of use:

    https://www.jstips.co/en/javascript/get-file-extension/

    Specifically you could maybe look into passing the file type information and storing it as an attribute. That might only store things on a per block rather than on a per gallery item basis. The per block attribute save would work for my experimental InnerBlock/ParentBlock solution but might not for yours since yours is just a block.

    You might also set that information on file type as a css selector to be added on a per gallery item basis. Also I believe you can save stuff as data attributes though I haven’t looked at that a whole bunch yet.

    Plugin Author Rich Tabor

    (@richtabor)

    Thanks for the pointers! So I have it mostly working (on the Stacked block only currently). The only thing left to figure out is how to get the Edit Gallery view to show videos as well, which I’m not sure if Gutenberg allows out of the box.

    Anyhow, it’d probably be best to move comms to the issue I created on GitHub (if you’re familiar with GitHub.

    Let me know if you have any further insights!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Feature Request: Video Clips and/or embeds’ is closed to new replies.