Adding youtube videos to the gallery

[YosoraLife]

Hi Joe,

I don't know if this would be a lot of work, but would it be able to integrate youtube videos into the gallery (and popup?) just like with the photos. I was thinking maybe like an URL field where you can submit the link of the youtube video?

Cheers,
Remco

[morehawes]

Hi Remco,

I don't know if this would be a lot of work, but would it be able to integrate youtube videos into the gallery (and popup?) just like with the photos.

Actually this would be a huge undertaking... however, overhauling the Gallery has been on my list for a while.

I was thinking maybe like an URL field where you can submit the link of the youtube video?

Instead of just supporting YouTube, perhaps the "new" Gallery could support not only images, but videos hosted on a number of platforms (i.e. Vimeo etc).

This is something that has come up a few times over the years and I do see that there is room for improvement with the Gallery.

I think it's worth starting a GitHub Discussion in order to garner input on what features a Waymark Gallery v2.0 might look like.

Thanks for the suggestion!

[YosoraLife]

Actually this would be a huge undertaking... however, overhauling the Gallery has been on my list for a while.

What did you have in mind to change about the gallery? Because for me the gallery works very well. I've tried experimenting with a few things, like placing multiple rows of images. but for me it all took away from the main focus, the map. So I only ended up making the thumbnails a little bigger.

Aside from adding video's my only 2 other "wishes" would be to have a fancybox integration (saw something in the docs but haven't had time to look into it yet) and the other one is to group images(/videos) on a collection map. But i would love to hear your ideas. And wherever possible i would like to help (although my JS skills are not that great)

Instead of just supporting YouTube, perhaps the "new" Gallery could support not only images, but videos hosted on a number of platforms (i.e. Vimeo etc).

Makes sense, Wordpress has the built in embed and video shortcodes that could be used for that

[morehawes]

Because for me the gallery works very well.

Thank you, I put a lot of time into this feature :)

What did you have in mind to change about the gallery?

I am quite happy with how it works too, aside from a few minor gripes; however making it more customisable and have better "responsive" support for different devices are high on the list.

The main issue though is the code behind the Gallery. I wrote this in jQuery a long time ago and it's time for a rewrite of this feature. As part of that, lightbox support and multiple Overlay images were on my list.

I think it's worth starting a GitHub Discussion in order to garner input on what features a Waymark Gallery v2.0 might look like.

I will endeavor to do this and start pooling my thoughts. I will include a link to this, and any other previous discussions I can find.

Cheers,

Joe

[YosoraLife]

For now i found a way to view youtube videos in the image gallery:

I added a marker with a photo (in this case the youtube logo) and then added a custom shortcode with the youtube video url to the description. As soon as the shortcode is loaded it will hide the photo (youtube logo) and add the video instead.

For anyone who would like to do the same using this workaround, add the following function for the custom shortcode to you theme's functions.php

// Custom shortcode to display a youtube video
function mapvideo_shortcode( $atts ) { 

    $a = shortcode_atts( array(
        'video' => ''
        ), $atts );
    $videoURL = esc_attr( $a['video'] );

    // Find the videoID
    preg_match("/(?:https?:\/\/)?(?:www\.)?(?:m\.)?(?:youtu\.be\/|youtube\.com\/(?:(?:watch)?\?(?:\S*&)?vi?=|(?:embed|v|vi|user|shorts)\/))([^?&\"'>\s]+)/", $videoURL, $match ); 
    if ( isset( $match[1] ) && $match[1] != '' ) {
        $videoID = $match[1];
    }
  
    // Add CSS to hide the photo and the label
    $html = '<style>.waymark-info:has(.video) {.waymark-info-image_large_url, .waymark-info-type{display:none;} .waymark-info-description{max-height: unset !important;}}</style>'; 

    // Add a new label
    $html .= "<li class='waymark-info-type-video waymark-marker-info-type'><small class='waymark-type-text waymark-marker-type' style='color:#ffffff;background:#dd9933'>Video</small></li>";
    
    if ( $videoID != '' ) {
        // Add the videoplayer
        $html .= "<div class='video'><iframe width='260' height='145' src='https://www.youtube-nocookie.com/embed/". $videoID ."' title='YouTube video player' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share' referrerpolicy='strict-origin-when-cross-origin' allowfullscreen=''></iframe></div>";
    } else {
        // No video found
        $html .= "<div class='video'>No video ID found.</div>";
    }

    // Output needs to be return
    return $html;

    }
    // register shortcode
    add_shortcode('mapvideo', 'mapvideo_shortcode');

Then go to any map and add a new marker, pick an image (can be any image) and add to the description the shortcode:
[mapvideo video='insert_youtube_video_url']

[morehawes]

Thanks for sharing your solution! :)

Joe