Automattic / Automattic/jetpack

Related Posts: thumbnails are not displayed correctly (aspect ratio is not preserved) if block theme is used

Open
#28,346 2 comments 0 reactions 0 assignees View on GitHub
[Block] Related Posts [Focus] Compatibility [Plugin] Jetpack [Pri] Low Bug Triaged
Dominant language
PHP
Stars
1.8k
Forks
898
Avg merge
1d 18h
Merged PRs (30d)
774

Description

### Impacted plugin

Jetpack

### Steps to Reproduce

1. Activate Twenty Twenty-Three theme
2. Activate the Related Posts feature under Jetpack > Settings > Traffic
3. Create a few posts (4) with featured images
4. Add **Related Posts** blog to the post, make sure to check **Display thumbnails** in the Related Posts settings
5. Visit the post in the front-end view, make sure that your viewport size is larger than 640px

### A clear and concise description of what you expected to happen.

Thumbnails are displayed using their correct aspect ratios.

### What actually happened

You will notice that the aspect ratio of thumbnails is not preserved.
When you check the styles applied to the image, you will notice that the following `width` rule is applied:

```
.jp-related-posts-i2__post-img-link img {
width: 100%;
}
```

**but there is no rule for height** (like `height:auto`). In that case, the browser uses the `height` attribute from the `img` markup (200px) instead.

Markup 2023-01-13 at 15 38 34

### Browser

Google Chrome/Chromium, Mozilla Firefox, Microsoft Edge, Apple Safari

### Other information

The issue does not occur in (probably most) classic themes since they add general rules for `img`, for instance Twenty Twenty-One adds this rule:

```
img {
height: auto;
max-width: 100%;
vertical-align: middle;
}
```

### Platform (Simple, Atomic, or both?)

Self-hosted

### Reproducibility

Consistent

### Severity

Some (< 50%)

### Available workarounds?

Yes, easy to implement

### Workaround details

Go to /wp-admin/customize.php > Additional CSS and add

```
img {
height: auto;
max-width: 100%;
}
```

Contributor guide

Open the contributing guide

Research direction

Reproduce the issue with Jetpack Related Posts enabled on Twenty Twenty-Three, using four posts with featured images and a viewport wider than 640px. Inspect the `.jp-related-posts-i2__post-img-link img` styles and confirm the fix preserves thumbnail aspect ratios in the front end without relying on Additional CSS.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, php, wordpress
Domain
frontend, web-dev
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.