Suggestion: Round images used in Frontend should be square

Configuration Frontend
1

I am one of people who dislike an ~10 years old trend to use round avatars in Contacts, social networks etc.
The same approach is currently used in HA Frontend:

  1. Customize some sensors with an entity_picture attribute.
  2. Create an Entities card with these entities.
  3. You will see round images.

изображение
изображение698×126 8.21 KB

I just loathe these round images.
Sometimes an image represents some physical object like an equipment, a plant, …
And many objects are just not fitted into circular shape - unless scaled down or clipped:

original photo:
изображение

round photo:
Some important details are clipped:
12

scaled photo:
The only way to fit the image is to make it smaller.
And you get “blank” areas on the top/bottom/left/right sides - looking ugly:
13

Originally all images are of rectangular shape. Photos are taken with a natural “rectangular cropping” - sometimes they are just not supposed to be used as “round”.
Using a round crop causes:

  • loosing details - they are clipped;
  • loosing quality - you need to scale the image down.

This “round pictures” trend came from Apple on ~2014, and many companies (software dev, social networks etc) started using this trend.
Designers even started inventing 100500 reasons “why round images are better”.

When people have to use round pictures they have to PREPARE their images to be looking nice when rounded. I remember - when round avatars were introduced in social networks, people started changing their avatars because old pics were CLIPPED. Someone decided to EDIT our pictures. Someone decided that round is BETTER.

Home Assistant is supposed to give people a power upon their homes. Then why we need to overcome obstacles with adapting rectangular images to round borders?

I created this discussion:

The idea is to change a default style for a “state-badge” CSS element from the current “border-radius: 50%” to something like (vote for the last variant):

  • border-radius: 10%
  • border-radius: 4px
  • border-radius: var(--some-new-variable,10%)

The “state-badge” element is used in many cards like Entities, Logbook etc.
If some card has another element to keep an icon or an image, then the proposed change should be implemented to this element too.

This is how it works:
изображение

type: entities
entities:
  - entity: sensor.test_sensor_with_image
  - entity: sensor.test_sensor_with_image
    card_mod:
      style:
        hui-generic-entity-row$: |
          state-badge {
            border-radius: 10%;
          }

The “state-badge” is used to display an MDI icon if an entity has no “entity_picture” attribute specified.
Since icons have a transparent background, the new square shape will not cause any glitches but gives a more nice look for images.

Surely I could use a card-mod to specify a square shape in my cards. Even I could use a custom card-mod theme to apply this style in the whole Frontend.
But - unfortunately, I cannot use card-mod everywhere since currently it has some limitations (see card-mod issues on GitHub for details).

2 Likes