How can I use actual avatars instead of avatar thumbnails in discussion threads?

bchan009

Hi!

I'm very comfortable with editing CSS and HTML to style most parts of the forum using default.master.tpl. But from what I'm understanding, if I want to change anything else I need to develop plugins to do so...

I've tried following the tutorials but I'm not a terribly good programmer. All I want to do is use the full-size avatar from the user's profile page and use that in the 'MeBox'/Discussion/Message views. I don't want to use the auto-generated thumbnails that Vanilla uses by default. I plan to resize the original upload using CSS on my own. Basically I want to use 'ProfilePhotoLarge' anywhere 'ProfilePhotoMedium' is currently being used.

Any help would be really really appreciated!

R_J

As far as I know the image is the same and it is only a different CSS class. To my understanding if you only want to achieve that instead of "ProfilePhotoMedium" the style for "ProfilePhotoLarge" is used, it would be simply adding

.ProfilePhotoMedium {
   whatever is defined right now for ProfilePhotoLarge
}

to your custom.css

bchan009

I've uploaded my avatars as animated gifs. ProfilePhotoLarge is the un-resized file, and animates when shown on the page.

ProfilePhotoMedium is a resized thumbnail that Vanilla makes on its own. It doesn't use the original un-touched file. My GIF moves and has a clear background when ProfilePhotoLarge is used on the user profile page. The GIF is static and has a black background when ProfilePhotoMedium is used on discussion pages.

I'm looking for a way to call ProfilePhotoLarge in the markup instead of ProfilePhotoMedium. I've been told editing the raw php files is a bad way to go about doing this, so if you could help that would be great.

Once I learn how to make the forum call ProfilePhotoLarge every time, I can use CSS to resize/manipulate it any way I want.

Sorry if I wasn't clearer before -- thanks!

R_J

At first sight I would say you have to add a themehooks file to your thene which can be an empty class. Below that you should copy the function userPhoto() from /library/core/functions.render.php and change that.

In order to know what to do you would have to find out what is shown at which place. Maybe looking at the database and the table Gdn_User, searching for Photo and PhotoUrl could help.

I would have to take a closer look to be of any help, but right now I do not have the time. See what you can find out and maybe if you have detailed questions, I could give an answer sooner

Linc

If you just want to change it in discussions, you'll need to customize the view where it says userPhoto($first, ['Size' => 'Small']); to use userPhoto($first, ['Size' => 'Large']);.

If you always want to use the non-thumbnail, then do as @R_J says and customize userPhoto() by copying it to your themehooks file (below the class) and then modify the logic around the size check.

Currently:

        $size = val('Size', $options);
        if ($size) {
            $linkClass .= " PhotoWrap{$size}";
            $imgClass .= " {$imgClass}{$size}";
        } else {
            $imgClass .= " {$imgClass}Medium"; // backwards compat
        }

Possible new version:

        $linkClass .= " PhotoWrapLarge";
        $imgClass .= " {$imgClass}Large";

R_J

The user image is saved as e.g "userpics/869/7TE0L4XMZ7MM.jpg". Later on it is displayed in discussions as either:
example.com/uploads/userpics/869/n7TE0L4XMZ7MM.jpg
example.com/uploads/userpics/869/p7TE0L4XMZ7MM.jpg

where "n" is the thumb and "p" is the "normal" sized picture.

In the userPhoto() there is the following code

        if ($photo) {
            if (!isUrl($photo)) {
                $photoUrl = Gdn_Upload::url(changeBasename($photo, 'n%s'));
            } else {
                $photoUrl = $photo;
            }
        } else {
            $photoUrl = UserModel::getDefaultAvatarUrl($fullUser, 'thumbnail');
        }

Which will always return a thumbnail because
a) $photo is no url which causes Gdn_Upload::url(changeBasename($photo, 'n%s')); where the thumbnail "n" is prepended or
b) UserModel::getDefaultAvatarUrl($fullUser, 'thumbnail'); is called with the flag thumbnail

So the image which is fetched will always be the thumbnail...

I think you would have to copy the function and change:

                $photoUrl = Gdn_Upload::url(changeBasename($photo, 'n%s'));

to

                $photoUrl = Gdn_Upload::url(changeBasename($photo, 'p%s'));

and

            $photoUrl = UserModel::getDefaultAvatarUrl($fullUser, 'thumbnail');

to

            $photoUrl = UserModel::getDefaultAvatarUrl($fullUser);

---

@Linc:
UserModel::getDefaultAvatarUrl checks for the existence of a cutom function "UserPhotoDefaultUrl"
userPhoto() has ts own logic for creating the photoUrl without making use of the function userPhotoUrl()
userPhotoUrl() shares much code with userPhoto but it differs by not forcing the thumbnail when it uses UserModel::getDefaultAvatarUrl()

Wouldn't it make sense to make use of userPhotoUrl from inside userPhoto()?

vrijvlinder

To save the animated gif you need to add the save gif configuration in the conf.php

Linc

@R_J is correct, I musta been sleep-answering this morning.

Wouldn't it make sense to make use of userPhotoUrl from inside userPhoto()?

It would indeed.

bchan009

I'll try these suggestions and see how things go!

bchan009

Ok, so I found the code in question and made the modifications. But where does this new code go? I'm still confused as to how I can make Vanilla use the modified userPhoto() and userPhotoURL() functions.

Where do I paste the modified functions to make them override the ones in functions.render.php?

I've searched forums and Vanilla documentation and I don't really understand it.

bchan009

Here's what I have done so far...I'm not sure it's correct.

1) My theme folder is 'srk2'. I created a themehook file called 'class.srk2themehooks.php'. I placed this file in the theme root directory.
2) I took the userPhoto() and userPhotoURL() functions from 'functions.render.php' and pasted them into my themehooks file.
3) I modified them as suggested above. Uploaded to my server.

I'm not sure if that's how I'm supposed to be doing this, or if I'm doing something wrong. Nothing seems to be happening.

R_J

You can read about themehooks in the documentation

That file needs to look like

class Srk2ThemeHooks extends Gdn_Plugin {
    // There's no need to have code here
}

You need to copy the function userPhoto() from /library/core/functions.render.php (lines 1195 - 1258) at the end of the themehooks file, after the closing bracket.

Then change the two lines like I have advised above.

You also need to clear the theme cache! In this case it would be enough to delete /cache/theme/srk2.php
Only after you have deleted that Vanilla will "see" that you now have a themehooks file which needs to be included.

bchan009

Thank you very much for the help! Everything is working well now!