Skip to content

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

Merged
westonruter merged 6 commits intotrunkfrom
fix/1417-add-full-size-image-source-srcset
Aug 12, 2024
Merged

Add missing full size image in PICTURE > SOURCE srcset#1437
westonruter merged 6 commits intotrunkfrom
fix/1417-add-full-size-image-source-srcset

Conversation

@mukeshpanchal27
Copy link
Copy Markdown
Member

@mukeshpanchal27 mukeshpanchal27 commented Aug 6, 2024 •
edited
Loading

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
@mukeshpanchal27 mukeshpanchal27 marked this pull request as ready for review August 9, 2024 05:50
@github-actions
Copy link
Copy Markdown

github-actions bot commented Aug 9, 2024 •
edited
Loading

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.

westonruter
westonruter reviewed Aug 9, 2024
View reviewed changes
adamsilverstein
adamsilverstein approved these changes Aug 9, 2024
View reviewed changes
Copy link
Copy Markdown
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!

westonruter
westonruter approved these changes Aug 12, 2024
View reviewed changes
Copy link
Copy Markdown
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
@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

Reviewers

@westonruter westonruter westonruter approved these changes

@adamsilverstein adamsilverstein adamsilverstein approved these changes

@felixarntz felixarntz Awaiting requested review from felixarntz

@joemcgill joemcgill Awaiting requested review from joemcgill

Assignees

@mukeshpanchal27 mukeshpanchal27

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

Milestone

webp-uploads 2.1.0

Development

Successfully merging this pull request may close these issues.

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

3 participants

@mukeshpanchal27 @westonruter @adamsilverstein