Avatar field ratio on details

[mrleblanc101]

• Laravel Version: 9.34.0
• Nova Version: 4.15.2
• PHP Version: 8.1
• Database Driver & Version: mariadb 10.4
• Operating System and Version: macOS 12.6
• Browser type and version: Chrome 105

Description:

The Avatar field when using ->rounded is not actually round on Details.
It default to the image ratio and apply a border-radius.
http://admin.local/resources/people/1/

But it is round on Forms with a static 1:1 ratio.
The behavior should be the same on both view.
http://admin.local/resources/people/1/edit/

[mrleblanc101]

Expected display on details page:

Need to add a wrapper with these class: bg-gray-50 relative aspect-square flex items-center justify-center border-2 border-gray-200 dark:border-gray-700 overflow-hidden rounded-full and move the style="max-width: 104px" to this wrapper.

[mrleblanc101]

Same issue when using ->squared()

[kichetof]

Same here! Seem to happened from 4.15 version

[mrleblanc101]

Why was this concerted to a discussion ? It's clearly a regression @crynobone

[mrleblanc101]

It's still a bug, tho ?

[crynobone]

All implemented feature request solves some sort of bug and I believe what's currently available is the expected behavior and not any type of regression (as mentioned above). Therefore, we would need to carefully consider any change.

To accept a regression would mean the form is wrong and we need to remove the 1:1 ratio.

[mrleblanc101]

Alright.
But I do think the 1:1 ratio is the correct behavior for avatar to display avatar.
The 1:1 ratio is also used when using Searchable.

And it make sense to use Image field instead if you dont want to display the image in a circle container.
So I would suggest correcting the index/details of the Avatar field.
This would only affect the display of the image, as the avatar field doesn't force a 1:1 ratio on upload.
Site using the Avatar data could still display the image using the original ratio or use contain/cover fill.

[mrleblanc101]

From what I understand the Avatar field is a wrapper for the Image field which only purpose is to be displayed in Searchable relation and being display in a Circle container (because that's how Avatar are normally displayed).

[kichetof]

Maybe add a new helper circle to force it to be completely round as before.

It seem that from the updated File field introduced in 4.15, the ratio is used to display avatar and impact the visual

[kichetof]

Please find the difference between 4.16.1 (same with 4.15) and 4.14.0: (same code, Avatar::make('Avatar'), only changed Nova version)

Nova 4.16.1
Index avatar should be fully-rounded, regardless of its initial ratio, according to the doc: Additionally, you may use the rounded method to display its thumbnails with fully-rounded edges

Nova 4.14.0
Index avatar is fully-rounded, as expected

[davidhemphill]

Made some tweaks to the Avatar and Image fields. In the next version, an aspect method will allow you to set the image's aspect ratio. Nova will not assume the aspect ratio by default, meaning your Avatar fields will not be presumed to be square.

use Laravel\Nova\Fields\Image;

Image::make('Image')
    ->indexWidth(70)
    ->detailWidth(300)
    ->rounded()
    ->aspect(Image::ASPECT_SQUARE)

The options available are:

• ASPECT_SQUARE
• ASPECT_AUTO

I've also added indexWidth and detailWidth methods to allow you to specify separate sizes for each view. It's important to note, maxWidth will override both of those for compatibility purposes, but is now null by default.

[kichetof]

@davidhemphill thanks for this update!

It could be great to define aspect on both view like width: indexAspect and detailAspect.
When the height of the image is too big, the height of the row become very high. Maybe add a possibility to set maxHeight?

To reproduce it, set an avatar with a ratio 3:2 or 3:1

ASPECT_VIDEO seems to be not present on 4.18.0 release, only ASPECT_SQUARE and ASPECT_AUTO