How do you make the Profile icon clickable?

Allon Prooit Posted in Beginning Developers 8 months ago

Clickable Profile Icon?
This would be a nice addition to the the UI I think. Can you make it clickable like the text it's next to? Should be relatively easy to code. I'm more of a designer and a novice coder but have faired well this past year with the Premium OSSN 5.0 with excellent growth. Any help is surely appreciated!
See it here... 3NCIRCLE N37WORK

gb SzSocial Media Replied 8 months ago

Looks nice and modern.

gb Steven Downer Replied 8 months ago

Excellent looking customized theme.

Although the question is a valid one, it does have its disadvantages, as pointed out. For example, with any upgrades to core files, etc.

However, from a practical point of view, the "name" next to the user icon already has that feature as pointed out as is part of the OSSN files as default, no change required, except perhaps by a colour scheme which can be done with STYLER component and the colour scheme hardcoded in STYLER if required.

As to the actual question of making the User icon clickable, the biggest drawback to that is that these icons may not necessarily be unique to users. USERNAMES are unique, so if the site has DISPLAY USERNAMES active then you will get unique usernames that can...maybe...have several users with the same icon... If I use an image that is freely available on the internet and someone else does the same with the same image, but we both have different usernames, then I can see that may cause confusion.....

It is just a thought as we use USERNAMES for that very reason, as it is unique and the name can be clicked on and not the icon, so you must consciously click on the name, which is unique, to get to the profile.

Just our thoughts, as we had thought of this a while back but dismissed it.

Cool theme never-the-less.

us Allon Prooit Replied 8 months ago

Ha ha! Figured this one out too!
Inside of the OssnWall component...

Line 29 is
<div class="meta">
<img class="user-img" src="<?php echo $params['user']->iconURL()->small; ?>" />

Change it to this...
<div class="meta">
<a href="<?php echo $params['user']->profileURL(); ?>">
<img class="user-img" src="<?php echo $params['user']->iconURL()->small; ?>" /></a>

and voila! All the wall post profile icons will now take you to the users profiles!!!

us Allon Prooit Replied 8 months ago

Now on to the next challenge!How to make the post icon clickable?

us Bryce alvord Replied 8 months ago

That is certainly one way to go about it but believe me, when a version update happens you will kick yourself for making source code changes on core components or core files because they will all go bye bye. The path you took is definitely better in terms of if it were going to be merged into source code in upcoming versions but the way I suggested will make it a long lasting change that will work for you using the homefreelancer css/js component. I would just hate to have you go through losing changes, same with your cool theme changes. Please just for your own sake get your current setup created as a personal theme (don't share it of it's based on premium) so that you don't lose your hard work on a version upgrade.

us Allon Prooit Replied 8 months ago

Actually figured it out just a moment ago...
Inside of the OssnProfile component

Line 15 is
<div class="newseed-uinfo">
<img src="<?php echo ossnloggedinuser()->iconURL()->small; ?>"/>

Change it to this
<div class="newseed-uinfo"><a href="<?php echo ossnloggedinuser()->profileURL(); ?>"><img src="<?php echo ossnloggedinuser()->iconURL()->small; ?>"/></a>

and voila! The profile icon is now clickable!!!

us Bryce alvord Replied 8 months ago

That color scheme is seriously freaking awesome, I'm jealous. Why have you not created a dark theme for us my friend, you obviously have the eye for it! I couldn't design something ugly on a good day!

Regarding your question, the right way to do this is to add the homelancer css/js component, this will allow you to add custom js to the head of every page you load. Then add a simple onclick event listener with the function taking you to the user url for your given user. That's all pseudo code but I can actually write something for you if that's what you need when I get home, just let me know.