Problem/Motivation

In the olivero theme, teaser images show up as circle icons regardless of image style settings.

Steps to reproduce

Proposed resolution

Any way to override this default?

Remaining tasks

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet

CommentFileSizeAuthor
#3 3527807-issue.png154.49 KBsd9121

Comments

ccbelcher created an issue. See original summary.

cilefen’s picture

cilefen commented
Issue tags: -images, -olivero

What is a circle icon?

sd9121’s picture

sd9121 commented
StatusFileSize
new 3527807-issue.png154.49 KB

I have investigated the issue and confirmed that in teaser view, the uploaded images are displaying as circular icons, regardless of the image style settings. This is due to the following CSS rule in the Olivero theme's teaser.css file:

.teaser__image img {
  width: var(--sp3-5);
  height: var(--sp3-5);
  object-fit: cover;
  border-radius: 50%;
}

This rule forces the images into a circular shape by setting both the width and height to var(--sp3-5) and applying a border-radius of 50%. These styles override the configured image styles for teaser view.

cilefen’s picture

cilefen commented

I looked into the history of that theme's development and concluded that the rounded image is an intentional design choice.

ccbelcher’s picture

ccbelcher commented

Ha! That is a very distinct look that is not appropriate for anything much beyond user profiles in my opinion. I strongly suggest reconsidering the decision.

Thank you for researching the issue.

It appears at present I have two options:

1. Create a new display mode for the content type, bypassing the teaser, or
2. Commenting out that part of the css.

Any guidance on what the best practice might be?

Thanks again.
-Chris

ccbelcher’s picture

ccbelcher commented

Creating a new display mode seems the easiest workaround.

Cheers,
-Chris

quietone’s picture

quietone commented
Status: Active » Closed (works as designed)

@cilefen, thanks for looking in the history of this behavior.

Since @ccbelcher, has kindly provided a solution and there has been no discussion for 8 months I am closing this.

The Drupal Core issue queue is not the ideal place for support requests. The 'support request' option is there for filing support issues for contributed modules and themes. There are several support options listed on our Support page, including the Drupal Forums and Drupal Answers. There is also Drupal Slack. You may get better replies in one of those places.

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.