Support Forum

Icon size in the topic view

AT Alex T
Alex T
Member

How can I change the icon (I have the user’s avatars there instead) to be the full size of the spacing the column?

For instance:

I want this to look like this:

I want that icon to be the full size of that available box.  

17 Answers

New Answer

IK Ike
Ike
Member

Hey Alex,

I’m not sure this is ever going to be 100% achievable.. The reason I say that is the entire forum row height is dependant on the content – for example multiple lines of text and multiple status icons could push the forum row height taller than that of your avatar.

Either way there’s two things you can do. Number one is to remove the padding from the first column, something like:

#spMainContainer .spForumTopicSection .spIconColumnSection {
    margin: 0;
}

That alone should do what you want it to. I’m fairly sure you have a child theme in place from memory – just add the above to the end of your child theme stylesheet.

The other thing you could do to try and make sure the avatar always reaches the edge of the column top and bottom would be to increase the size of the avatar itself, although I understand that is probably not a desirable fix.

Give the CSS fix a try and see how it works for you.

AT Alex T
Alex T
Member

Ike said
Hey Alex,

I’m not sure this is ever going to be 100% achievable.. The reason I say that is the entire forum row height is dependant on the content – for example multiple lines of text and multiple status icons could push the forum row height taller than that of your avatar.

Either way there’s two things you can do. Number one is to remove the padding from the first column, something like:

<br />
#spMainContainer .spForumTopicSection .spIconColumnSection {
    margin: 0;
}
<br />

That alone should do what you want it to. I’m fairly sure you have a child theme in place from memory – just add the above to the end of your child theme stylesheet.

The other thing you could do to try and make sure the avatar always reaches the edge of the column top and bottom would be to increase the size of the avatar itself, although I understand that is probably not a desirable fix.

Give the CSS fix a try and see how it works for you.

Yea, I know that this sizing changes due to the what’s included.  I was hoping that there is way to automatically change that icon to fit in somehow…  

I’m going to try and add this now.  

AT Alex T
Alex T
Member

It works but looks a little off due to sizing.  If I wanted to change the icon size there to compensate, let’s say 70px, what would I add?  Here’s what the code looks like in the forumviewdesktop template.

# Column 1 of the topic row
# ———————————————————————-
sp_ColumnStart(‘tagId=spColForum1&tagClass=spIconColumnSection spLeft&width=0&height=0px’);
/*sp_TopicIndexIcon(‘tagClass=spRowIcon spLeft’);*/
sp_UserAvatar(‘tagClass=spRowIcon spLeft&context=user’, $spThisTopic->first_user_id);
sp_ColumnEnd();
sp_InsertBreak(‘tagClass=groupBreak’);

# Column 2 of the topic row

IK Ike
Ike
Member

Try adding:

#spMainContainer .spForumTopicSection .spIconColumnSection .spRowIcon {
    width: 70px;
}

The biggest problem here is that the columns are all sized by percentages. If you were to automatically change the height of an icon to fit whatever column height is availalbe, maintaining aspect ratio the width would also change, which would in turn change every column after that making that row appear out of line with all the others.

AT Alex T
Alex T
Member

How can I force all the avatars there to scale to 75px even if they are 50px?  75px seems to be the best size to fill that area.

I have the images changes in topicview per this thread: https://simple-press.com/support-forum/sp5-general-topics/avatars-in-topic-view/

YS Yellow Swordfish
Yellow Swordfish
Member

It might depend on the source of the avatars.

In the forum admin > profiles > avatars you can set the maximum size but that probably only applies to gravatars and the like. Uploaded avatars will almost certainly show smaller if they are, indeed, smaller.

But give that a try first. You may need to change the template call for avatars to really force it. You will need a child theme for that.

AT Alex T
Alex T
Member

I changed this in the template:

sp_ColumnStart(‘tagId=spColForum1&tagClass=spIconColumnSection spLeft&width=0&height=0px’);
/*sp_TopicIndexIcon(‘tagClass=spRowIcon spLeft’);*/
sp_UserAvatar(‘tagClass=spRowIcon spLeft&context=user&size=75px’, $spThisTopic->first_user_id);
sp_ColumnEnd();
sp_InsertBreak(‘tagClass=groupBreak’);

# Column 2 of the topic row

I added the user&size=75px, but this will only change the avatars there to the larger size only if they are already larger than the 50px.  I can’t figure out how to make the rest to scale to 75px.  

AT Alex T
Alex T
Member

I tried adding this css rule after I added the rule up above in the template, but it didn’t work.  I guess I don’t have the rule correctly specified.  

#spMainContainer .spForumTopicSection .spPostUserAvatar img { 
 width: 75px; 
}
YS Yellow Swordfish
Yellow Swordfish
Member

Looking at the code as I have now been able to do it does look like we do not make any attempt to scale up an image that is smaller that the one you specify. The width you specify is treated as a max-width.

Of course this is really the right thing to do as scaling up images is not a great idea and also puts some strain on the browser page loading.

AT Alex T
Alex T
Member

Ike said
Did you try adding the CSS I posted up there in Post #5?

Yes, but it didn’t scale.

The one that says admin is a 70px avatar.  The one below is 50px.  

AT Alex T
Alex T
Member

Yellow Swordfish said
Looking at the code as I have now been able to do it does look like we do not make any attempt to scale up an image that is smaller that the one you specify. The width you specify is treated as a max-width.
Of course this is really the right thing to do as scaling up images is not a great idea and also puts some strain on the browser page loading.

This is already being done inside the topic view.  We set this up previously: https://simple-press.com/support-forum/sp5-general-topics/avatars-in-topic-view/

YS Yellow Swordfish
Yellow Swordfish
Member

So if what you want to do once worked then it should still do so as we have done nothing to change the CSS or code around avatars. And we do not touch child themes during upgrades of course.

But I repeat what I said above AND what I said in that thread. The size argument in the avatar template function only sets a max-width rule not a width rule.

Bit if I add a width rule to:

#spMainContainer .spTopicPostSection .spPostUserAvatar img

and set the profile > avatars > width to the same size then I do get bigger avatars.

AT Alex T
Alex T
Member

Yellow Swordfish said
So if what you want to do once worked then it should still do so as we have done nothing to change the CSS or code around avatars. And we do not touch child themes during upgrades of course.
But I repeat what I said above AND what I said in that thread. The size argument in the avatar template function only sets a max-width rule not a width rule.
Bit if I add a width rule to:
#spMainContainer .spTopicPostSection .spPostUserAvatar img
and set the profile > avatars > width to the same size then I do get bigger avatars.

That is working in the topic post section.  I’m trying to do this the forum view section.  The section where you select you want to read.