News:

SMF 2.0.19 has been released! Please update. Read more.

Main Menu

[Tip] Social Media Icons in Profile Field Tutorial

Started by ~DS~, April 03, 2010, 02:30:40 AM

Previous topic - Next topic

PurpleCrow

SMF 2.0 RC3

Looking for staff!

Forums Galore, a brand new Admin Forum is looking for staff to help with the launch. Send me a PM or sign up to Forums Galore if you're interested!

Add your forum to the Forums Galore Community Showcase


IDunc

Is there a way that users can choose a number from a selection dropdown thing, and that number converts to an image on the forum profile view? Like, have multiple images for one fields?



IDunc

Is there a way that users can choose a number from a selection dropdown thing, and that number converts to an image on the forum profile view? Like, have multiple images for one fields?


~DS~

Quote from: IDunc on June 29, 2010, 12:03:24 AM
Is there a way that users can choose a number from a selection dropdown thing, and that number converts to an image on the forum profile view? Like, have multiple images for one fields?
I am not sure what you mean...
"There is no god, and that's the simple truth. If every trace of any single religion were wiped out and nothing were passed on, it would never be created exactly that way again. There might be some other nonsense in its place, but not that exact nonsense. If all of science were wiped out, it would still be true and someone would find a way to figure it all out again."
~Penn Jillette – God, NO! – 2011

IDunc

Example:

A user goes to edit their Forum Profile. They come across a Call of Duty Prestige field. There are 10 options for this field: 1st prestige, 2nd prestige... up to 10th prestige.

Whichever the user chooses, it displays as that prestige's icon on the forum display. So, you have 10 different images for one field, which all depend on the users choice for that field.


~DS~

Quote from: IDunc on July 04, 2010, 11:54:39 PM
Example:

A user goes to edit their Forum Profile. They come across a Call of Duty Prestige field. There are 10 options for this field: 1st prestige, 2nd prestige... up to 10th prestige.

Whichever the user chooses, it displays as that prestige's icon on the forum display. So, you have 10 different images for one field, which all depend on the users choice for that field.
Try this:

<img src="{DEFAULT_IMAGES_URL}/prestige/{INPUT}.gif" alt="{INPUT}" /></a>

