Please upgrade here. These earlier versions are no longer being updated and have security issues.

Display UserPhoto in "Menu"

chjohanchjohan New
edited April 2012 in Vanilla 2.0 - 2.8

I wish to display the users' avatar/userphoto/profilepicture on the left side in the top menu if the user is logged in. I would also like the profilepicture to be a clickable link to the users' profile page.

Is this something that can be done in vanilla/themes/(my_theme)/views/default.master.php? Where do I begin?

Thank you for your time.

«13

Comments

  • mcu_hqmcu_hq yippie ki-yay Arizona, USA ✭✭✭
    edited April 2012

    Like this?

    In the traditional plugin , you can extract the code that I used to create that. I made it into a module that you should be able to copy/paste into your own plugin.

    However, I have yet to find a way to actually order the side menu, so sometimes it may appear below other things.

    aerychjohan
  • UnderDogUnderDog Moderator

    mcu_hq said:
    However, I have yet to find a way to actually order the side menu, so sometimes it may appear below other things.

    Ooohw, that's an interesting side-discussion, maybe for the documentation too :-)

  • Yes, almost like that, mcu_hq.
    But how do I get the picture to show in the top menu, as I have illustrated below?

    1155277

    I will try to look into your suggested solution with the traditional plugin, but is there not a more straight forward, "simple" way to call the Profile picture?

    Thank you for your answers!

  • UPDATE

    I have now managed to output the users' avatar and username using the following code from the traditional plugin. Thank you, mcu_hq!

           <div>
                <?php $Session = Gdn::Session();
            if ($Session->IsValid()) {
                  echo Img(Gdn_Upload::Url(ChangeBasename($Session->User->Photo, 'p%s')), array('width' => '37px', 'height' => '37px')); }?>
            </div>
    
        <div><?php echo $Session->User->Name ?></div> 
    

    I placed the code in my vanilla/themes/(mytheme)/views/default.master.php around line 13.
    After the <h1><a class="Title>...</a></h1>
    and before:

        <?php
                          /*$Session = Gdn::Session();*/
                            if ($this->Menu) {
                                $this->Menu->AddLink('Dashboard', T('Dashboard'), '/dashboard/settings', array('Garden.Settings.Manage'));
                                // $this->Menu->AddLink('Dashboard', T('Users'), '/user/browse', array('Garden.Users.Add', 'Garden.Users.Edit', 'Garden.Users.Delete'));
    

    Hope this solution helps others with the same problem.

    Now I have a new question for you. How do I make the user avatar and the echo'ed username link to the user profile page?

  • Also the user avatar gets compressed if it's not in proportion ( a * a)/ 48px * 48px.
    Is there a way to show the thumbnail of the user?

  • mcu_hqmcu_hq yippie ki-yay Arizona, USA ✭✭✭
    edited April 2012

    chjohan said:
    Also the user avatar gets compressed if it's not in proportion ( a * a)/ 48px * 48px.
    Is there a way to show the thumbnail of the user?

    yes, I was going to reply to your original one when I'm home. I will give you better code that will solve both of your issues.

    Don't use this: echo Img(Gdn_Upload::Url(ChangeBasename($Sessio.....

    If the user does not have an image, or if you are using Gravatar, you will run into issues. I'll show u in a little bit.

    To create a link to their profile, simply add something like Anchor($User->Name, 'profile/'.$User->ID'/'.$User->Name)

    Also, check out this:

    $Configuration['Garden']['Thumbnail']['Width'] = 90;

  • peregrineperegrine MVP
    edited April 2012

    does this work for you? my once and only attempt. The Anchor(.... above will anchor the name.

    a similar photo function, but this won't give you the larger size you want.
    another shortcut is UserPhoto($User->Name);

    the one below will give you any size clickable photo you want.

       $PhotoUrl = Gdn_Upload::Url(ChangeBasename($Session->User->Photo, 'p%s'));
    
                echo   '<a title="'.htmlspecialchars($User->Name).'" href="'.$Href.'"'.$LinkClass.'>'  .Img($PhotoUrl, array('alt' => htmlspecialchars($User->Name), 'class' =>"ProfilePhotoMenu")) .'</a>';
    
    
    add a ProfilePhotoMenu class in css
    with your width and height that you want.
            .ProfilePhotoMenu {
    
            height: 37px;
            width: 37px;
        }
    

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

    422
  • mcu_hqmcu_hq yippie ki-yay Arizona, USA ✭✭✭
    edited April 2012

    try this:

    <?php if(isset($Author->Photo)){ $Author->Photo = Gdn_Upload::Url(ChangeBasename($Author->Photo, 'p%s'));} echo UserPhoto($Author, array('LinkClass'=>'','ImageClass'=>''))?>

    Use this if you need a thumbnail that is larger than 42px. For anything else, use the class, ProfilePhotoSmall/Medium/Large as the ImageClass and no need to prepend the 'p'.

    peregrine
  • that's why you're the developer!

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • mcu_hqmcu_hq yippie ki-yay Arizona, USA ✭✭✭
    edited April 2012

    AFter looking at your code above, I think you need to always use UserPhoto to avoid the case that the user does not have a photo. This function will call UserPhotoDefaultUrl if the property $User->Photo does not exist.

  • peregrineperegrine MVP
    edited April 2012

    the only thing I was trying to get around was the specific width and height that didn't seem to match the 3 defined classes - small med large . But I like yours less typing.
    although come to think of it css probably could based on some parent in the menu page, whatever that may be.

    e.g.
    div or some thing.ProfilePhotoLarge
    {
    height: 37px;
    width: 37px;
    }

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • mcu_hqmcu_hq yippie ki-yay Arizona, USA ✭✭✭
    edited April 2012

    peregrine said:
    the only thing I was trying to get around was the specific width and height that didn't seem to match the 3 defined classes - small med large . But I like yours less typing.
    although come to think of it css probably could based on some parent in the menu page, whatever that may be.

    e.g.
    div or some thing.ProfilePhotoLarge
    {
    height: 37px;
    width: 37px;
    }

    You can, which is what the main style sheet does for you when in pass in that class.

    You can also just change the thumb size in your configuration to avoid using the very large image:
    $Configuration['Garden']['Thumbnail']['Size']

    mine defaults to 50, and I needed to use a thumbnail of 96px, so instead of changing the default thumb size to 100px or so, I just use the uploaded image and resize in CSS. This word work for me locally, but I would have to tell people to change their configuration to have theirs not look stretched....and hence just hardcoding in the 'p'.

    Does anyone know how to fix the profile page loading the user image? It does not display anything if they use Gravatar or none at all.

    peregrine
  • mcu_hq said:
    try this:

    <?php if(isset($Author->Photo)){ $Author->Photo = Gdn_Upload::Url(ChangeBasename($Author->Photo, 'p%s'));} echo UserPhoto($Author, array('LinkClass'=>'','ImageClass'=>''))?>

    Use this if you need a thumbnail that is larger than 42px. For anything else, use the class, ProfilePhotoSmall/Medium/Large as the ImageClass and no need to prepend the 'p'.

    Thank you for your reply.

    I replaced

     <?php $Session = Gdn::Session();
                if ($Session->IsValid()) {
                      echo Img(Gdn_Upload::Url(ChangeBasename($Session->User->Photo, 'p%s')), array('width' => '37px', 'height' => '37px')); }?>
    

    with

    <?php if(isset($Author->Photo)){ $Author->Photo = Gdn_Upload::Url(ChangeBasename($Author->Photo, 'p%s'));} echo UserPhoto($Author, array('LinkClass'=>'','ImageClass'=>''))?>

    And nothing showed. My whole menu and content disapeared.

    Isn't the **<?php $Session = Gdn::Session(); if ($Session->IsValid()) {... **required to check if the user is logged in? This was my code before the replacement:

                <div id="MenuUserName"><?php echo $Session->User->Name ?></div>        
    
                        <?php
                              /*$Session = Gdn::Session();*/
                                if ($this->Menu) {
                                    $this->Menu->AddLink('Dashboard', T('Dashboard'), '/dashboard/settings', array('Garden.Settings.Manage'));
    

    And now after the replacement:

           <div id="MenuProfilePicture" class="image_wrapper">
    <?php if(isset($Author->Photo)){ $Author->Photo = Gdn_Upload::Url(ChangeBasename($Author->Photo, 'p%s'));} echo UserPhoto($Author, array('LinkClass'=>'','ImageClass'=>''))?>
                  <div class="topleft"></div>
                  <div class="topright"></div>
                  <div class="bottomleft"></div>
                  <div class="bottomright"></div>
                  </div>
    
        <div id="MenuUserName"><?php echo $Session->User->Name ?></div>        
    
                <?php
                      /*$Session = Gdn::Session();*/
                        if ($this->Menu) {
                            $this->Menu->AddLink('Dashboard', T('Dashboard'), '/dashboard/settings', array('Garden.Settings.Manage'));
    

    Sorry, I'm new to Vanilla and needs to get this explained step by step. Which code to be replaced etc.

    Thank you for your replies guys!

  • peregrineperegrine MVP
    edited April 2012

    Did you try it with session statements in? I beleieve it may have been missing a semi-colon after the echo.

    A quick scan probably this might work. I haven't tried it, but it looks like it will execute what was suggested.
    This might be easier for you to understand written this way.
    All statements end in semi-colon and alll php statements must be inside php tags.

    <?php
          $Session = Gdn::Session();
          if ($Session->IsValid()) {
                if(isset($Author->Photo)) { 
                $Author->Photo = Gdn_Upload::Url(ChangeBasename($Author->Photo, 'p%s'));
                } 
           echo UserPhoto($Author, array('LinkClass'=>'','ImageClass'=>'')) ;
          }
     ?>
    

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • I have now tried your latest suggestion with no success. The user thumbnail just won't show.

                       <div id="MenuProfilePicture" class="image_wrapper">
                    <?php
                    $Session = Gdn::Session();
                    if ($Session->IsValid()) {
                    if(isset($Author->Photo)) {
                    $Author->Photo = Gdn_Upload::Url(ChangeBasename($Author->Photo, 'p%s'));
                    }
                    echo UserPhoto($Author, array('LinkClass'=>'','ImageClass'=>'')) ;
                    }
                    ?>
                              <div class="topleft"></div>
                              <div class="topright"></div>
                              <div class="bottomleft"></div>
                              <div class="bottomright"></div>
                              </div>
    
  • peregrineperegrine MVP
    edited April 2012

    So , the menu and content still disappeared? Or are you saying thank you the menu and content re-appeared and I still have the problem with the avatar displaying.

    post your entire code, I don't know where you are. and post an image of what you get.

    if it is the User why are you using $author???? try this.

     <?php
        if ($Session->IsValid()) {
         if(isset($Session->User->Photo)) {
          $User->Photo = Gdn_Upload::Url(ChangeBasename($Session->User->Photo, 'p%s'));
          }
          echo UserPhoto($User, array('LinkClass'=>'','ImageClass'=>''));
         }
        ?>
    

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • peregrineperegrine MVP
    edited April 2012

    disregard previous message: this is corrected to get your session

          <?php
            $Session = Gdn::Session();
            if ($Session->IsValid()) {
             if(isset($Session->User->Photo)) {
                  $User->Photo = Gdn_Upload::Url(ChangeBasename($Session->User->Photo, 'p%s'));
                  }
                  echo UserPhoto($User, array('LinkClass'=>'','ImageClass'=>''));
                 }
            ?>
    
    
                for a small photo
    
            echo UserPhoto($User,array('LinkClass'=>'','ImageClass'=>'ProfilePhotoSmall'));
    
    
        for a large photo
    
            echo UserPhoto($User, array('LinkClass'=>'','ImageClass'=>'ProfilePhotoLarge'));
    
    
    
        for a custom size photo photo
    
        echo UserPhoto($User, array('LinkClass'=>'','ImageClass'=>'ProfilePhotoCustom'));
    
                add a ProfilePhotoCustom class in css
    
                with your width and height that you want.
                    .ProfilePhotoMenu {
                    height: 37px;
                    width: 37px;
                    }
    

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

    chjohan
  • peregrine said:
    disregard previous message: this is corrected to get your session

    <?php > $Session = Gdn::Session(); > if ($Session->IsValid()) { > if(isset($Session->User->Photo)) { > $User->Photo = Gdn_Upload::Url(ChangeBasename($Session->User->Photo, 'p%s')); > } > echo UserPhoto($User, array('LinkClass'=>'','ImageClass'=>'')); > } > ?>


    for a small photo

    echo UserPhoto($User,array('LinkClass'=>'','ImageClass'=>'ProfilePhotoSmall'));


    for a large photo

    echo UserPhoto($User, array('LinkClass'=>'','ImageClass'=>'ProfilePhotoLarge'));



    for a custom size photo photo

    echo UserPhoto($User, array('LinkClass'=>'','ImageClass'=>'ProfilePhotoCustom'));

    add a ProfilePhotoCustom class in css

    with your width and height that you want.
    .ProfilePhotoMenu {
    height: 37px;
    width: 37px;
    }

    Thank you. Now the user avatar appears correctly in the menu.
    Just one little problem: When I click the avatar, it directs me to "http://localhost/vanilla/index.php?p=/profile/0". and I get the "Page not found" message from Vanilla. The correct destiniation for the link is supposed to be "http://localhost/vanilla/index.php?p=/profile/". How do I fix this?

  • My code now looks like this (in vanilla/themes/(mytheme)/views/default.master.php) :

    <?php
    $Session = Gdn::Session();
    if ($Session->IsValid()) {
    if(isset($Session->User->Photo)) {
    $User->Photo = Gdn_Upload::Url(ChangeBasename($Session->User->Photo, 'p%s'));
    }
    echo UserPhoto($User, array('LinkClass'=>'','ImageClass'=>'ProfilePhotoMenu'));
    }
    ?>
    
  • peregrineperegrine MVP
    edited April 2012
        <?php
        $Session = Gdn::Session();
        if ($Session->IsValid()) {
           if(isset($Session->User->Photo)) {
             $User->Photo = Gdn_Upload::Url(ChangeBasename($Session->User->Photo, 'p%s'));
             $plink = "/profile/" . $Session->User->UserID . "/" . $Session->User->Name;
             echo '<a href="/vanilla/index.php?p=' . $plink . '"/>' ;
             echo ' <img class ="ProfilePhotoSmall" src="' . $User->Photo . '"/>';
          } 
       }
    
     ?>
    

    I don't know if above will show avatars, gravatars, vanillaicons but it should show userphoto. If this doesn't solve your problem, you can probably break out the userphoto fucntion and copy into your theme and modify accordingly (you will see /profile/0 in the userphotos function it to show the profile in functions.render.php.)

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

Sign In or Register to comment.