mwl-img getting removed by JS; doesn’t seem to fire correctly, add_mwl, etc
-
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?
-
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="http://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.
- You must be logged in to reply to this topic.
