WordPress.org

Ready to get started?Download WordPress

Forums

Social Media Shortcode Pack
[resolved] Using Images instead of Text (16 posts)

  1. GideonKimani
    Member
    Posted 1 year ago #

    Is it possible to use an image instead of text as a link? I'm a complete noob at PHP so please be kind.

    http://wordpress.org/extend/plugins/social-media-shortcodes/

  2. Michael Beckwith
    Member
    Plugin Author

    Posted 1 year ago #

    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. :)

  3. somethingelse
    Member
    Posted 1 year ago #

    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!

  4. somethingelse
    Member
    Posted 1 year ago #

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

  5. Michael Beckwith
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  6. somethingelse
    Member
    Posted 1 year ago #

    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!

  7. Michael Beckwith
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  8. Michael Beckwith
    Member
    Plugin Author

    Posted 1 year ago #

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

  9. GideonKimani
    Member
    Posted 1 year ago #

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

  10. GideonKimani
    Member
    Posted 1 year ago #

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

  11. Michael Beckwith
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  12. GideonKimani
    Member
    Posted 1 year ago #

    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.

  13. Michael Beckwith
    Member
    Plugin Author

    Posted 1 year ago #

    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="http://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?

  14. GideonKimani
    Member
    Posted 1 year ago #

    Okay,where should I define the class "twitter_smsc"? Within my theme's css?

  15. Michael Beckwith
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  16. GideonKimani
    Member
    Posted 1 year ago #

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

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.