NextGen Plus — Icons disappear in Pro Lightbox

Hi @emilyatal,

Thanks for using NextGEN Gallery Optimizer.

Is it possible you have the “Remove font-awesome.css?” option selected in Optimizer’s “Advanced options” section (in the “Script and Stylesheet Optimization” box on Optimizer’s settings page)?

This is a helpful option for most users (as it prevents loading an unused stylesheet on every page of your site). However, if you’d like to use the NextGEN Pro lightbox in NextGEN Plus/Pro, this option will need to be disabled — as that stylesheet is required in order to display all the icons you’ve mentioned.

I hope this helps!

Cheers,
Mark.

Hola Mark,

Thank you for your quick response. It is not checked. It doesn’t look like it is loading, though. When I look at the source code I do not see it, unless I disable the plugin.

When I disable the Gallery optimizer plugin it does load it, but when enable the plugin it does not load, even though the option in unchecked.

Hi @emilyatal,

That’s very strange to hear!

I’ve just tested Optimizer on a clean WordPress install with all latest versions, and everything appears to be working as it should.

Just to confirm, are you using the Basic version of NextGEN Gallery Optimizer (from the WP plugins repository), or the Pro version from Optimizer’s website? And is it the latest version (currently at v2.1.5)? I’m afraid I can’t see the meta tag in your source code whilst the plugin is deactivated.

Also, do you have any other checkboxes checked in the “Advanced options” section?

From your source code, I can see that the font-awesome.css file you require is being concatenated and minified with other stylesheets by the Autoptimize plugin, and then you’ve got page caching on top via the W3 Total Cache plugin. There could very well be a conflict there. Does the issue resolve itself if you clear all caches and deactivate those plugins?

Cheers,
Mark.

well, you can always add font-awesome to autoptimize’s CSS optimization exclusions, cfr. more info in AO’s FAQ ??

hope this helps,
frank (ao dev)

I uninstalled it for now because that was the only way I could get the icons to show up.

I was using the latest version from the WP plugins repository. All the checkboxes were unchecked.

The issue could be connected to caching, but in order to test it out, I disabled all my plugins and then reenabled them one by one. Before I enabled autoptimize and caching, I tried optimizing the NextGEN Optimizer and the icons disappeared. disabled it and they reappeared.

Let me know if there is something you’d like me to do so that you can further examine this issue. I’ve renabled the plugin, so you can see yourself.

Hi @emilyatal,

Many thanks for re-activating the plugin again. That was very helpful, and I can see from your source code that with it activated, something is indeed preventing the font-awesome CSS from loading (and possibly other NextGEN stylesheets also).

If you’d like to send me a copy of the NextGEN Plus plugin you’re using, that would be a big help (I’ve been testing on the latest version of NextGEN Pro, which has the same lightbox, but you never know). You can just attach it to Optimizer’s contact form here.

Also, if you could temporarily switch to one of the default WordPress Twenty-series themes (and deactivate all other plugins whilst doing so), that would be great to see if the issue persists.

Many thanks,
Mark.

I sent you a copy of the plugin.

I switched to another theme and the icons showed up. I’m not sure however, if that is because font-awesome is being blocked by the theme.

In the theme I use, I added a function to dequeue font-awesome from another plugin (smash balloon’s custom facebook theme) When I switched themes, that plugin loaded it’s version of font-awesome, which I think is why the icons showed up. Let me know if I’m wrong.

Because my website is live, I can’t leave it with the other theme, but let me know if you need me to check something out with the other theme.

Hi @emilyatal,

Many thanks for sending that through ??

I’ve just finished thoroughly testing it on a clean install of WordPress (v4.7.4), running latest versions of NextGEN Gallery (v2.2.3), NextGEN Gallery Optimizer (v2.1.5), your copy of NextGEN Plus, and the Twenty Ten theme, and I’m afraid it’s all working perfectly here (even when adding the Autoptimize plugin you’re using on top).

Activating/Deactivating Optimizer isn’t affecting the display of the NextGEN Pro lightbox icons here, and the Font Awesome library loads in either state. There must be something else at play.

That’s very interesting to hear that the icons were displaying again when you switched themes. It is indeed possible that NextGEN was referencing the Custom Facebook Feed’s Font Awesome library when you switched, but the only way to know for sure is to deactivate all other plugins (including the Custom Facebook Feed) at the same time as switching the theme. Could you maybe try that and see and if they display?

Also, if you could post the function you’re using to dequeue Font Awesome in the Custom Facebook Feed plugin (including its action hook/filter), that might shed some light on the issue.

Cheers,
Mark.

I disabled Custom Facebook Feed, activated Gallery Optimizer, and changed the theme. The icons did not appear.

Here is the code I’m using to disable Font Awesome (as an aside, if you know a better way of making sure multiple instances of font awesome are not loaded, I’d love to know it):
——————————
/*dequeue other instances of font-awesome*/
function no_font_awesome() {
wp_dequeue_style(‘cff-font-awesome’);
wp_dequeue_style(‘sbi-font-awesome’);
}
add_action( ‘wp_enqueue_scripts’, ‘no_font_awesome’, 99 );

function sb_instagram_dequeue() {
if ( get_the_id() !== 4 && get_the_id() !== 276 ) {
wp_dequeue_style( ‘sb_instagram_styles’ );
/*wp_dequeue_style( ‘sbi-font-awesome’ );*/
wp_dequeue_script( ‘sb_instagram_scripts’ );
}
}
add_action( ‘wp_enqueue_scripts’, ‘sb_instagram_dequeue’, 99 );

