Lightbox does not recognize get_the_post_thumbnail() with selector class

  • Resolved cudak888

    (@cudak888)


    2 weeks, 2 days ago

    I’m currently racking my brain trying to figure out how to get Meow Lightbox to work when the only image on the page is not generated via the_content, but happens to be a featured thumbnail image generated in a PHP page template.

    The code I have at present is:

    <?php echo get_the_post_thumbnail( $post->ID, '', array ( 'class' => 'mwl-img img-fluid outline_featured-l', 'loading' => false, 'alt' => '' ) ); ?>

    The output of this is:

    <img width="1918" height="816" src="http://localhost/bondmustang/wp-content/uploads/S1.png" class="mwl-img img-fluid outline_featured-l wp-image-15 wp-post-image" alt="" decoding="async" fetchpriority="high" data-mwl-img-id="15">

    But it doesn’t work and the lightbox debug log confirms an image was not detected.

    Enabling output buffering does fix it – note mwl-index-“0” added below – but this seems as if it shouldn’t be expected behavior. Plus, as I want to use this with FacetWP, I really can’t use output buffering:

    <img width="1918" height="816" src="http://localhost/bondmustang/wp-content/uploads/S1.png" class="img-fluid outline_featured-l wp-image-15 wp-post-image mwl-img" alt="" rel="lightbox" decoding="async" fetchpriority="high" data-mwl-img-id="15" mwl-index="0">

    Alternatively, if an image happens to be embedded in the_content() – even if output buffering is disabled – the thumbnail image in the template will be detected and added to the available lightboxes.

    What am I missing? It seems as if output buffering shouldn’t be necessary to fire the plugin on a thumbnail image.

    Would this be a use case for calling renderMeowLightbox(); in JQuery, by chance? I read up on it in the other support threads, but I’m not that good at JS and I’m not sure I’ve implemented it correctly; this is what I added in the theme’s .JS file, to no avail:

    if (jQuery("img").hasClass("mwl-img")) {
    	$("img").renderMeowLightbox();
    }

    It doesn’t do anything, but it doesn’t throw up anything in the console either.

    FYI, I am getting this in the PHP error logs as well:

    [02-Sep-2024 14:25:18 UTC] MeowCommon_Admin is called too early. Please make sure it is called after the plugins_loaded filter.

    This is an extension of my experimentation in this thread: https://wordpress.org/support/topic/add_mwl/

    • This topic was modified 2 weeks, 2 days ago by cudak888.
    • This topic was modified 2 weeks, 2 days ago by cudak888.
Viewing 1 replies (of 1 total)
  • Plugin Support Val Meow

    (@valwa)

    2 days, 7 hours ago

    Hey @cudak888! 👋

    Yes! This is exactly the situation where you can use the renderMeowLightbox() function. However, the way you’re calling it might not be correct. Since it’s a public function attached to the window object, you can call it from anywhere—as long as the Lightbox scripts are included on the page.

    To ensure the Lightbox applies to new images added dynamically to your page, you can use an event listener to wait for the image to load and then call the function like this:

    // Wait for the DOM to be fully loaded
    document.addEventListener('DOMContentLoaded', function() {
        // Your code to add the image dynamically
        // For example:
        const img = document.createElement('img');
        img.src = 'path-to-your-image.jpg';
        img.classList.add('your-image-class');
        document.body.appendChild(img);

        // Once the image is added, call the renderMeowLightbox function
        renderMeowLightbox();
    });
Viewing 1 replies (of 1 total)
  • You must be logged in to reply to this topic.