Mobile Viewport Member Avatars?

[ColinJM]

Hi All and Seasons Greetings 

I want to encourage my members to use Avatars. Many of them use mobile/cell phones for viewing the forum, which of course CSS suppresses the display of Avatars in mobile viewports.

Yes, I've read the different views on this is other threads but the css mod to responsive.css doesn't seem to tie in with my SMF 2.1.4 - SMF Default Theme Curve 2?

[Kindred]

Did you turn off minimize css?

[ColinJM]

Did you turn off minimize css?

I've just done that via Admin>General but nothing else - and avatar display is still off in smaller viewports?

[Aleksi "Lex" Kilpinen]

There's a chance that the browser still uses the old css from cache, try forcing a refresh with ctrl+f5 or emptying your temporary files. If that doesn't work, then you might want to use the developer console to see if the css change is actually there but just not working right for some reason.

[ColinJM]

Thanks Lex - but I've cleared the Chrome cache in both my both my Desktop and Android Mobile and both don't show the avatar.

Is there some CSS code I need to mod?

[Diego Andrés]

I believe @ColinJM is referring to the posts.

You can do this edit in the responsive.css file:

Code Select Expand

.user_info li,
.custom_fields_above_member {
display: none;
}

Code (Replace) Select Expand

.user_info li,
.custom_fields_above_member {
display: none;
}
.poster {
position: relative;
min-height: 55px;
}
.user_info li.avatar {
display: block;
position: absolute;
top: 0;
left: 0;
}
.user_info li.avatar::before,
.user_info li:first-child::before {
content: "";
display: none;
}
.user_info,
.poster h4 {
margin-left: 60px;
display: block;
}
.user_info li.avatar img.avatar {
height: 50px;
width: 50px;
object-fit: contain;
}

[ColinJM]

@Diego Andrés

AWESOME - Gold star sir - that did the trick !        

Thanks so much for the prompt help - love the support in here! 

[Bandicoot]

height: 50px;

width: 50px;

Great solution. Just what I was looking for.

Not all avatars are square, so I would use max-height and max-width to cater.

[Sesquipedalian]

Not all avatars are square, so I would use max-height and max-width to cater.

No, in this case that would be unhelpful. Using fixed dimensions and object-fit: contain, as @Diego Andrés rightly suggested above, will give the desired result.

[Bandicoot]

Oh, okay.

[Julius_2000]

height: 50px;

width: 50px;

Great solution. Just what I was looking for.

Not all avatars are square, so I would use max-height and max-width to cater.

You can indeed just use a fixed width and leave out the height. That would limit a none-squared image's space it can occupy but leaves its aspect ratio intact. I use a dynamic width with a calculation function so it would shrink/grow according to the screen width at certain values. The max width and height in SMF are 100px initially by default, as far as I can remember.


A different question that I have is: On our test forum, we also have a vanilla SMF Default theme and I can see that in index.template.php avatars on indexes should be enabled as per this code:

Code Select Expand

// Set the following variable to true if this theme wants to display the avatar of the user that posted the last and the first post on the message index and recent pages.
$settings['avatars_on_indexes'] = true;but they're not. No avatars are displayed behind latest posts neither on board- nor messageindex.

[Arantor]

That doesn't actually display them, that just loads the data so they could theoretically be displayed.

[Julius_2000]

That doesn't actually display them, that just loads the data so they could theoretically be displayed.

Ah ok. That's a little mean then . By its description I always thought you could display them with that.

[Diego Andrés]

It's indeed strange that it wasn't implemented by default, but still a nice feature that got constant requests back in 2.0.x days.

[Julius_2000]

So, is there a manual or something on how to get them in there then? Now that a SMF 3.0 version has been announced to come sooner than later which will require adaptations to existing themes, I was planning on starting from scratch perhaps with a vanilla default theme rather than a custom one. Our custom one had a few things in there that I'd like to avoid in the future.

[Diego Andrés]

You might need to start a new topic with those questions (or two topics?).

[cookdandbombd]

I believe @ColinJM is referring to the posts.

You can do this edit in the responsive.css file:

Code Select Expand

.user_info li,
.custom_fields_above_member {
display: none;
}

Code (Replace) Select Expand

.user_info li,
.custom_fields_above_member {
display: none;
}
.poster {
position: relative;
min-height: 55px;
}
.user_info li.avatar {
display: block;
position: absolute;
top: 0;
left: 0;
}
.user_info li.avatar::before,
.user_info li:first-child::before {
content: "";
display: none;
}
.user_info,
.poster h4 {
margin-left: 60px;
display: block;
}
.user_info li.avatar img.avatar {
height: 50px;
width: 50px;
object-fit: contain;
}

Thank you!  But this is not quite appearing correctly for me, perhaps cause of the "Avatars Display Integration" mod.  Any ideas?

[Diego Andrés]

It's not much different from your screenshot, I don't recall at the moment.
Try tweaking the code a bit:

Code Select Expand

.user_info li,
.custom_fields_above_member {
display: none;
}
.poster {
position: relative;
min-height: 55px;
}
.user_info li.avatar {
display: block;
position: absolute;
top: 0;
left: 0;
margin: 0;
height: auto;
line-height: 1;
}
.user_info li.avatar::before,
.user_info li:first-child::before {
content: "";
display: none;
}
.user_info,
.poster h4 {
margin-left: 60px;
display: block;
}
.user_info li.avatar img.avatar {
height: 50px;
width: 50px;
object-fit: contain;
}
.user_info li.avatar img.avatar {
height: 50px;
width: 50px;
object-fit: contain;
margin: 0;
}

[cookdandbombd]

It's not much different from your screenshot, I don't recall at the moment.

That's tidied it up nicely, thank you :-)