Newsletter featured image display correctly in test emails, but distorted when published

[mgozdis]

Impacted plugin

Jetpack

Quick summary

When sending a test email prior to publishing a post, the email received displays the featured image correctly. When publishing, the email received display the featured image distorted. This appears related to the test email using auto height and width values while the published email sets specific values.

User report: 7416408-zd-a8c

Steps to reproduce

1. Install Alonso theme on AT site
2. Create a new post with a featured image set, saving as draft
3. Click Publish and choose "Send test email" under Newsletter options - check that test email was received and displays featured image fine (ensure you are a subscriber of site first)
4. Publish the post and check email to see featured image displays distorted

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

The featured image should display the same and use the same CSS styling regardless of sending a test email or "published" email. It should display in the correct size, proportions, and aspect ratio.

What actually happened

Different CSS is applied depending on whether it's a test email or not. The test email uses this inline CSS: style="border:none;margin-bottom:0;max-height:inherit;max-width:100%;width:auto;height:auto

The published email uses this inline CSS: style="border:none;margin-bottom:0;max-height:inherit;width:100%;height:163.89%;max-width:1080px

Impact

Some (< 50%)

Available workarounds?

No and the platform is unusable

Platform (Simple and/or Atomic)

Atomic

Logs or notes

It is unknown if this is theme/platform specific and only tested on AT sites with Alonso theme.

[github-actions[bot]]

Support References

This comment is automatically generated. Please do not edit it.

• [ ] 7416408-zen
• [ ] 7393417-zen
• [ ] 7539224-zen
• [ ] 8680778-zen
• [ ] 8685932-zen

[pauljacobson]

We have another report of this issue in 7393417-zen

[jp-imagines]

Another report in 7539224-zd-a8c. Atomic site using a third-party theme (Gridiculous Pro), so I doubt this is theme related.

[github-actions[bot]]

This issue has been marked as stale. This happened because:

• It has been inactive for the past 6 months.
• It hasn’t been labeled `[Pri] BLOCKER`, `[Pri] High`, `[Type] Feature Request`, `[Type] Enhancement`, `[Type] Janitorial`, `Good For Community`, `[Type] Good First Bug`, etc.

No further action is needed. But it's worth checking if this ticket has clear reproduction steps and it is still reproducible. Feel free to close this issue if you think it's not valid anymore — if you do, please add a brief explanation.

[jeherve]

I experienced the same issue with the email triggered for this post on my personal site.

• Photon is disabled on the site.
• The Featured image is 852 by 852 pixels.
• The rendered HTML in the email attempts to use a query string (?w=750) to resize the image as well as the data-medium-file and data-large-file attributes, but that would only work with images served via Photon.
• Here is the full rendered HTML:

<div class="featured-image-container" style="max-height: 488px; margin-bottom: 24px; line-height: 0; text-align: center;">
	<img
	width="750"
	height="750"
	src="https://jeremy.hu/wp-content/uploads/jeremy-herve-2024.jpg?w=750"
	class="featured-image wp-post-image"
	alt="featured image"
	decoding="async"
	loading="lazy"
	data-attachment-id="41072"
	data-permalink="https://jeremy.hu/new-profile-pic/jeremy-herve-2024/"
	data-orig-file="https://jeremy.hu/wp-content/uploads/jeremy-herve-2024.jpg"
	data-orig-size="852,852"
	data-comments-opened="1"
	data-image-meta='{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0"}'
	data-image-title="Jeremy Herve in 2024"
	data-image-description
	data-image-caption="&lt;p&gt;Portrait of myself in 2024&lt;/p&gt;"
	data-medium-file="https://jeremy.hu/wp-content/uploads/jeremy-herve-2024.jpg?w=550"
	data-large-file="https://jeremy.hu/wp-content/uploads/jeremy-herve-2024.jpg?w=750"
	tabindex="0"
	role="button"
	style="border: none; -ms-interpolation-mode: bicubic; margin-bottom: 0; max-height: inherit; width: 100%; height: 100%; max-width: 852px;"
	>
</div>

[Robertght]

I'm assuming square images(and possibly portrait) are the pattern here. I tested with a 1920x1920 image and that was stretched too:

I had another case the other day in here as well: #8680778-zen and a follow up to this in #8685932-zen

[eduardozulian]

I'm not able to reproduce this issue. Tested with two images, including a portrait-oriented one. Here's the result:

I still see a different inline CSS, though. Here's an example from another image I tested:

• Newsletter test CSS: style="border:none;margin-bottom:0;max-width:100%;width:auto;height:auto"
• Published post CSS: style="border:none;margin-bottom:0;width:100%;height:93.98%;max-width:1280px"

@mgozdis @Robertght are you still able to reproduce this one?

[mgozdis]

@eduardozulian I can no longer reproduce. It appears it was specifically patched on 2024-09-26.

[eduardozulian]

I'm marking this one as closed since we cannot reproduce it anymore. If needed, feel free to reopen the issue!