Display UserPhoto in "Menu"

chjohan

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

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

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

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

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

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

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

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

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

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!

mcu_hq

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

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

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

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

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

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

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

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

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

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

    <?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.)