mwl-img getting removed by JS; doesn’t seem to fire correctly, add_mwl, etc

  • Resolved cudak888

    (@cudak888)


    2 months, 3 weeks ago

    I’m currently tinkering with a custom theme based on Bootstrap Basic that’s not playing nice with Meow Lightbox at present – both for general posts and for more complicated pages with images shown in tables generated by their own post loop query. (I’d share it, but it’s on an XAMPP test server at present)

    Put simply, the Debug Log shows that Lightbox detected images and fired, but in the inspector, I can see the “mwl-img” class tags (the ones I added to photos in-line in the editor) getting almost immediately wiped on load, inexplicably.

    This isn’t the first time I’ve struggled with it, as I realized that, in an earlier variant of this theme (which I like to use as a base for all my projects) I’ve apparently added the class “add-mwl” in the theme files:

    <div class="entry-content">
    	<div class="add-mwl">
    		<div class="row">
    		<div class="col m-3">
    		<h1 class="entry-title"><?php the_title(); ?></h1>
    			<hr>
    		<?php the_content(); ?>
    		</div>
    		</div>
    	</div>
    </div>

    Upon looking at it now, I’m 100% sure this is a kludge making up for an error with Meow Lightbox’s normal JS-injection and I just haven’t nailed the actual issue yet – obviously I haven’t forgotten to enqueue the footer correctly, but something else isn’t working right.

    To my surprise however, upon turning off all plugins (short of Meow Lightbox) and runing Twenty Twenty Four as a test…I’m getting the mwl-img class stripped again.

    I’m stumped. Any suggestions?

    • This topic was modified 2 months, 3 weeks ago by cudak888.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter cudak888

    (@cudak888)

    A clarification and update:

    First, I should have clarified that I added .mwl-img as a selector class to the defaults. This is my preferred class to use on my sites to call on Meow Lightbox, specifically.

    In doing so, I finally realized (by tinkering with a clean-sheet install of WordPress w/Meow Lightbox and no other plugin than the Classic Editor) that I had dropped .entry-content from the list of selectors, and that – for whatever reason – this appears to be a requirement for Meow Lightbox to fire correctly. I’m not sure upon this point though, so if this isn’t expected, please let me know.

    I should note that I’m still having an issue getting it to fire with the loop-within-the-page if there isn’t already an image in the_content() before it. Haven’t tried troubleshooting it yet. Fingers crossed.

    Thread Starter cudak888

    (@cudak888)

    After some tinkering, it appears as if the has nothing to do with the loop-within-loop; instead, any images called via the PHP template on their own aren’t recognized by Meow Lightbox unless there’s also an image that’s generated by the_content.

    Every single page I’ve ever designed has had at least one image in the post to fire Meow Lightbox, so this is the first time I’m discovering this.

    I can fix this by enabling Output Buffering, but I’d rather avoid doing so, as I plan to put a FacetWP filter around this later on.

    This is the code I’m using in the template for the post thumbnail that isn’t working. This is a simplified version minus a few other classes.

    <?php echo get_the_post_thumbnail( $post->ID, '', array ( 'class' => 'mwl-img' ) ); ?>

    The output is as follows according to the inspector:

    <img width="1918" height="816" src="https://localhost/bondmustang/wp-content/uploads/S1.png" class="mwl-img wp-image-15 wp-post-image" alt="" decoding="async" loading="lazy" data-mwl-img-id="15">

    While it does add the MWL image ID, it doesn’t add anything else or the index.

    To be on the safe side, I re-wrote the above to turn off lazy loading, just in case. No difference:

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

    Any help would be GREATLY appreciated – this has gone past my paygrade into the world of JS/JQuery, it seems.

    • This reply was modified 2 months, 3 weeks ago by cudak888.
    • This reply was modified 2 months, 3 weeks ago by cudak888.
    Thread Starter cudak888

    (@cudak888)

    I’m closing this and marking it as resolved as the original issue was taken care of.

    I’m going to start a new thread for the featured image issue.

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