Rounded images in AJAX-based team view deformed (dimensions forced with CSS)

[orfin]

Hello,

somehow team images presented in AJAX-based team view (slideout) are deformed. Strangely enough, Uplift wants team images in 170x170px format but doesn’t use square image versions (thumbnails) – instead, an original image is being used and conformed to required dimensions with CSS.

This squishes images which originals aren’t in square format.

Upon quick inspection I found out this CSS:

.sf-team-ajax-container .profile-image-wrap img {
    width: 170px;
    height: 170px;
    border-radius: 50%;
    margin-bottom: 30px;
}

But the original image dimensions (being used in img tag) are 300 x 382 px which makes the img look out of proportion as it’s forced to 170x170px by CSS.

Why doesn’t Uplift use square thumbnails in team view? I’d really like to use this view but it looks awful at the moment.

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Hi,

This is how it looks in our demo.
https://www.dropbox.com/s/k9dvqqavp18yrko/Screenshot%202017-03-30%2015.16.40.png?dl=0

Can you provide us your site url in a private reply so we can have a look?

-Rui

[orfin]

This reply has been marked as private.

[Rui Guerreiro – SUPPORT]

Guess the image should be square like the one that is displaying fine (1920 × 1920)
Will forward that situation of using a larger image to the development team.

-Rui

[orfin]

Thanks. Will you get back to me with dev team’s response?

I believe that the same method should be used for displaying rounded images as it’s currently applied to grid – simply smaller image variants cropped to square format. Perhaps another add_image_size() function with 170×170 px will be necessary.

[Rui Guerreiro – SUPPORT]

Of course, we will reply but it can take some time, that image resize adjustment is something that the dev team will have to analyse and schedule among the other developments.

-Rui

[Swift Ideas – Ed]

Hi @orfin,

Currently, we don’t have a specific size for square, so this would be something you’d need to add to use that solution. We’ve added the option to filter the thumb image size for the next plugin update.

Alternative options would be altering the display of the image, so that it’s always circular and the current size, but the image can be taller (overflow is hidden) – happy to hear your thoughts?

– Ed

[orfin]

Hello,

happy to hear about the update. Any ETA?

The second solution would work but the image would require a wrapper of required final size on which the rounded corners would be applied and not on the img itself. However, the img is place inside .inner-wrap, which works as a container for both the image and the name which won’t work for this case. Either way would require modifying the templates which I’d rather not do (as I’ll have to remember about them in future updates).

Or perhaps there’s some other CSS trick I’m not aware of.

[Swift Ideas – Ed]

We are prepping updates currently, would be next few days. I think we’ll do the 2nd option built-in, makes the most sense!

– Ed

[orfin]

Awesome, let’s wait for the update then.

[Swift Ideas – Ed]

Update will be in the next 24 hours or so.

Thanks,

– Ed

[orfin]

Last update fixed my problem, thanks.

[David Martin – Support]

Thanks Ed – marking as resolved.

If you have found the theme/support useful, we appreciate it if you can leave feedback on our item if you have the time as it really helps us out.

Thanks.