Learn how to use css selectors to choose what images to share.
Share This Image plugin gives you flexibility to choose what images can be shared. You can make all images from your site available for sharing. Or only images from several pages. Or only images from several blocks of your pages. Or just several individual images.
All this can be done with a special Display rules option.
This option has many available parameters to choose from. In this article we will closer look on one of the most interesting from them - Selector option.
So just open the plugin settings page, find Display rules option and choose Selector parameter for it.
By default its set to
img
That means that the plugin will work with all images on your website. But its behavior can be changed.
As Selector option you can set any css selectors. All this selectors must be separated with commas.
For example you want to change this behavior: you don't want to share all images but only those from certain page.
First of all you need to know this page main classname or id. Then all what you need is update selector setting to something like
.postid-40 img
where .postid-40
- page main classname
Imagine that in your page from previous example you have special block called 'Featured' and you only want to share images from this block.
Its simply can be done with Selector option. All you need to know is classname or id of this 'Featured' block. You find it by pressing F12 in your browser window and navigate to this block in source code.
If, for example, this block has class features-block
than is Selector field you need to put
.features-block img
That's mean that all image inside block with classname features-block
can be shared. And not any others outside this block.
If you need to share images from the several pages you can separate different selectors with commas.
For example we have second page with classname postid-41
:
.postid-40 img, .postid-41 img
So only images from pages with classnames postid-40
and postid-41
will be available for share.