[SOLVED] Displaying an image as a link for a weblink field; any ideas?

What I'd like ot do is create a weblink field for a user to input their Twitter URL, and on the field display in their profile, have an icon displayed instead of the field title or data. In other words have a field in the profile that displays like this:



and when you click on it, it opens the url in the weblink field. (the image you are seeing here is already coming from the site, so if it helps at all, the URL is:

artsandliteracy.com/templates/shape5_vertex/images/twitter.png )

Is this possible within the CB framework or can anyone suggest a work around if it isn't?

Thanks for your time.

Very doable with a delimiter field with substitutions. Example as follows.

The above ensure cb_twitterusername has a value. It then uses it to construct the URL around your image. More on substitution usage can be found in the below tutorial.

www.joomlapolis.com/support/tutorials/107-use-cases/18353-using-substitutions-throughout-cb

My god, you're quick!

I kept looking and was starting to realize that I could probably do this with a delimiter field and just as I was going to look it up, I got an email notification for your reply. So, is mind reading going to be part of CB 2.0 and this is the beta? :lol:

Thanks; this is exactly what I was looking for and further underscores the power of delimiter fields. I'm getting a further appreciation for them.

Thanks again!

I wanted to elaborate on how I did this step by step to help someone else as it is a really good way to
understand the power of delimiters and conditionals. Also I changed it up a little as I decided I could have
all the social icons on a single line with a little effort.

The first thing I did was create a field for the user id for each of the services I wanted to support.
I'm using Twitter, LinkedIn and GooglePlus on this site (no Facebook, but the procedures would be the same).
I went to each site and determined where the unique user id was in each URL. Then I created three simple text
fields:

cb_gplusid
cb_twitterusername
cb_linkedinid

On each of these fields, the options were set to:

Required?: NO
Show on Profile?: NO
Display field title in Profile?: NO
User Read Only?: NO
Show at Registration?: NO (This is applicable only to my situation, you can set it to yes if you want to capture this info on registration).

I also used the description area to explain to the user how to figure out what they need to put in the field and how to find it on the service; for instance, for Linked In, I used the following description:

Enter the Linked in ID. You can find this on your Linked In profile header under your picture.
Enter ONLY the ID; in the example: www.linkedin.com/in/yourusername/ , the ID would be "yourusername"

Next, I created the delimiter field to display the icons I have in my template that correspond to each service. Kyle showed us how to use conditionals and field
substitutions to construct the Twitter URL in the preceding post, so I just extended what he showed us.
In the description area (which is where you put your code or conditional statements for delimiter fields) I put the following:

(It's important that you put this in your delimiter field's description area without any returns so that it displays on ONE line.)

Required? Set to NO
Show on Profile?: Set to YES, on 1 line
Display field title in Profile?: Set to NO
User Read Only?: Set to YES
Show at Registration?: Set to NO

I wanted these to show under the avatar, so I before I saved the delimiter field, I set it to show on the PROFILE TAB.

Now, if a user doesn't have anything in their Twitter, GooglePlus or LinkedIn ID fields, nothing displays.
But if they do, then the appropriate icon for that service displays and linking on it takes you to their profile!

Very cool way to use both delimiters and field substitutions; hopefully this step by step approach will make it a
bit easier to understand.

BTW, if you are unable to locate icons for your social links, I found a great free selection in an email newsfeed I just received a few minutes ago:

Social Icons Collection

(I've been getting a lot of help here and I'm trying to give back - that's what open source is all about, right? )

follow up question... First, this works very well.

The question:
When a user deletes the contents of the field, the image is still shown. So it's a once-in-a-lifetime change..
Any ideas what to do to the empty the field?