How to add small user avatar in .portal_mod_news widget?

Minha questão:

Hi everyone! Is there a way to add and retrieve small members user avatar inside the portal news mod widget? Everytime I try to add it, it never appears!

Please, I need some assistance.

---

Endereço do meu fórum:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Versão:
PunBB

Yes, it's possible.

But, give me some infos before we can proceed, ok?


What you trying to do? A widget to just show the member avatar, or you will retrieve more infos about it? And, do you understand something of Javascript?

waghcwb escreveu:Yes, it's possible.

But, give me some infos before we can proceed, ok?


What you trying to do? A widget to just show the member avatar, or you will retrieve more infos about it? And, do you understand something of Javascript?

What I am trying to do is add the forums members avatar to the news portal widget. Meaning whenever a user post NEWS there avatar will appear along with the topic.

I'm sure you are familiar with IP Content, which is exactly what I am trying to accomplish? And yes I do understand javascript, what's most important is that whenever I try to capture the forum users ava. image it never appears. 


 Here's an example below : 



BEFORE


[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]





AFTER



[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Here is one example

Código:

$(function(){
    
    // Post author
    $('.mod_news .author strong').each(function(){
        
        // Get the username
        var username = $(this).text();
        // Save this object out of ajax request 
        var oThis = $(this);
        
        // Get (Ajax) request
        $.get('/memberlist?mode=username&order&username=' + username + '&submit=1', function(data){
            
            // Get the user avatar based on a search in the memberlist page
            var avatar = $('.gen img', data).attr('src');
            // Build the structure
            var structure = '<img class="some_class_for_style_" src="' + avatar + '" alt="Avatar">';
            
            // Insert the avatar
            oThis.parents('.mod_news').find('.main-head').prepend(structure);
            
        });
        
        
    });
    
});

The problem is: If you make too many requests in a short time, you will get an Request Limit alert. So, to avoid this, i recomend you to configure your widget to display only 5 notices on the portal, to avoid RL's.

waghcwb escreveu:
The problem is: If you make too many requests in a short time, you will get an Request Limit alert. So, to avoid this, i recomend you to configure your widget to display only 5 notices on the portal, to avoid RL's.

I figured since it's revolving around ajax, which is usually tricky to work with.

Also does this require .css? Because this what I am getting once I plugged in the feature. Take a look at this!

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

The CSS is only for style purposes...

Can you give me access to an account on your forum? I wanna test the code on it

Yes of course! Sent, via PM. Did you need administrative access as well for the demo account?

Okay, i'm logged in.

Can you please remove the actual script for me? I don't want any script making conflicts x.x

I already know what is doing your "bug"... I just wanna make some adjustments...

Just to save it...:

Okay, the script is now removed. Do you believe that it's another javascript interfering with "this" script?

I think not...

Here is the functional script

Código:

$(function(){
   
    // Post author
    $('.mod_news .author strong').each(function(){
       
        // Get the username
        var username = $(this).text();
        // Save this object out of ajax request
        var oThis = $(this);
       
        // Get (Ajax) request
        $.get('/memberlist?mode=username&order&username=' + username + '&submit=1', function(data){
           
            // Get the user avatar based on a search in the memberlist page
            var avatar = $('.ipsUserPhotoLink img', data).attr('src');
            // Build the structure
            var structure = '<img class="some_class_for_style" src="' + avatar + '" alt="Avatar">';
           
            // Insert the avatar
            if (oThis.parents('.mod_news:first').find('.main-head .some_class_for_style').length) return;
                oThis.parents('.mod_news:first').find('.main-head').prepend(structure).stop(true);
           
        });
       
       
    });
   
});

Take a look to this class ".some_class_for_style" use this to style the avatar (make it smaller, and so on..) and if you change the class to another, don't forget to change both classes.

Here:

Código:

var structure = '<img class="some_class_for_style" src="' + avatar + '" alt="Avatar">';

And here:

Código:

if (oThis.parents('.mod_news:first').find('.main-head .some_class_for_style').length) return

It works! Awesome work as usual. I tried to add a border to the avatar, but no luck. Any suggestions? I've tried this code below, but nothing worked.

 border-style: solid;
    border-color: #ff0000 #0000ff;


As you see I gave you credit on our homepage below! Take a look.

[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Thank you

And, the code to add a border is not working because you doing that wrong..

Here is one example
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Take a look on the code..

Código:

<img src="http://r17.imgfast.net/users/1717/45/34/10/avatars/517-83.jpg" class="mini-avatar">

Código:

.mini-avatar {
  width: 30px;
  height: 30px;
  padding: 1px;
  background: #fff;
  box-shadow: rgba(0,0,0,.5) 0 0 5px;
  /* Here, this is the code for the border */
  border: #000  1px solid;
}

Read this
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Developer.mozilla.org is a great resource, I should brush up on my script knowledge. lol.

Also, wonderful, it worked, now I see what I was doing wrong I forgot to add padding, and box-shadow. 

One last thing before this is solved, you've been so patient and helpful, I want to style the news widget box into a more sleek look. How would I go about doing so?

Yes, MDN is an amazing place

And, about news widget box what you have in mind? I can help you

waghcwb escreveu:Yes, MDN is an amazing place

And, about news widget box what you have in mind? I can help you

Thank you! 

Right!, lol and LGForums told me that csscode was a good place to start as well for basic coding knowledge as well.

For the news widget box, I want this type of effect. Nothing too overpowering with lots of edit, but just a redesign of the widget box to make it look more "news like". Any ideas? Is it possible to add .css to the portal widgets? I've tried a few times, and they never load, or maybe the .css for the portal widgets needs to be in the forums .css template.

Example below : 

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Hmm, do you know what is the template to edit this modules? I can do all the stuff with scripts, but i think this is not necessary...

And, that image on the screenshot, it is a topic preview? Or just an image posted on the topic?

Meanwhile, try this

Código:

.some_class_for_style {
    width: 40px;
    height: 40px;
    padding: 1px;
    background: #fff;
    box-shadow: rgba(0,0,0,.5) 0 0 5px;
    border: #000 1px solid;
    margin-right: 1em;
}

.module p.comments {
    font-size: 1.1em;
    text-align: right;
}

.body {
    overflow: hidden;
}

.body a[href*="/n"] {
    background: #78a2c0;
    color: #fff;
    padding: .3em 1em .1em;
    text-decoration: none;
    border-radius: 3px;
    cursor: pointer;
    border-bottom: rgba(0,0,0,.5) 3px solid;
    margin: .5em 0;
    float: right;
}

.mod_news .author {
    padding: .5em;
}