Hide Pinnable Images in Less than 10 Minutes to Save Money

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.

Using a Plugin to Hide Pinnable Images

There are a few ways to accomplish hiding graphics. The first would be to use a plugin of some sort. There are a few available such as Grow by MediaVine, Tasty Pins, and Social Warfare.

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:

• Cost
• 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 */
.pinterest-hidden {
   display: none;
}

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.