Using Images instead of Text

It is with CSS and some background images, however, I will have to confess that I don’t have any specific classes tied to each link. I’ll make a note of that and try to get an update for it out soon. Keep an eye on your plugin update notifications. ??

yay! this is exactly the plugin i’ve been looking for… it’ll be even more perfect if it has the option for icons. THANK YOU for doing the hard work!

oh, and if they could have the option of opening in a new window that would be even more perfect…

Alright. I’m definitely going to add classes to each link output. I do not think I’m going to include some images for each myself, I’d rather give the user the power to use their own that fits their theme, with as little hassle as possible. I’ll also add to the list to provide a parameter in the shortcode for where to open the window. Hoping for this weekend, as I find some time.

i got around the image thing just fine inserting a tiny icon before each shortcode… ?? and combining this with the Global Content Blocks plugin means i don’t have to retype the code every time i want to use it.

works like a charm.

thanks again!

Whatever works for you right now. I’ll still make it easy for you if you want to change that around with css, and for anyone else.

You two (and everyone else), should have a notification soon for 1.0.3. Check the changelogs and examples for more details

Thanks for all the help guys! & Thanks for a great plugin,Michael.

Okay,sorry about this but I’m still stuck. Where should I add the image?

It’ll have to be via css and background images. As of 1.0.3, each link should have a class added to it of ‘socialsite_smsc’. Example: ‘twitter_smsc’, ‘github_smsc’. Likely you’ll need to use display block, background-image, some padding on one side or the other, maybe some negative text-indent if you want to hide the text.

Okay,I know it’s probably really easy and it’s just my limited knowledge that’s making this so difficult to understand. Is there any way you could use an example for this the same way you did for the text links? It’d go a long way in helping me understand this. Thank you for your patience.

say you’ve used this shortcode for your twitter username

[twitter name="myname" text="my text"]

and it gives you the markup of

<a href="https://www.twitter.com/myname" title="myname's Twitter profile" class="twitter_smsc">my text</a>

You decide to use a twitter icon that’s 16px wide by 16px tall, named twitter16.png, and you put the icons in your “images” folder inside the your theme’s folder. You could use the image with the text with the following css.

.twitter_smsc {
	background: url('images/twitter16.png') no-repeat;
	display: block;
	height: 16px;
	text-indent: -999em;
	width: 16px;
}

With that, you’d use the image as your background, non-repeating. The link would also become block level so that you could click anywhere in the dimensions of the image. The space is 16px by 16px. The text would be offscreen so that it’s bot showing over the background image, however would still be there if someone clicked “view source”.

Make sense?

Okay,where should I define the class “twitter_smsc”? Within my theme’s css?

Correct, it’d go in your theme’s style.css file. All of the classes will be prefixed with the social media site. Example: foursquare_smsc, github_smsc, etc.

Great! Thanks for taking the time to walk me through this.