Display UserPhoto in "Menu"

chjohan · April 2012

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.

peregrine · April 2012

In the continuing saga you can see which works best for you the one above or this one, if any.

<?php
$Session = Gdn::Session();
if ($Session->IsValid()) {
if(isset($Session->User->Photo)) {
$User = UserBuilder($Session->User);
echo UserPhoto($User, array('LinkClass'=>'','ImageClass'=>'ProfilePhotoSmall')) ; 
    }
 }

mcu_hq · 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.

UnderDog · April 2012

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 :-)

chjohan · April 2012

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

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!

chjohan · April 2012

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?

chjohan · April 2012

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_hq · 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;

peregrine · 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;
    }

mcu_hq · 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 · April 2012

that's why you're the developer!

mcu_hq · 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.

peregrine · 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;
}

mcu_hq · 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.

chjohan · April 2012

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:

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

            <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!

peregrine · 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'=>'')) ;
      }
 ?>

chjohan · April 2012

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>

peregrine · 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'=>''));
     }
    ?>

peregrine · 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;
                }

chjohan · April 2012

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?

chjohan · April 2012

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

peregrine · 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.)

Display UserPhoto in "Menu"

Best Answer

Answers