2.0.X - Userprofile Image alt="username userpicture" integration

phreak · February 2015

Hi all,

I have a pretty side issue for an old Vanilla, but still its important. I'd like to add an alt-Tag to every userimage uploaded on the userprofile page. This alt-tag should hold the username and the word userpicture.

I wandered trough the files but i'm not clear how Vanilla is creating the image or at least this alt tag.

Can anyone point me to a solution, thanx.

R_J · February 2015

I guess you need to copy that file to your theme:

https://github.com/vanilla/vanilla/blob/2.0/applications/dashboard/views/modules/userphoto.php

phreak · February 2015

Hi R_J, thanx i found the file also. But i don't know how the implementation of an alt-Tag would work here.

Thanx
phreak

R_J · February 2015

The function Img takes an "attributes" argument, so that you could use it like that:

<?php
    if (StringBeginsWith($this->User->Photo, 'http')) {
        echo Img($this->User->Photo, array('alt' => $this->User->Name.' userpicture'));
    } else {
        echo Img(Gdn_Upload::Url(ChangeBasename($this->User->Photo, 'p%s')), array('alt' => $this->User->Name.' userpicture'));
    }
?>

It might be enough to save the modified version into /themes/yourtheme/modules/view/userphoto.php but I'm not sure about that.

phreak · February 2015

Works like scientific. Thaaanx!

phreak · February 2015

@R_J: Coudl help me out a 2nd time. This time i found out that the ALT-Tags is also missing in 2.1. I tried a little around and it looks like variables have changed as doesn't work anymore.

'alt' => $this->User->Name.' userpicture'

Thanx for help.

vrijvlinder · February 2015

The alt tag houses the name of the user in 2.1 it is there. Not missing.

phreak · February 2015

@vrijvlinder: Not on the Profile Page.

vrijvlinder · February 2015

Because it is linked to change profile picture editor not the profile. I think the image serves as a place holder more than anything else. It uses Id not name...

<a href="/forum/profile/picture?userid=1" class="ChangePicture"><span>Change Picture</span></a>

vrijvlinder · February 2015

I think the last comment does what you want. I tested it and it works.

vrijvlinder · February 2015

Actually this worked for me to add an alt

if ($Photo) {
?>
   <div class="Photo PhotoWrap PhotoWrapLarge <?php echo GetValue('_CssClass', $User); ?>">
      <?php
      if (IsUrl($Photo))
         $Img = Img($Photo, array('class' => 'ProfilePhotoLarge','alt'=>'UserImage'));
      else
         $Img = Img(Gdn_Upload::Url(ChangeBasename($Photo, 'p%s')), array('class' => 'ProfilePhotoLarge','alt'=>'UserImage'));

      if (!$User->Banned && C('Garden.Profile.EditPhotos', TRUE) && (Gdn::Session()->UserID == $User->UserID || Gdn::Session()->CheckPermission('Garden.Users.Edit')))
         echo Anchor(Wrap(T('Change Picture')), '/profile/picture?userid='.$User->UserID, 'ChangePicture');

      echo $Img;
      ?>
   </div>
<?php } else if ($User->UserID == Gdn::Session()->UserID || Gdn::Session()->CheckPermission('Garden.Users.Edit')) { ?>
   <div class="Photo"><?php echo Anchor(T('Add a Profile Picture'), '/profile/picture?userid='.$User->UserID, 'AddPicture BigButton'); ?></div>
<?php
}

this is the result

<img src="http://www.vrijvlinder.com/forum/uploads/userpics/392/pOERLIYVR58Z0.jpg" class="ProfilePhotoLarge" alt="UserImage">

vrijvlinder · February 2015

If you want the name of the user to be the ALT use this

<?php if (!defined('APPLICATION')) exit();
$User = GetValue('User', Gdn::Controller());
if (!$User && Gdn::Session()->IsValid()) {
   $User = Gdn::Session()->User;
}

if (!$User)
   return;

$Photo = $User->Photo;
//get user name for the alt
$Name = $User->Name;

if ($User->Banned) {
   $BannedPhoto = C('Garden.BannedPhoto', 'https://images.v-cdn.net/banned_large.png');
   if ($BannedPhoto)
      $Photo = Gdn_Upload::Url($BannedPhoto);
}

if ($Photo) {
?>
   <div class="Photo PhotoWrap PhotoWrapLarge <?php echo GetValue('_CssClass', $User); ?>">
      <?php
      if (IsUrl($Photo))
         $Img = Img($Photo, array('class' => 'ProfilePhotoLarge','alt'=>$Name));
      else
         $Img = Img(Gdn_Upload::Url(ChangeBasename($Photo, 'p%s')), array('class' => 'ProfilePhotoLarge','alt'=>$Name));

      if (!$User->Banned && C('Garden.Profile.EditPhotos', TRUE) && (Gdn::Session()->UserID == $User->UserID || Gdn::Session()->CheckPermission('Garden.Users.Edit')))
         echo Anchor(Wrap(T('Change Picture')), '/profile/picture?userid='.$User->UserID, 'ChangePicture');

      echo $Img;
      ?>
   </div>
<?php } else if ($User->UserID == Gdn::Session()->UserID || Gdn::Session()->CheckPermission('Garden.Users.Edit')) { ?>
   <div class="Photo"><?php echo Anchor(T('Add a Profile Picture'), '/profile/picture?userid='.$User->UserID, 'AddPicture BigButton'); ?></div>
<?php
}

Result of this

<img src="http://www.vrijvlinder.com/forum/uploads/userpics/392/pOERLIYVR58Z0.jpg" class="ProfilePhotoLarge" alt="VrijVlinder">

phreak · February 2015

Thank you @vrijvlinder. I think this should go into the Core. Would you like to do a pull request?

vrijvlinder · February 2015

I am not sure I can do that not sure how, but if anyone else wants to do it go for it.

whu606 · February 2015

@phreak

From the announcement at the top of the page:

The 2.0 branch is no longer being updated.

phreak · February 2015

@whu606: It also targets 2.1. My SEO tool says that 5.000 profile pages with missing alt tags on the profile picture is not too god.

vrijvlinder · February 2015

@phreak said:
whu606: It also targets 2.1. My SEO tool says that 5.000 profile pages with missing alt tags on the profile picture is not too god.

I did not know not having this was detrimental to seo.

2.0.X - Userprofile Image alt="username userpicture" integration

Comments