• Resolved earrame

    (@earrame)


    Hello,
    I would like to use this plugin to make a gallery of videos that open in a lightbox, but when I make the grid gallery (or masonry) the videos are there with no thumbnail. I have added a featured image to the file. I have tested on Firefox and Chrome.

    The page I need help with: [log in to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Author GalleryCreator

    (@gallerycreator)

    Hello,
    Video thumbnails are the first frame of your video.
    The first frame of your videos is a black screen.

    Thank you for your reply. Is there no way to choose a thumbnail so that the video can fade from black?

    Plugin Author GalleryCreator

    (@gallerycreator)

    unfortunately at the moment it is not impossible to add a poster, but I will think about this problem.
    Sorry for the inconvenience.

    This feature is essential, you can’t see video previews in Safari, on iOS based devices (tested on iPad Pro).

    By the way great library. I decided to keep in in our production with a jQuery fix for now. Sharing it for others who are getting desperate on the issue.

    How to use:
    – In your page/edit, under the voice “Info Bar horizontal align” set “Source for Tumbnails caption” to “Capiton”
    – Edit a single video (press on Pencil button on the right sidebar under “Items Manager”), set Caption field (the field above Title) in this string format: “IMAGE_THUMB_URL|Title” where “|” is the separator between two values
    – Put the following func somewhere in your “functions.php” if you’re using a Child Theme or a GrandChildTheme Plugin. If you aren’t familiar with this approach, take a read of the following article to find the best way for you to inject the code.

    https://www.wpbeginner.com/wp-tutorials/how-to-easily-add-javascript-in-wordpress-pages-or-posts/

    How the solution works:

    – The script will process “Caption” field, set “poster” to each video with the URL if it is detected and it will also set the Title if it is provided after the separator. If you provide just a Caption value (plain text without URL) no poster will be set. If you provide just URL, no title will appear.

    Taras K.

    
    function wpb_hook_javascript() {
        ?>
            <script>
                console.log('taz script inside');
                // VALID URL CHECK
                const isCustomUrlValid = (url) => {
                    return /^(https?|s?ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(url);
                };
                // GALLERY PRINTED ON PAGE
                jQuery('.wp-block-pgcsimplygalleryblock-grid', document).ready(function() {
                    // IF AT LEAST ONE GALLERY EXISTS
                    if (jQuery('.wp-block-pgcsimplygalleryblock-grid').length) {
                        console.log ('script activated!', jQuery('.wp-block-pgcsimplygalleryblock-grid'), 'no?');
                        // HIDE GALLERY
                        jQuery('.wp-block-pgcsimplygalleryblock-grid').css('visibility', 'hidden');
                        
                        const check = () => {
                            const contents = jQuery('.pgcsimplygalleryblock-grid-content');
                            // CHECK WHEN FIRST ITEM IS VISIBLE
                            if (!contents.length || contents.find('.pgcsimplygalleryblock-grid-item').first().css('opacity') !== '1') {
                                // ELSE CHECK AGAIN
                                return setTimeout(check, 50);
                            }
                            // GRID IS READY
                            jQuery('.pgcsimplygalleryblock-grid-item').each(function(contentItemIndex, contentItem) {
                                // TAKE TITLE VALUE {URL:string|Title:string}
                                const info = jQuery(contentItem).find('.pgcsimplygalleryblock-grid-item-title').text().split('|');
                                const url = isCustomUrlValid(info[0]) ? info[0] : null;
                                const title = (url ? info[1] : info[0]) || '';
                                if (url) {
                                    console.log('url YES', url, 'title', title);
                                    /* BACKGROUND SOLUTION */
                                    // jQuery(contentItem).find('.pgcsimplygalleryblock-grid-item-wrap').css({ background: 'url(' + url + ') no-repeat center center', backgroundSize: 'cover' });
                                    // jQuery(contentItem).find('video').css({ visibility: 'hidden' });
        
                                    /* VIDEO POSTER ATTR SOLUTION */
                                    jQuery(contentItem).find('video').attr('poster', url);
        
                                    // OVERWRITE URL+TITLE WITH TITLE
                                    jQuery(contentItem).find('.pgcsimplygalleryblock-grid-item-title').text(title);
                                }
                            });
                            // SHOW GALLERY - DONE!
                            jQuery('.wp-block-pgcsimplygalleryblock-grid').css('visibility', 'visible');
                        }
                        // CHECK UNTIL GALLERY INIT
                        check();
                    }
    
                });
            </script>
        <?php
    }
    add_action('wp_head', 'wpb_hook_javascript');
    
    Plugin Author GalleryCreator

    (@gallerycreator)

    Hello, @earrame
    Try the update (1.6.0), now you can add a poster for each video.

    tasonface

    (@tasonface)

    Hi, thanks for such a fast update!)

    I’m testing it. I had to remove and reinstall the plugin to see the new button. When I try to add a poster to a video:

    • click on poster icon of a video
    • open poster-modal
    • open wp-media-gallery
    • chose a jpg > press Select
    • in poster-modal preview I still see blue rectangle, no image preview
    • try to save poster-modal >>> everything breaks and the gallery block fails to render (still in Page edit)

    In console the following error appears:

    TypeError: Cannot read property ‘url’ of undefined

    on this line:

    this.videoContent.setAttribute("poster",this.item.poster.medium.url)

    I’m using WordPress 5.5.1 with “SimpLy Grid” component.

    Plugin Author GalleryCreator

    (@gallerycreator)

    Hello.
    Very interesting!
    Most likely, some plugin deleted medium-sized copies (each image in the media library must have: thumbnail, medium size, large size)

    Plugin Author GalleryCreator

    (@gallerycreator)

    @tasonface , or publish a Simply Gallery Block with the photo that you wanted to use for the poster and if it works out, please give a link to this page and I will try to figure out what is going wrong

    tasonface

    (@tasonface)

    Thank you, very kind.

    Your intuition is probably correct, the image I was selecting was uploaded time ago, probably broken, I tried uploading a new media and it worked properly. I suggest falling back to the default (original) size if it doesn’t exist just to avoid JS from breaking. Then it’s the developer’s care to avoid performance loss by 2k+ posters!

    A feature suggestion: add also a type class to “.pgcsimplygalleryblock-grid-item” (es. pgcsimplygalleryblock-grid-video-item) so we can customize and access selectors through CSS. Right now I’m able to customize only “.pgcsimplygalleryblock-grid-item-inner” by the CSS rule:

    .pgcsimplygalleryblock-grid-item video ~ .pgcsimplygalleryblock-grid-item-inner {
    // code
    }

    In our case, we use a custom “play” icon on the thumb for videos.

    Thanks again for your reactive support!
    Taras K.

    • This reply was modified 4 months ago by tasonface. Reason: wrong css example. "~" combinator instead of "
    Plugin Author GalleryCreator

    (@gallerycreator)

    @tasonface I hope to fix this in the next update

Viewing 10 replies - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.