function sb_facebook_dequeue() {
if ( get_the_id() !== 276 ) {
wp_dequeue_style(‘cff’);
wp_dequeue_style(‘cff-font-awesome’);
wp_dequeue_script(‘cffscripts’);
wp_dequeue_style(‘cff_carousel_css’);
wp_dequeue_script(‘cff_carousel_js’);
}
}
add_action( ‘wp_enqueue_scripts’, ‘sb_facebook_dequeue’, 99 );

——————————

Hi @emilyatal,

Many thanks for that.

Your dequeuing functions appear to be all good. I just wanted to make sure they were all originally enqueued with unique handles (in case there was a naming collision with NextGEN). There are two duplicate calls to dequeue “cff-font-awesome” and “sbi-font-awesome” there, but apart from that, it all looks good.

I’ve been looking at your source code again, and I think I may have discovered something.

The NextGEN images you have in the bottom-right column at https://bananabeachcr.com/weddings, don’t actually exist in your source code (they appear to be being added dynamically with JavaScript). Here’s the empty container/placeholder for them:

<div id="dslc-module-c6a0cbc95b0" class="dslc-module-front dslc-module-DSLC_Shortcode dslc-in-viewport-check dslc-in-viewport-anim-none  dslc-col dslc-12-col dslc-last-col  dslc-module-handle-like-regular " data-module-id="c6a0cbc95b0" data-dslc-module-id="DSLC_Shortcode" data-dslc-module-size="12" data-dslc-anim="none" data-dslc-anim-delay="0" data-dslc-anim-duration="650"  data-dslc-anim-easing="ease" data-dslc-preset="none" >

<div class="dslc-module-shortcode">

<div class="ngg-pro-mosaic-container" data-ngg-pro-mosaic-id="b07af70bbf4bec215102113fd296a840"></div>

</div>

</div><!-- .dslc-module -->

This could cause a problem with Optimizer, as it might not be possible to detect if a NextGEN Gallery shortcode is actually present on the page in this use-case. If it doesn’t detect a shortcode, it then goes ahead and optimizes the page — removing all of NextGEN Gallery’s unused scripts and stylesheets (which would include the Font Awesome CSS file in this case, as it’s packaged in NextGEN core, not the Plus/Pro add-ons like the lightbox scripts).

In trying to replicate this, I’m just wondering how you’ve put this page together. Going from the “dslc” id/class prefixes, are you using the following plugin by any chance?…

https://livecomposerplugin.com/

Cheers,
Mark.

yes, I use LiveComposer plugin to design the page.

Here’s the page code I used. https://textuploader.com/drw67

You may be able to import it in LiveComposer. Open the page in the live composer editor, and click on the cloud icon. Then chose “Import Page Code” and put that code in. It will recreate my page (or at least try to).

Hi @emilyatal,

Many thanks for providing that.

I’m pleased to say I have now been able to successfully replicate this issue.

Firstly, upon further testing based on my last post, I can confirm that Optimizer is indeed fully compatible with the “NextGEN Pro Mosaic” display type you’re using in NextGEN Plus.

Even though NextGEN is pulling in the images dynamically, Optimizer still detects its shortcode before it’s processed, and knows not to remove any scripts or stylesheets when present.

The problem is actually with the Live Composer plugin you’re using to generate that page, as it appears to be nesting a NextGEN shortcode *within* its own epic shortcode.

Unfortunately, Optimizer isn’t able to detect nested shortcodes due to limitations within the WordPress environment itself (or more specifically, WordPress’ “get_shortcode_regex()” and “do_shortcode()” functions). And this is further complicated when a shortcode is stored as a value in an array, inside another shortcode, as appears to be the case here.

For more information, please see:
https://www.nextgengalleryoptimizer.com/docs/limitations/

I can now see why you were reluctant to deactivate all other plugins, as when the Live Composer plugin is deactivated, all content you’ve built with it (including your gallery) disappears. This really isn’t an ideal situation, as you’re creating an unnecessary dependency for your content, that you’re bound to regret later on (especially if that plugin is not maintained in the future, or if you accidentally delete it).

Also, no disrespect to the developers, but that plugin really slows down your site (including both the front-end and the admin, and even on a clean WordPress install). Apart from freezing my browser several times just trying to test it, it’s also loading 4 extra stylesheets, and 2 extra scripts on *every* front-end page (not just the pages you’ve used it on), and that’s even when you’re logged-out with no composer available (what your visitors are being served).

What I might suggest, is that if you find the Live Composer plugin useful for designing/styling page elements, you could maybe use it on a development site (on your server, or locally on your computer), and then when you’re happy with your design, just copy/paste all the div elements that the plugin creates in the page’s source code (in your browser), plus its custom, inline CSS block in the head,
and save it in the WordPress post editor for that page in the admin. That way, you’ll have no extra dependencies, none of the overhead from all the extra processing and loading of several extra scripts and stylesheets everywhere, and your server will be much happier when you move the design to your production site.

Note: You’ll also want to replace the gallery div placeholder in the source code with your original NextGEN shortcode, as I’ve done in the example below:

Here’s the HTML and CSS created by the Live Composer plugin for your weddings page as an example (including your original NextGEN shortcode). It comes fairly close to what you had (just needs some minor tweaking, and ideally, whittling down any unused CSS):

https://textuploader.com/d9arq

I hope this helps!

Cheers,
Mark.