Using the Social Gallery WordPress plugin with different CSS selectors is an easy way to specify what images you want to apply Social Gallery too. If you are familiar with CSS selectors then you will probably be able to understand this functionality as it is. This post is designed as a quick guide to using your own CSS Selectors with Social Gallery, this feature can be used in many ways – further information can be found in the help documentation packaged with the plugin.
1. Decide which images you want to use with Social Gallery.
This will be easy if you post in a regular way, perhaps you always put a major image at the top of a blog post, or you have a gallery you sometimes show at the bottom of a post. Either way the first step is to work out which of these images it makes sense to highlight with Social Gallery. Remember: every image you include will be part of a gallery from which users can share your blogposts and like your content.
2. Work out the most direct way of selecting just these images.
This is a bit of a developer job, but if you know a bit of html you will probably be able to work it out. First up load a webpage of your blog, perhaps a blogpost with images you would want to include. If you have Google Chrome or Firefox you can simply right click one of the specific images and then click “Inspect Element” – this will bring up the developers console from which you should be able to discern one of the following (if you don’t use one of those browsers I would recommend you update your browser, or alternatively view the source of the webpage and find the image in question.)
3. Set the CSS selector in Social Gallery configuration
By default Social Gallery works with all linked images within your wordpress posts, that is any image which is linked somewhere. This can be useful out of the box but also won’t suit every wordpress user. The following are a few examples of other CSS Selectors we have used with the plugin. From these you should be able to understand the way Social Gallery uses them and write your own.
A specific link class: “.socialGalleryThis”
A single image (by ID): “#socialGalleryThis”
All linked images within a classed object: “.yourClass a:has(img)”
As always if you have purchased the plugin and are unsure about how best to use these CSS selectors please do let us know via the email contact form here. The full documentation on CSS selectors is available from W3 here, if you are doing anything with HTML and CSS, CSS selectors are an important learning point.