Image on article node sticks out into left margin

@joachim

I think this is related the design standard for the article node page. I see a class wide-content is added to the image parent div (might be intentionally), and as per design, this image is acting as a feature image which is outside of the container.

When I added a large image for article, it is looking good as page main image. sharing screenshot below. This is only my thought assuming Olivero article page design guideline.

theme screenshot for your reference

https://www.drupal.org/project/olivero →

I have update the CSS & added patch file, please review.

The Needs Review Queue Bot → tested this issue.

While you are making the above changes, we recommend that you convert this patch to a merge request → . Merge requests are preferred over patches. Be sure to hide the old patch files as well. (Converting an issue to a merge request without other contributions to the issue will not receive credit.)

I did wonder if this was by design.

But an image that's added with a Media reference field doesn't have the same styling. So there's an inconsistency there.

I have added MR for same, please review.

The Needs Review Queue Bot → tested this issue. It fails the Drupal core commit checks. Therefore, this issue status is now "Needs work".

This does not mean that the patch needs to be re-rolled or the MR rebased. Read the Issue Summary, the issue tags and the latest discussion here to determine what needs to be done.

Consult the Drupal Contributor Guide → to find step-by-step guides for working with issues.

This is due to design and it applies on banners with 100% width ob .hero__img img class. This class must be missing that's why your image is showing its original size instead of getting 100% width.
Solution : A global css can be used to make all the images center aligned for better alignment in case of small images.

> This is due to design and it applies on banners with 100% width ob .hero__img img class. This class must be missing that's why your image is showing its original size instead of getting 100% width.

This is on a fresh install with only the OOTB theme styling.

The .wide-content class is added via olivero_preprocess_field preprocess.

 if ($variables['field_type'] == 'image' && $variables['element']['#view_mode'] == 'full' && !$variables["element"]["#is_multiple"] && $variables['field_name'] !== 'user_picture') {
    $variables['attributes']['class'][] = 'wide-content';
  }

.

Removing .wide-content class from preprocess will make it look like this:

Raised MR for removing the code in .theme that adds .wide-content class to image

Don't see the research done in the issue summary. We can't just remove code without knowing why it was added in the first place.

This issue 📌 Olivero: Rename "wide-image" CSS class to "wide-content" Fixed can help us to understand why this was added

Just seeing this now. This is per the design (see https://www.figma.com/file/x5zBLbvoW1jsvyAOt4Gp9I/Olivero-Theme---Public...)

Closing as 'works as designed'. I appreciate all the work though.