HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS, which is now in beta. ocPortal 9 will be superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


Thumbnail tempcode?

Login / Search

 [ Join | More ]
 Add topic 
Posted
Rating:
#105570 (In Topic #20588)
Avatar

Fan in action

What tempcode can be used to generate a thumbnail url?

I'm trying to make the standard chat room look more like IRC. I got it pretty well situated, but when I tried to add a thumbnail of the chatters profile picture (not the avatar) next to the chatters post...well, it's been a good 10 hours straight at the keyboard, and I can't figure it out. The tutorial mentions all sorts of things that sound good, but don't actually work in this particular template. If anyone knows how to get the url of the user's thumbnail, let me know.

Here's the source I've started with that makes chat look more like chat:

Code


<div style="border:0px;" class="{+START,IF,{OLD_MESSAGES}} {+END}">
 
{+START,IF,{$NOT,{SYSTEM_MESSAGE}}}
<div style="display:inline-block;width:100%">
{+START,IF_NON_EMPTY,{URL_OF_USER_PIC_THUMBNAIL}}
<img style="height:20px;" src="{URL_OF_USER_PIC_THUMBNAIL}" />
{+END}
{+START,IF_EMPTY,{URL_OF_USER_PIC_THUMBNAIL}}
<img style="height:20px;" src="http://example.com/themes/default/images/background_image.png" />
{+END}
 
<span class="chat_message_by{+START,IF,{STAFF}} chat_operator_staff{+END}">{!BY_SIMPLE,{USER}}</span> <span class="horiz_field_sep associated_details">({TIME*})</span> {STAFF_ACTIONS} {MESSAGE}</div>
 
 
 
{+END}
 
{+START,IF,{SYSTEM_MESSAGE}}
<blockquote style="color: {FONT_COLOUR'}; font-family: {FONT_FACE|}"><strong>{MESSAGE}</strong></blockquote>
 
<div><span class="chat_message_by{+START,IF,{STAFF}} chat_operator_staff{+END}">{!BY_SIMPLE,{!SYSTEM}}</span> <span class="horiz_field_sep associated_details">({TIME*})</span></div>
{+END}
</div>


Right where it says {URL_OF_USER_PIC_THUMBNAIL} is where I need something like {PHOTO_URL} or {PHOTO_THUMB_URL} or something that points to the url of the users profile picture thumbnail. 

Here's one possible issue: the thumbnail can not be for the global Current user--otherwise it will turn all chatters thumbnails into the same thumbnail, no matter which chatter is looking at the chat room.

Any ideas?
Back to the top
 
Posted
Rating:
#105571
Avatar

Ok there's a convoluted way to do it.

So, by default, the CHAT_MESSAGE template does display avatars. Often people don't want avatars on the site, just photos – uninstalling the ocf_member_avatars addon results in all spots for avatars having photos automatically put there instead.

But, assuming you do want both avatars and photos on the site, it's just in this case you want the photo not the avatar, this should work…

Code

{$SET,photo,{$PHOTO,{$MEMBER,{$STRIP_TAGS,{USER}}}}}
{+START,IF_EMPTY,{$GET,photo}}
   {$SET,photo,{$IMG,no_image}}
{+END}
<img src="{$THUMBNAIL*,{$GET,photo},100}" />

It's a little convoluted for 3 reasons…
  1. There's no member ID passed into the template. There is a link to the member, so we can strip this back to the username, then convert that to a member ID. I actually just altered the v10 code so we'll pass a member ID in in v10.
  2. We get the photo, but it will be a big one, so we need to generate an on-the-fly thumbnail for it.
  3. Before we generate the thumbnail, we must consider it could be unset for a member, so in which case we'll use the 'no_image' theme image and thumbnail that down.





Last edit: by Chris Graham


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Back to the top
 
Posted
Rating:
#105579
Avatar

Fan in action

That code helped me to display thumbnails to chat. So the current chatter makes a post, and the photo and their text is posted to the chat room. That works well! But maybe I broke something somewhere else, because if member A makes some posts and their photo (Photo A which correlates to Member A) is displayed next to their post (so good so far), and then loges out, then Member B logs in and makes a post, what happens is ALL of the photos are that of member B. In fact, all of the photos next to the logged-in Member will correlate to that member, and not to the Member that actually posted something in history. 

So somewhere before this Template is a mechanism for storing the context of the chat, so that when a Member logs in to chat, they have a brief history of what happened.

The last problem I have to solve is this: ALL of the posts in the history (when you join the chat room) display the current Member's photo, not the photo's of the historic Member posts. This is probably the responsibility of some PHP file that called CHAT_MESSAGE.tpl
Back to the top
 
Posted
Item has a rating of 5 (Liked by Guest)  
Rating:
#105580
Avatar

Fan in action

Got it! Thanks Chris for the help. If anyone wants to start making their chat room look more like IRC, this code is a good start. The file that actually prints the chat room posts is CHAT_MESSAGE.tpl and this is a picture of result of this modified code.

Code


<div style="border:0px;" class="{+START,IF,{OLD_MESSAGES}} {+END}">
 
    {+START,IF,{$NOT,{SYSTEM_MESSAGE}}}
        <div style="display:inline-block;width:100%">
 
   {+START,IF_NON_EMPTY,{$PHOTO,{$MEMBER,{$STRIP_TAGS,{USER}}}}}
       <img style="height:20px;" src="{$PHOTO,{$MEMBER,{$STRIP_TAGS,{USER}}}}" />
            {+END}
 
            {+START,IF_EMPTY,{$PHOTO,{$MEMBER,{$STRIP_TAGS,{USER}}}}}
                <img style="height:20px;" src="{$IMG,no_image}" />
            {+END}
 
            <span class="chat_message_by{+START,IF,{STAFF}} chat_operator_staff{+END}">{!BY_SIMPLE,{USER}}</span> <span class="horiz_field_sep associated_details">({TIME*})</span> {STAFF_ACTIONS} {MESSAGE}</div>
 
    {+END}
 
    {+START,IF,{SYSTEM_MESSAGE}}
        <blockquote style="color: {FONT_COLOUR'}; font-family: {FONT_FACE|}"><strong>{MESSAGE}</strong></blockquote>
        <div><span class="chat_message_by{+START,IF,{STAFF}} chat_operator_staff{+END}">{!BY_SIMPLE,{!SYSTEM}}</span> <span class="horiz_field_sep associated_details">({TIME*})</span></div>
    {+END}
</div>

​​
 
Back to the top
 
There are too many online users to list.
Control functions:

Quick reply   Contract

Your name:
Your message: