By glarsch on

I am using imagecache profiles, author pane and panels on my site. Users are having a difficult time figuring out how to update their profile pictures. In a way to make it easier for them, I was hoping to add a link to the profile picture (on the "my account" page) that appears when they hover over the picture that sends them to the upload picture field on the edit profile page. Any ideas on how to do this? I'm not much of a programmer so I was hoping the community could help me out. I've searched all over for some way to do this but haven't had any luck.

Thanks.

⋅ Categories: Drupal 6.x

Comments

vasi1186’s picture

vasi1186 commented

Hi,

the image on the user profile is printed with a template, so you can add variables that are used in this template with a preprocess function. In your template.php file from your theme, add this function:

function yourthemename_preprocess_user_picture(&$variables){
  //Add the variable only if the user can edit his account.
  if (user_edit_access($variables['account'])){
    $variables['edit_link'] = the_link_for_edit_account;
  }
}

Then, you will have to overwrite the user-picture.tpl.php file that you find in user module. Copy the file in your theme directory, clear the theme registry cache (you can clear the cache from admin/settings/performance), and now in the user-picture.tpl.php file that you copied you will have access to the $edit_link variable. You will have to do something like this:

  if ($edit_link){
    print $edit_link;
  }

I am not a good css designer, so if you want that the link to appear on hover you will have to search the solution on the net :). I don't think it is too hard to do that...

Vasi.

drupalina’s picture

drupalina commented

I tried your code, but it returns a simple text "the_link_for_edit_account" everywhere where my picture appears.

Do we need to replace that text with some sort of a code?
I tried $variables['edit_link'] = '<a href="/user/me/edit#edit-picture-upload-wrapper"><?php print t(\'Edit picture\'); ?></a>'; , but that didn't work. Any ideas what might do the trick?

Thanks in advance

michelle’s picture

michelle
she/her
Primary language English
Location Wisconsin, USA
commented

I don't know how to do the hover thing, either, but I tested and if you go to "example.com/user/1/edit#edit-picture-upload-wrapper" it takes you to the right spot.

If you're using Author Pane, don't forget that it doesn't go through the normal theme_user_picture and has its own template.

Michelle

jaypan’s picture

jaypan
Location Victoria, BC
commented

I literally, and entirely coincidentally, did almost the exact same thing tonight. My link is to turn off avatars (for which I set up a path to take care of this), but it's essentially the same thing - a popup hover link.

Here's the javascript I used. It's late here (3am) and I need to sleep, so you'll have to figure out how to tweak it to your own specifications, but basically all you will need to do is add this to an external javascript file, change the name of the Drupal.behaviors.ahjModule to your own module name (replace ahjModule) and then change the a.href to the path where the edit page lives:

(function()
{
	Drupal.behaviors.ahjModule = function() // replace ahjModule with your own module name
	{
		$(".author-pane-inner").css("position", "relative").children(".picture").each(function()
		{
			var a = document.createElement('a');
			a.href = "some/href"; // add your own path here
			a.innerHTML = Drupal.t('Turn off avatars'); // change this to your own text
			$(this).prepend(a).children('a').css({'position' : 'absolute', 'display' : 'none', 'text-align' : 'center', 'margin' : '-11px 0 0 20px'}).end().hover
			(
				function()
				{
					$(this).children('a').fadeIn();
				},
				function()
				{
					$(this).children('a').fadeOut();
				}
			);
		});
	};
})();

Contact me to contract me for D7 -> D10/11 migrations.

drupalina’s picture

drupalina commented

Sorry Jay Matwichuk - your directions were not clear (maybe that's because I don't know javascript or how to create new modules). Would it be possible to attach your module as a tar.gz ?

Or would this be possible to be done on theme level by editing template.php and adding a separate js file to theme?

I know that http://drupal.org/project/block_edit module achieves the a similar effect for blocks. User hovers over a block and sees [Edit] link.

This would make for a cool little module for Drupal - especially if it works with Author Pane pictures. On my site only about 8% of users have uploaded their own avatars, and that's understandable: Drupal's interface is not very user-friendly to the end-user and the picture upload is hidden in the Account Setting, while every decent community site these days has this little functionality with a hoverable edit link for avatars.

jaypan’s picture

jaypan
Location Victoria, BC
commented

I'm sorry, I'm more than happy to provide guidance as to how to build something, but that's pretty much my limit.

I suggest spending a bit of time learning how to code modules, particularly since you posted in the module development section. The module developers guide is a good place to start and there is lots of good information there.

Contact me to contract me for D7 -> D10/11 migrations.

BeaPower’s picture

BeaPower commented

any updates?

jaypan’s picture

jaypan
Location Victoria, BC
commented

On what? It's all laid out above.

Contact me to contract me for D7 -> D10/11 migrations.

BeaPower’s picture

BeaPower commented

Is there a module that has been released that would make it easier to implement for D7?

Northern_Girl’s picture

Northern_Girl commented

Look at avatar uploader!

NG

Drupal in the snow