Why would you want to hide pinnable images? Image you just created a bunch of pinnable images for that AMAZING blog post you wrote. But what do you do with them?
You could go share them on Pinterest, forget all about them, and never see them again. But um… we don’t really want that.
The other option is to hide them within your blog post. This will allow people to pin them or for you to recirculate them in the future with minimal effort.
Table of Contents
Using a Plugin to Hide Pinnable Images
Feature of using a plugin:
- Easy to use
- Support Teams when things go wrong
- It’s a plugin- so if things get wonky you can disable it
Disadvantage of using a plugin:
- Limits on images hidden
- Plugins add security vulnerabilities and graphic ones are targetted often
Using CSS Code
There is another way to hide pinnable images within WordPress and it works with both the classic editor and Gutenberg.
Feature of using code:
- You control it
- No extra cost
- No limits on types of graphics to hide
Disadvantage of using code:
- Some will feel like it’s too techie
- Other plugins may interfere with your code
- No support team to troubleshoot if you have issues
How to Use CSS Code to Hide those Images
First Step – Adding the CSS Code
First, you need to set up the main CSS code on your blog. Please note that while most themes in WordPress will have in the Appearance section your theme may be different. If you cannot find the Customizer then you may need to refer to your theme documentation.
Go to Appearance -> Customizer
Click on Additional CSS
With the Additional CSS area open, copy and paste the below code:
/* Hide Pinterest images with the pinterest-hidden class */
Click on Publish
Second Step – Disabling Lazy Load
WordPress likes to throw us for a loop every once in a while. That was true with WordPress 5.5 as this version now has lazy load as part of its core functionality. Lazy load is great for some things, like page speed. However, it’s not so good if you are trying to hide pins or other graphics.
So nowadays we need to install a plugin that allows us to disable the lazy load features. For this, I use Disable Lazy Loading. It’s super lite meaning it won’t slow things down even further as some plugins do.
After activating the plugin, go to Dashboard->Settings->Media and under Lazy-loading Settings you will find a couple options. The one I checked is “To disable lazy loading on all images on your site”.
Third Step – Use in Blog Post
Now you are ready to use the new CSS code within a blog post. After you have added an image to your post, on the right side of the editor window, click on Advanced.
Scroll down to the Additional CSS Class text box, type in your class name that we created to hide your graphic. The name is not important but needs to match what you used when you set up your CSS Class code. We used pinterest-hidden in our example code.
Hide Pinnable Images – Wrapping it up!
I hope that this blog article has helped you to figure out how to hide pinnable images for your blog.
Pinterest Pin Templates!
Do you struggle to maintain a consistent brand on Pinterest?
Want to ensure people recognize your Pins immediately?
Need to save time creating new Pins?
If you said yes to any of these questions, then you need to be using consistent pin templates.
I love to help people just like you save time, automate administrative tasks, and learn new things. I am inviting you to follow me on my Facebook Business Page and learn even more.