Create a prestige folder, put all the prestige icons (all must be either gif or png files, you can't have both) replace .gif with .png if you are using png icons. Put the folder in the image folder of the default theme. Now name to 1st prestige in the select box (where 1st prestige is the name of the icon i.e.  1st prestige.png) There you go.
"There is no god, and that's the simple truth. If every trace of any single religion were wiped out and nothing were passed on, it would never be created exactly that way again. There might be some other nonsense in its place, but not that exact nonsense. If all of science were wiped out, it would still be true and someone would find a way to figure it all out again."
~Penn Jillette – God, NO! – 2011

lucas-ruroken

Adk Portal 3.1 is coming....

Design your universe!

theSaRk

[nofollow]

arjem06

Wow, that was a nice information that I got from this site. Hope the other people could visit this forum also so that they can get and give some ideas and great information. Who have a myspace account here, guys? Hope we can know one another much better, just visit my space account.

PurpleCrow

Quote from: Delita Heiral on July 05, 2010, 12:08:17 AM
Quote from: IDunc on July 04, 2010, 11:54:39 PM
Example:

A user goes to edit their Forum Profile. They come across a Call of Duty Prestige field. There are 10 options for this field: 1st prestige, 2nd prestige... up to 10th prestige.

Whichever the user chooses, it displays as that prestige's icon on the forum display. So, you have 10 different images for one field, which all depend on the users choice for that field.
Try this:

<img src="{DEFAULT_IMAGES_URL}/prestige/{INPUT}.gif" alt="{INPUT}" /></a>

Create a prestige folder, put all the prestige icons (all must be either gif or png files, you can't have both) replace .gif with .png if you are using png icons. Put the folder in the image folder of the default theme. Now name to 1st prestige in the select box (where 1st prestige is the name of the icon i.e.  1st prestige.png) There you go.

I've done this on my forum and it works great however, even with the "Show on Topic View" box checked it doesnt appear in the postbits... Any idea why?

Here's a link to a random post - http://itsahomething.com/forum/index.php/topic,3.msg4.html#new
SMF 2.0 RC3

Looking for staff!

Forums Galore, a brand new Admin Forum is looking for staff to help with the launch. Send me a PM or sign up to Forums Galore if you're interested!

Add your forum to the Forums Galore Community Showcase

~DS~

Quote from: PurpleCrow on July 14, 2010, 12:47:55 PM
Quote from: Delita Heiral on July 05, 2010, 12:08:17 AM
Quote from: IDunc on July 04, 2010, 11:54:39 PM
Example:

A user goes to edit their Forum Profile. They come across a Call of Duty Prestige field. There are 10 options for this field: 1st prestige, 2nd prestige... up to 10th prestige.

Whichever the user chooses, it displays as that prestige's icon on the forum display. So, you have 10 different images for one field, which all depend on the users choice for that field.
Try this:

<img src="{DEFAULT_IMAGES_URL}/prestige/{INPUT}.gif" alt="{INPUT}" /></a>

Create a prestige folder, put all the prestige icons (all must be either gif or png files, you can't have both) replace .gif with .png if you are using png icons. Put the folder in the image folder of the default theme. Now name to 1st prestige in the select box (where 1st prestige is the name of the icon i.e.  1st prestige.png) There you go.

I've done this on my forum and it works great however, even with the "Show on Topic View" box checked it doesnt appear in the postbits... Any idea why?

Here's a link to a random post - http://itsahomething.com/forum/index.php/topic,3.msg4.html#new
What are you trying to show? I can see the moods there...
"There is no god, and that's the simple truth. If every trace of any single religion were wiped out and nothing were passed on, it would never be created exactly that way again. There might be some other nonsense in its place, but not that exact nonsense. If all of science were wiped out, it would still be true and someone would find a way to figure it all out again."
~Penn Jillette – God, NO! – 2011

PurpleCrow

Sorry, should have removed my post - they just appeared!

Thanks again for the fantastic tip/trick!
SMF 2.0 RC3

Looking for staff!

Forums Galore, a brand new Admin Forum is looking for staff to help with the launch. Send me a PM or sign up to Forums Galore if you're interested!

Add your forum to the Forums Galore Community Showcase

wizzard1

tried it out for facebook but when i enter my facebook user name it doesnt come up
somehow you need to input something else there
is there anything to do about that ?

~DS~

Quote from: wizzard1 on July 21, 2010, 07:40:23 AM
tried it out for facebook but when i enter my facebook user name it doesnt come up
somehow you need to input something else there
is there anything to do about that ?
Where doesn't it come up?

Did you tick the box:
QuoteShow on Topic View: (This is important if you want the icon to appear)
"There is no god, and that's the simple truth. If every trace of any single religion were wiped out and nothing were passed on, it would never be created exactly that way again. There might be some other nonsense in its place, but not that exact nonsense. If all of science were wiped out, it would still be true and someone would find a way to figure it all out again."
~Penn Jillette – God, NO! – 2011

theguise

Sorry, wouldn't let me post this as a new topic. Another neat feature you can add in topic view profile fields for twitter is the ability to have the Twitter Hovercard appear when someone mouses over the twitter icon.  It's pretty easy to do this.

1. Register for an application on Twitter Developer at Twitter @Anywhere.

2. It will give you a code to use, but this is the one that you want to use for this feature.  Place it somewhere in your "index.template.php" file, but somewhere where the rest of the heading codes are.  Just remember to input your own developer id.
echo '
<script src="http://platform.twitter.com/anywhere.js?id=YOUR DEVELOPER ID&amp;v=1">
  </script>
<script type="text/javascript">

  twttr.anywhere(function (T) {

    T(".section").hovercards({
      username: function(node) {
        return node.alt;
      }
    });

  });

</script>'


3.  Now create a profile field with icons, asking the user just to input their Twitter Username.  And for the "Show Enclosed Within Text" option place this image code.
<img class="section" src="http://PATH TO YOUR IMAGE/twitter.png" alt="@{INPUT}" width="18" height="18" />

You're finished.  Now, if one of your members inputs their Twitter Username in the applicable field when editing their profile or registering, you can place your cursor over the Twitter image in topic view and it will display their Twitter Hovercard, pretty neat feature.  I'm not allowed to attach images so you'll have to find your own twitter image, just remember to change the width and height values in your <img> statement.

~DS~

Thank you for sharing. Will add in my first post.

Updated first post with Twitter Hovercard. :)
"There is no god, and that's the simple truth. If every trace of any single religion were wiped out and nothing were passed on, it would never be created exactly that way again. There might be some other nonsense in its place, but not that exact nonsense. If all of science were wiped out, it would still be true and someone would find a way to figure it all out again."
~Penn Jillette – God, NO! – 2011

theguise

oops forgot to add: When the twitter application process asks for your Callback URL I found it best to leave out the "www." It was giving me an error when I had originally input this, upon changing it to http://mysite.com it worked. 

P.S. you can delete this post after you read it, but just thought you may want to include it as a note possibly.

~DS~

Quote from: theguise on July 26, 2010, 04:33:18 PM
oops forgot to add: When the twitter application process asks for your Callback URL I found it best to leave out the "www." It was giving me an error when I had originally input this, upon changing it to http://mysite.com it worked. 

P.S. you can delete this post after you read it, but just thought you may want to include it as a note possibly.
Thanks. :)
I wonder what Application Website is...? The url of our forum or..?

And no I can't delete it, only the moderators can.
"There is no god, and that's the simple truth. If every trace of any single religion were wiped out and nothing were passed on, it would never be created exactly that way again. There might be some other nonsense in its place, but not that exact nonsense. If all of science were wiped out, it would still be true and someone would find a way to figure it all out again."
~Penn Jillette – God, NO! – 2011

Advertisement: