fluidbox-ghost-blog-plugin
fluidbox-ghost-blog-plugin copied to clipboard
Plugin does not work if config is not explicitly included
According to the documentation, the minimum requirement for getting this plugin to work is to include the following single-line plugin declaration in the site-footer section:
<script async src="https://cdn.jsdelivr.net/gh/coreysnyder04/[email protected]/fluidbox-ghost-blog-plugin.min.js"></script>
If you do this, however, you receive an error in the JS console:
Uncaught TypeError: Cannot read property 'matchImageSelectors' of undefined
at Array.<anonymous> (fluidbox-ghost-blog-plugin.js:13)
at i (jquery-3.2.1.min.js:2)
at Object.fireWith [as resolveWith] (jquery-3.2.1.min.js:2)
at Object.<anonymous> (jquery-3.2.1.min.js:2)
at i (jquery-3.2.1.min.js:2)
at Object.fireWith [as resolveWith] (jquery-3.2.1.min.js:2)
at A (jquery-3.2.1.min.js:4)
at HTMLScriptElement.c (jquery-3.2.1.min.js:4)
at HTMLScriptElement.dispatch (jquery-3.2.1.min.js:3)
at HTMLScriptElement.q.handle (jquery-3.2.1.min.js:3)
The undefined in question here is window.fluidboxGhostConfig
. Reading further down the documentation page, you see that we are able to define custom behaviour by defining window.fluidboxGhostConfig
:
<script>
window.fluidboxGhostConfig = {
theme: 'image-backdrop', // Options: light, dark, image-backdrop, hsla(262, 100%, 82%, 0.6)
showCaption: true, // Sets whether to capture the caption and show it below the image when expanded
}
</script>
Adding this configuration above the plugin declaration gets rid of the error and makes the plugin work.
This suggests that either the config step is not optional, or the plugin itself needs to null-check the config and specify fallback behaviour.
Thank you, this solved my issue!