diff --git a/packages/images/README.md b/packages/images/README.md index 4a40b72..fe8f3a1 100644 --- a/packages/images/README.md +++ b/packages/images/README.md @@ -127,7 +127,8 @@ plugins: { ## FAQ: -- Hpw to disable Placeholder: set `placeholder: false` in your config. +- How to disable placeholder: set `placeholder: false` in your config. +- How to disabled padding on the `.ejs` class. Set `cssString:false`. This will disable the plugin from generating any css which gives you full control and will help keep your site from being impacted by future css changes. ## Full Config: diff --git a/packages/images/index.js b/packages/images/index.js index 5ee9afe..0fefcc7 100644 --- a/packages/images/index.js +++ b/packages/images/index.js @@ -250,6 +250,9 @@ const plugin = { plugin.config.scales = defaultScales; } + // if false the plugin shouldn't add any of it's own styles. + plugin.addStyles = typeof plugin.cssString === 'string' && plugin.cssString.length > 0; + plugin.imagesToProcess = []; // no images to process by default plugin.manifest = {}; @@ -443,7 +446,7 @@ const plugin = { priority: 50, run: async ({ cssStack, plugin }) => { - if (plugin.shouldAddCodeDependencies) { + if (plugin.shouldAddCodeDependencies && plugin.addStyles) { cssStack.push({ source: 'elderPluginImages', string: plugin.config.cssString, diff --git a/packages/images/utils/imageStore.js b/packages/images/utils/imageStore.js index 26dce0b..cb9440d 100644 --- a/packages/images/utils/imageStore.js +++ b/packages/images/utils/imageStore.js @@ -39,9 +39,9 @@ const imageStore = (manifest, plugin) => { picture += ``; - let pictureWithWrap = `
`; + let pictureWithWrap = `
`; if (plugin.config.placeholder) { pictureWithWrap += `