XF 1.5 Attachment Thumbnail proportional non-crop css?

[island]

Has anyone modified the css for the attachment section which appears on a post so as not to crop the thumbnail but instead maintain its proportions within the square? For example, the attached by default crops the face off in xenforo.

Stock photo used to illustrate photo credit: Fashion image created by Nensuria - Freepik.com

 

[island]

Would prefer to get it to show up like this.

 

[Chris D]

There's a class on the images in the template. I think it's SquareThumb or similar.

Edit the template and remove that class and it should prevent them from being square. It might require some further CSS tweaks though.

 

[island]

Thank you!

That got me to a workable solution. Very much appreciated!
I removed the one instance of SquareThumb from the attached_files template, and then
removed the /2 in attached_files.css

<xen:set var="$attachThumbSize">{xen:calc 'min(100, {$xenOptions.attachmentThumbnailDimensions} / 2)'}px</xen:set>
<xen:set var="$attachThumbSize">{xen:calc 'min(150, {$xenOptions.attachmentThumbnailDimensions})'}px</xen:set>

If thumbnail size is different than 100 pixels, change 100 to thumbnail size (e.g. 150 or 200) as well in the line above.
This results in attachments being shown more like vb3 from which I'm importing with no cropping or squishing.

I previously tried and failed this afternoon to get thumbs to scale proportional via css by simply editing the .attachment .thumbnail .SquareThumb css property -- probably need to adjust the attached_files template to add a container div to get width or height auto; to scale properly across chrome/firefox/edge if I wanted to constrain dimensions yet not crop or stretch. Happy enough with the above, but may revisit later if I want a different attachment table look. Thanks again!

 

[Tom McIntyre]

The "standard" approach to this problem is to use a "bounding box" where one identifies the larger of the two dimensions in the image and scales that dimension to the size of the box with proportional scaling.

That approach and the "centroid" approach where the smaller dimension is scaled to the size of the bounding box and the larger dimension is cropped are the only two reasonable approaches to forming a square thumbnail in my opinion.

It appears that the default in XenForo is the centroid but I expected to see an option for one or the other.