Octobercms - Getting frontend user avatar

3
votes

So i'm trying to gererate a frontend user list, but i'm having trouble reaching the avatar url.

i'm able to get all user names but when i try to do the same with the profile picture the fallback is shown. The {{ user.avatar.url }} is working on the user page when someone is signed in.

I've tried to look for the query used on the backend to get the user avatar on the preview, but i was not able to find it.

I don't know if this is relevant but i'm using https://octobercms.com/plugin/netsti-uploader for frontend users to upload their avatars. It's working since if i upload it on the frontend the backend user preview shows the right avatar

This is what i am using to get all users:

CODE:

use October\Rain\Auth\Models\User;

function onInit() {
    $this['activatedUsers'] = User::whereIsActivated(true)->get();
}

MARKUP

<div>
{% for user in activatedUsers %}
    <div class="card list">
        {% if user.avatar %}
            <img class="userimg" src="{{ user.avatar.url }}">
        {% else %}
            <img class="userimg" src="assets/images/user.png">
        {% endif %}
            <p class="name"><span class="rank-title">NAME</span><br>{{ user.name }}&nbsp;{{ user.surname }}</p>
        {% if user.last_login %}
            <p><span class="rank-title">LAST UPDATE</span><br>{{ user.last_login }}</p>
        {%endif%}
    </div>
{% endfor %}

All help is appreciated, thanks

4
phpoctobercmsavatar

4 Answers

4
votes

try to use it like that.

use RainLab\User\Models\User;

function onInit() {
    $this['activatedUsers'] = User::whereIsActivated(true)->get();
}

Markup

{% for user in activatedUsers %}
    <div class="card list">
    {{ user.avatar.path }}
    </div>
{% endfor %}
1
votes

Have a look at October\Rain\Database\Attach\File class to see available methods :

getThumb($w,$h,$options) - Generates and returns a thumbnail path

getPath() - Returns the public address to access the file

getLocalPath() - Returns a local path to this file. If the file is stored remotely,it will be downloaded to a temporary directory.

getDiskPath() - Returns the path to the file, relative to the storage disk

e.g :

{{user.avatar.getThumb(200,200, { mode : 'crop' } )}}

0
votes

install "Frontend File Uploader for Model" plugin

insert {% component 'imageUploader' %} in your markup

insert 

function onInit()
{
    $user = Auth::getUser();
    if($user){
        $component = $this->addComponent(
            'NetSTI\Uploader\Components\ImageUploader',
            'imageUploader',
            ['modelClass'=>'RainLab\User\Models\User','modelKeyColumn'=>'avatar', 'deferredBinding' => false]
        );

        $component->bindModel('avatar', $user);
    }
}

on your code section

0
votes

You can query the backend user model with with 'avatar'.

use Backend\Models\User;

...
$user = User::where('id', $author_id)->with('avatar')->first();
...

<h1>{{ user.avatar.path }}</h1>