Adding an edit link (hover preferably) to profile pictures

Posted by glarsch on June 11, 2010 at 2:53pm

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.

Comments

Hi, the image on the user

Posted by vasi1186 on June 12, 2010 at 7:00am

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.

I tried your code, but it

Posted by drupalina on September 17, 2010 at 6:26pm

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

----------------------------------------------------------------
Πλαστικός Χειρουργός

Few thoughts

Posted by Michelle on June 12, 2010 at 2:17pm

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

-----
_{Shell Multimedia - My sporadically updated mostly Drupal blog.}

I literally, and entirely

Posted by Jay Matwichuk on September 17, 2010 at 6:33pm

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:

<?php
(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();
                }
            );
        });
    };
})();
?>

Full-time freelancer, always looking for work.
jaypan.com (my portfolio)

could you attach the module?

Posted by drupalina on September 25, 2010 at 2:52am

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.

----------------------------------------------------------------
Πλαστικός Χειρουργός

I'm sorry, I'm more than

Posted by Jay Matwichuk on September 25, 2010 at 3:50am

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.

Full-time freelancer, always looking for work.
jaypan.com (my portfolio)