Question re: Icon Sizes & Thumbnails

[Kami]

Forum URL: tarptest3.freemessageboards.com

^^;' Sorry if this is in the wrong place, haven't been on Support in a while and I'm not sure where everything goes anymore.

Is there a way to edit the thumbnails for your icons? Currently, using a non-square icon leaves a lot of white space to the top/bottom or left/right of the icon in thumbnails. I've fixed up my site so that people can use long icons, but the thumbnails on the view profile page / quote bar look odd.

If not, are there any plans to add in the future?

[Brian]

Hi, Kami.

Which icons are you referring to?

[Kami]

Sorry, to be more specific, I'm referring to Avatars.

[Brian]

For the sake of saving time from searching, can you link me to a thread where the avatars are showing incorrectly, and tell me exactly what needs to be changed?

The smaller versions of avatars should have their own CSS class assigned to them to edit, so it should be a pretty easy fix.

[Kami]

It's not that they're showing incorrectly, I was just curious if we would be able to edit the "thumbnail" version of the icon. If you look at the view profile page for my account [here], since my icon is taller than it is wide, I have a lot of empty space on the left & right of the icon, and my icon looks really small, unlike a member whose icon is square.

I was wondering if we could edit the thumbnails of our icons (like on facebook, for example), to show a square image regardless of our icon's dimensions.

[Brian]

CSS could be used to stretch the image to those dimensions, but if you're looking to retain the image's dimensions, it's also possible to get rid of that empty space.

For the profile pages specifically, adding this to the bottom of Themes > Advanced Styles & CSS > Style Sheet will get rid of the empty space around the avatar.

.show-user .float-left .avatar-wrapper.avatar_size_medium { width: auto; }

Each avatar is surrounded by a wrapper which defaults to the maximum width of that particular avatar size. So setting that width to auto should remove that.

[Kami]

Hm, I see. That did it, but not quite what I was after. I was hoping there'd be a way to make thumbnails 100x100 (or some other square measurement), regardless of what actual dimensions the icon was (so if I have a long icon, I could choose a square cropping of that for the thumbnails).

Thank you though, that will have to do for now.

[Brian]

Are you looking to crop the image or do you want to stretch it to meet the 100x100 dimensions (and if so, horizontally, vertically, or both)? Either of those should still be possible.

Edit: You could try this. I think it'll work, if I'm understanding you correctly.

.show-user .float-left .avatar-wrapper.avatar_size_medium { height: 100px; width: auto; }
.show-user .float-left .avatar-wrapper.avatar_size_medium img { max-width: 100%; max-height: 100px; height: 100px; }

[Brian]

Did you catch my last edit? I edited the post, like, 4 times so if you got one of the older ones, sorry about that.

The last edit should make all images 100px high at all times and remove the excess width from any of them. If the image is square and scaled to 100px, it'll be in the same box shape as the avatar of the member you linked.

Edit: Bye, other Kami post.

[Kami]

Hm. It looks like it just made the icon bigger, rather than cropping. I was looking a bit more for something like this:



Where my icon is long, but the "thumbnail" is square.

[Brian]

This is the best I've got.

.show-user .float-left .avatar-wrapper.avatar_size_medium {
    display: block;
    height: 100px;
    overflow: hidden;
    width: auto;
}
.show-user .float-left .avatar-wrapper.avatar_size_medium img {
    max-height: none;
    max-width: 100px;
}

If you prefer the empty space, you can change the green bit to 100px instead.

[Kami]

;x Sorry about that dood, I meant to delete that post before you replied but alas, crappy internet.

Looks like that worked, though I might just have to edit icons to be square since I've got floating head syndrome going on. xD Thanks for the help!

D'you know if there'd be any way for v5.x to include a thumbnail thingy? I realise this isn't your area but... idk :X

[Brian]

Aug 25, 2013 16:05:54 GMT -8 Kami said:

;x Sorry about that dood, I meant to delete that post before you replied but alas, crappy internet.

Looks like that worked, though I might just have to edit icons to be square since I've got floating head syndrome going on. xD Thanks for the help!

D'you know if there'd be any way for v5.x to include a thumbnail thingy? I realise this isn't your area but... idk :X

I've marked this thread as a potential feature request.

No promises on anything, though, since we have a pretty well established avatar system already.

[Kami]

's cool, 's cool, thanks for the mark thingy. For now I'll just go back to square icons, or deal with it xD;'