Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add missing full size image in PICTURE > SOURCE srcset #1437

Merged
merged 6 commits into from
Aug 12, 2024

Conversation

mukeshpanchal27
Copy link
Member

@mukeshpanchal27 mukeshpanchal27 commented Aug 6, 2024

Summary

Fixes #1417

Todos:

  • Add unit tests

@mukeshpanchal27 mukeshpanchal27 added [Type] Bug An existing feature is broken [Plugin] Modern Image Formats Issues for the Modern Image Formats plugin (formerly WebP Uploads) labels Aug 6, 2024
@mukeshpanchal27 mukeshpanchal27 added this to the webp-uploads n.e.x.t milestone Aug 6, 2024
@mukeshpanchal27 mukeshpanchal27 added no milestone PRs that do not have a defined milestone for release and removed no milestone PRs that do not have a defined milestone for release labels Aug 6, 2024
@mukeshpanchal27 mukeshpanchal27 self-assigned this Aug 6, 2024
Copy link

github-actions bot commented Aug 9, 2024

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @1ucay.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Unlinked contributors: 1ucay.

Co-authored-by: mukeshpanchal27 <mukesh27@git.wordpress.org>
Co-authored-by: westonruter <westonruter@git.wordpress.org>
Co-authored-by: adamsilverstein <adamsilverstein@git.wordpress.org>
Co-authored-by: devansh016 <devansh2002@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

Copy link
Member

@adamsilverstein adamsilverstein left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice!

Copy link
Member

@westonruter westonruter left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Verified ✅

Before

<picture
  class="not-transparent wp-picture-149"
  style="--dominant-color: #1e2428; display: contents"
  ><source
    type="image/webp"
    srcset="
      http://localhost:8888/wp-content/uploads/2024/08/image-300x300-jpeg.webp 300w,
      http://localhost:8888/wp-content/uploads/2024/08/image-150x150-jpeg.webp 150w,
      http://localhost:8888/wp-content/uploads/2024/08/image-768x768-jpeg.webp 768w
    "
    sizes="(max-width: 650px) 100vw, 650px" />
  <img
    data-dominant-color="1e2428"
    data-has-transparency="false"
    decoding="async"
    width="1024"
    height="1024"
    src="http://localhost:8888/wp-content/uploads/2024/08/image.jpeg"
    alt=""
    class="not-transparent wp-image-149"
    srcset="
      http://localhost:8888/wp-content/uploads/2024/08/image.jpeg         1024w,
      http://localhost:8888/wp-content/uploads/2024/08/image-300x300.jpeg  300w,
      http://localhost:8888/wp-content/uploads/2024/08/image-150x150.jpeg  150w,
      http://localhost:8888/wp-content/uploads/2024/08/image-768x768.jpeg  768w
    "
    sizes="(max-width: 650px) 100vw, 650px"
/></picture>

After

<picture
  class="not-transparent wp-picture-149"
  style="--dominant-color: #1e2428; display: contents"
  ><source
    type="image/webp"
    srcset="
      http://localhost:8888/wp-content/uploads/2024/08/image-jpeg.webp         1024w,
      http://localhost:8888/wp-content/uploads/2024/08/image-300x300-jpeg.webp  300w,
      http://localhost:8888/wp-content/uploads/2024/08/image-150x150-jpeg.webp  150w,
      http://localhost:8888/wp-content/uploads/2024/08/image-768x768-jpeg.webp  768w
    "
    sizes="(max-width: 650px) 100vw, 650px" />
  <img
    data-dominant-color="1e2428"
    data-has-transparency="false"
    decoding="async"
    width="1024"
    height="1024"
    src="http://localhost:8888/wp-content/uploads/2024/08/image.jpeg"
    alt=""
    class="not-transparent wp-image-149"
    srcset="
      http://localhost:8888/wp-content/uploads/2024/08/image.jpeg         1024w,
      http://localhost:8888/wp-content/uploads/2024/08/image-300x300.jpeg  300w,
      http://localhost:8888/wp-content/uploads/2024/08/image-150x150.jpeg  150w,
      http://localhost:8888/wp-content/uploads/2024/08/image-768x768.jpeg  768w
    "
    sizes="(max-width: 650px) 100vw, 650px"
/></picture>

Diff

--- /tmp/picture/before.html	2024-08-12 13:35:20.180047338 -0700
+++ /tmp/picture/after.html	2024-08-12 13:35:20.152047337 -0700
@@ -4,9 +4,10 @@
   ><source
     type="image/webp"
     srcset="
-      http://localhost:8888/wp-content/uploads/2024/08/image-300x300-jpeg.webp 300w,
-      http://localhost:8888/wp-content/uploads/2024/08/image-150x150-jpeg.webp 150w,
-      http://localhost:8888/wp-content/uploads/2024/08/image-768x768-jpeg.webp 768w
+      http://localhost:8888/wp-content/uploads/2024/08/image-jpeg.webp         1024w,
+      http://localhost:8888/wp-content/uploads/2024/08/image-300x300-jpeg.webp  300w,
+      http://localhost:8888/wp-content/uploads/2024/08/image-150x150-jpeg.webp  150w,
+      http://localhost:8888/wp-content/uploads/2024/08/image-768x768-jpeg.webp  768w
     "
     sizes="(max-width: 650px) 100vw, 650px" />
   <img

With whitespace ignored:

--- /tmp/picture/before.html	2024-08-12 13:35:20.180047338 -0700
+++ /tmp/picture/after.html	2024-08-12 13:35:20.152047337 -0700
@@ -4,6 +4,7 @@
   ><source
     type="image/webp"
     srcset="
+      http://localhost:8888/wp-content/uploads/2024/08/image-jpeg.webp         1024w,
       http://localhost:8888/wp-content/uploads/2024/08/image-300x300-jpeg.webp 300w,
       http://localhost:8888/wp-content/uploads/2024/08/image-150x150-jpeg.webp 150w,
       http://localhost:8888/wp-content/uploads/2024/08/image-768x768-jpeg.webp 768w

@westonruter westonruter merged commit bbac06b into trunk Aug 12, 2024
14 checks passed
@westonruter westonruter deleted the fix/1417-add-full-size-image-source-srcset branch August 12, 2024 20:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Plugin] Modern Image Formats Issues for the Modern Image Formats plugin (formerly WebP Uploads) [Type] Bug An existing feature is broken
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Picture element: Full size image is missing in PICTURE > SOURCE srcset
3 participants