Adding Customer User Photos

Dont create your support topics here! No new topics with questions allowed!

Moderator: crythias

Forum rules
Dont create your support topics here! No new topics with questions allowed!
Post Reply
SuperDOS
Znuny newbie
Posts: 93
Joined: 17 Apr 2012, 16:16
Znuny Version: 6.0.3
Real Name: A!

Adding Customer User Photos

Post by SuperDOS »

Would like to share my solution for showing round pictures of our customer users in the customer information container.
To this to work you need to create a new theme and a new skin. Also needed is a path where customer user pictures are stored that match the userlogin. In our case we use the intranet and since we already store them with userlogin-namne i.e. 1234.jpg its very easy.

Create a new theme and make a copy of AgentCustomerTableView.tt and then modify it

right after:

Code: Select all

[% RenderBlockEnd("CustomerImageRealname") %]
    <div>
        <img src="[% Data.URL %]" />
    </div>
    [% RenderBlockEnd("CustomerImage") %]
add:

Code: Select all

<center>
<img class="UserPicture" src="http://URL TO WHERE IMAGES IS STORED/[% Data.UserLogin%].jpg" onerror='this.style.display = "none"'/>
</center>
I've added if the picture isn't found, it won't display anything there, if onerror is not used there will be a missing picture icon.

Now to get the circle effect we need to create a new skin. If you already have custom skin you just need to add this code to Core.Default.css else create a new Core.Default.css.

Code: Select all

 /* Border for CustomerUserPicture */	
img.UserPicture {
width: 120px;
height: 120px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
-ms-border-radius: 150px;
-o-border-radius: 150px;
border-radius: 150px;

}
here's how it looks.
Image

Hope someone finds it useful :)
redgodzilla
Znuny newbie
Posts: 9
Joined: 22 Apr 2016, 08:10
Znuny Version: OTRS 5.0.9
Real Name: Nikolay

Re: Adding Customer User Photos

Post by redgodzilla »

Hello i try your manual on OTRS 5.0.9 it doesn't work...

I add at AgentCustomerTableView.tt:
<center>
<img class="UserPicture" src="http://my.global.arc.com/User%20Photos/ ... res/GLOBAL_[% Data.UserLogin%]_LThumb.jpg" onerror='this.style.display = "none"'/>
</center>

And create a New Skin:
1. Create /opt/otrs/var/httpd/htdocs/skins/Customer/custom/css/Core.Default.css
and add your text:
/* Border for CustomerUserPicture */
img.UserPicture {
width: 120px;
height: 120px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
-ms-border-radius: 150px;
-o-border-radius: 150px;
border-radius: 150px;
}
2. Create .xml file:
and add it text:
/opt/otrs/Kernel/Config/Files/CustomSkin.xml
<?xml version="1.0" encoding="utf-8" ?>
<otrs_config version="1.0" init="Framework">
<ConfigItem Name="Loader::Agent::Skin###100-custom" Required="0" Valid="1">
<Description Translatable="1">Custom skin for the development manual.</Description>
<Group>Framework</Group>
<SubGroup>Frontend::Agent</SubGroup>
<Setting>
<Hash>
<Item Key="InternalName">custom</Item>
<Item Key="VisibleName">Custom</Item>
<Item Key="Description">Custom skin for the development manual.</Item>
<Item Key="HomePage">www.yourcompany.com</Item>
</Hash>
</Setting>
</ConfigItem>
</otrs_config>
3. make $OTRS_HOME/bin/otrs.Console.pl Maint::Config::Rebuild

In Agent interface I may select new skin "Custom" but in Customer information i don't see any changes, No foto or missing picture icon.
Maybe I missed something?
redgodzilla
Znuny newbie
Posts: 9
Joined: 22 Apr 2016, 08:10
Znuny Version: OTRS 5.0.9
Real Name: Nikolay

Re: Adding Customer User Photos

Post by redgodzilla »

Sorry all working!
Thanks!
wurzel
Znuny guru
Posts: 3218
Joined: 08 Jul 2010, 22:25
Znuny Version: x.x.x
Real Name: Florian

Re: Adding Customer User Photos

Post by wurzel »

Hi,

THIS is cool! THANKS! :)

Flo
OTRS 8 SILVER (Prod)
OTRS 8 auf Debian 11 (Test)
Znuny 7.x latest version testing auf Debian 11

-- Ich beantworte keine Forums-Fragen PN - No PN please

I won't answer to unfriendly users any more. A greeting and regards are just polite.
ruzzetto

Re: Adding Customer User Photos

Post by ruzzetto »

i tried! :)
the picture is displayed but not with circle effect
Post Reply