Bugfix/wrong size attributes in image with border #30139

GrimLink · 2020-09-21T18:56:38Z

Description (*)

This PR removes most changes from commit #4e085c7

Commit #4e085c7 tried to fix images getting distorted.
By setting a boolean for the image_with_border.phtml.
This boolean would set the width and height attribute, to the invalid html max-width and max-height attribute.
While this did fix the images not getting distorted.
This did reintroduced the use of invalid html attributes.

This commit unsets the boolean, use of invalid html attributes and fixes the images getting distorted, via the CSS instead.

Manual testing scenarios (*)

Remove the boolean enable_lazy_loading_for_images_without_borders
Remove the max-width and max-height and the if statement holding this.
Add the value width: auto to the .product-image-photo (This also possible via object-fit: scale-down)

This PR also removes the redundant max-width and height from the .product-image-photo.
Since these values are already set globally, on the image, via the reset styles.

Contribution checklist (*)

Pull request has a meaningful description of its purpose
All commits are accompanied by meaningful commit messages
All new or changed code is covered with unit/integration tests (if applicable)
All automated tests passed successfully (all builds are green)

Resolved issues:

resolves [Issue] Bugfix/wrong size attributes in image with border #30186: Bugfix/wrong size attributes in image with border

Already set in the lib/reset styles

With the same styles from Magento_Catalog product-image-photo

m2-assistant · 2020-09-21T18:56:40Z

Hi @GrimLink. Thank you for your contribution
Here is some useful tips how you can test your changes using Magento test environment.
Add the comment under your pull request to deploy test or vanilla Magento instance:

@magento give me test instance - deploy test instance based on PR changes
@magento give me 2.4-develop instance - deploy vanilla Magento instance

❗ Automated tests can be triggered manually with an appropriate comment:

@magento run all tests - run or re-run all required tests against the PR changes
@magento run <test-build(s)> - run or re-run specific test build(s)
For example: @magento run Unit Tests

<test-build(s)> is a comma-separated list of build names. Allowed build names are:

Database Compare
Functional Tests CE
Functional Tests EE,
Functional Tests B2B
Integration Tests
Magento Health Index
Sample Data Tests CE
Sample Data Tests EE
Sample Data Tests B2B
Static Tests
Unit Tests
WebAPI Tests

You can find more information about the builds here

ℹ️ Please run only needed test builds instead of all when developing. Please run all test builds before sending your PR for review.

For more details, please, review the Magento Contributor Guide documentation.

⚠️ According to the Magento Contribution requirements, all Pull Requests must go through the Community Contributions Triage process. Community Contributions Triage is a public meeting.

🕙 You can find the schedule on the Magento Community Calendar page.

📞 The triage of Pull Requests happens in the queue order. If you want to speed up the delivery of your contribution, please join the Community Contributions Triage session to discuss the appropriate ticket.

🎥 You can find the recording of the previous Community Contributions Triage on the Magento Youtube Channel

✏️ Feel free to post questions/proposals/feedback related to the Community Contributions Triage process to the corresponding Slack Channel

GrimLink · 2020-09-21T18:57:00Z

@magento run all tests

mrtuvn · 2020-09-22T00:58:26Z

Can you verify previous commit purpose related with this doc https://devdocs.magento.com/guides/v2.4/frontend-dev-guide/themes/theme-images.html. Seem they try to add new variable for solve problem

This is done to prevent small images from being stretched and distorted.

Also i think doc should be update for clarify user to use correct image size.

GrimLink · 2020-09-22T06:42:36Z

@mrtuvn I can confirm that the previous commit is related to the doc https://devdocs.magento.com/guides/v2.4/frontend-dev-guide/themes/theme-images.html#lazy_loading

But I don't understand why the previous commit was seen as valid 😖

This same issue also plagued the images in the minicart.
And those images did not have the native lazy loading on it.
This was also fixed by unsetting the width and height on the image size.

The width and height are recommended for the native lazy loading and to prevent layout jank.
But unsetting them is not wrong.
As the images are rendered in a aspect-ratio that all ready reserves the image space.

But I will check how to also update the doc with this changed.
Thank for letting me know of this doc section 😉

app/design/frontend/Magento/blank/Magento_Catalog/web/css/source/_module.less

mrtuvn · 2020-09-22T07:01:57Z

@GrimLink pull request prefix MC- meaning this made by internal core team so you probably will not see issue or pull request open. I'm not sure more details about it . You can ping author here for asking
author related PR: @adifucan
CC: @krzksz can you leave some comment for review this

krzksz

If I understand this correctly and previous change was some hacky workaround that we can remove while fixing the issue with those few lines of CSS then I'm happy to approve this.

Let's just resolve those failing tests that @mrtuvn mentioned.

krzksz · 2020-09-22T07:29:40Z

@magento run Functional Tests B2B,Functional Tests CE,Functional Tests EE,Static Tests

krzksz · 2020-09-22T08:51:24Z

@magento run Static Tests

GrimLink · 2020-09-22T08:58:08Z

@krzksz I am not sure how to als update the docs https://devdocs.magento.com/guides/v2.4/frontend-dev-guide/themes/theme-images.html#lazy_loading
Can you point me in the right direction on how to do this?

krzksz · 2020-09-22T09:41:19Z

@magento run all tests

krzksz · 2020-09-22T09:44:29Z

@GrimLink Hey, you can find the repository here: https://github.com/magento/devdocs

When making PR there you should be able to reference this one to make sure they are processed together.

krzksz · 2020-09-22T13:12:53Z

@magento run Functional Tests B2B,WebAPI Tests

adifucan

Thanks @GrimLink! Tested it locally. Nice job!
Yes, please, update https://devdocs.magento.com/guides/v2.4/frontend-dev-guide/themes/theme-images.html#lazy_loading as well.

krzksz · 2020-09-23T08:13:32Z

I don't think it is possible to cover this scenario with automatic tests.

magento-engcom-team · 2020-09-23T08:13:42Z

Hi @krzksz, thank you for the review.
ENGCOM-8251 has been created to process this Pull Request
✳️ @krzksz, could you please add one of the following labels to the Pull Request?

Label	Description
`Auto-Tests: Covered`	All changes in Pull Request is covered by auto-tests
`Auto-Tests: Not Covered`	Changes in Pull Request requires coverage by auto-tests
`Auto-Tests: Not Required`	Changes in Pull Request does not require coverage by auto-tests

engcom-Delta · 2020-09-24T13:41:11Z

✔️ QA passed
Result:
✔️ Small images are not stretched/distorted and displayed as before

engcom-Delta · 2020-09-24T13:42:13Z

@magento create issue

engcom-Delta · 2020-09-25T09:41:29Z

Note: Automation tests are passed

gabrieldagama · 2020-09-25T13:45:39Z

@magento give me new instance with edition ee

magento-deployment-service · 2020-09-25T13:45:43Z

Hi @gabrieldagama. Thank you for your request. I'm working on Magento instance for you.

magento-deployment-service · 2020-09-25T13:52:21Z

Hi @gabrieldagama, here is your Magento Instance: https://c44d658c861ce1e0e10f9ffac5860d3c.instances.magento-community.engineering
Admin access: https://c44d658c861ce1e0e10f9ffac5860d3c.instances.magento-community.engineering/admin_8f95
Login: 93d2e8bb
Password: b1b2b6b49e51

m2-assistant · 2020-09-30T02:11:56Z

Hi @GrimLink, thank you for your contribution!
Please, complete Contribution Survey, it will take less than a minute.
Your feedback will help us to improve contribution process.

GrimLink added 5 commits September 21, 2020 19:17

IMP: reorder styles

395907d

IMP: drop redundant styles

5092948

Already set in the lib/reset styles

ADD: width auto to prevent images from being distorted

fe5be17

DEL: weird unset via bad html

1adc538

IMP: updates product-image-photo

3d609a9

With the same styles from Magento_Catalog product-image-photo

ghost added the Progress: pending review label Sep 21, 2020

magento-engcom-team added Area: Design/Frontend Area: Frontend Component: Catalog Release Line: 2.4 labels Sep 21, 2020

mrtuvn reviewed Sep 22, 2020

View reviewed changes

app/design/frontend/Magento/blank/Magento_Catalog/web/css/source/_module.less Show resolved Hide resolved

krzksz suggested changes Sep 22, 2020

View reviewed changes

ghost assigned krzksz Sep 22, 2020

ghost added Progress: needs update and removed Progress: pending review labels Sep 22, 2020

IMP: correct order to match m2 rules

7fd7a68

adifucan approved these changes Sep 22, 2020

View reviewed changes

ghost assigned adifucan Sep 22, 2020

ghost removed the Progress: needs update label Sep 22, 2020

ghost added the Progress: ready for testing label Sep 22, 2020

sidolov added Priority: P3 May be fixed according to the position in the backlog. Severity: S3 Affects non-critical data or functionality and does not force users to employ a workaround. labels Sep 22, 2020

mrtuvn approved these changes Sep 23, 2020

View reviewed changes

krzksz approved these changes Sep 23, 2020

View reviewed changes

krzksz added the Auto-Tests: Not Required Changes in Pull Request does not require coverage by auto-tests label Sep 23, 2020

GrimLink mentioned this pull request Sep 23, 2020

DEL: doc section related to enable_lazy_loading_for_images_without_borders magento/devdocs#7928

Merged

engcom-Delta self-assigned this Sep 24, 2020

ghost added Progress: testing in progress and removed Progress: ready for testing labels Sep 24, 2020

m2-assistant bot mentioned this pull request Sep 24, 2020

[Issue] Bugfix/wrong size attributes in image with border #30186

Closed

engcom-Delta added the QA: Added to Regression Scope Scenario was analysed and added to Regression Testing Scope label Sep 25, 2020

ghost added Progress: accept and removed Progress: testing in progress labels Sep 25, 2020

sidolov added the Risk: low label Sep 25, 2020

magento-engcom-team pushed a commit that referenced this pull request Sep 30, 2020

ENGCOM-8251: Bugfix/wrong size attributes in image with border #30139

a542dc8

magento-engcom-team merged commit 1f3fb20 into magento:2.4-develop Sep 30, 2020

Bugfix/wrong size attributes in image with border #30139

Bugfix/wrong size attributes in image with border #30139

Uh oh!

Conversation

GrimLink commented Sep 21, 2020 • edited by m2-assistant bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description (*)

Manual testing scenarios (*)

Contribution checklist (*)

Resolved issues:

Uh oh!

m2-assistant bot commented Sep 21, 2020

Uh oh!

GrimLink commented Sep 21, 2020

Uh oh!

mrtuvn commented Sep 22, 2020

Uh oh!

GrimLink commented Sep 22, 2020

Uh oh!

Uh oh!

mrtuvn commented Sep 22, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

krzksz left a comment

Choose a reason for hiding this comment

Uh oh!

krzksz commented Sep 22, 2020

Uh oh!

krzksz commented Sep 22, 2020

Uh oh!

GrimLink commented Sep 22, 2020

Uh oh!

krzksz commented Sep 22, 2020

Uh oh!

krzksz commented Sep 22, 2020

Uh oh!

krzksz commented Sep 22, 2020

Uh oh!

adifucan left a comment

Choose a reason for hiding this comment

Uh oh!

krzksz commented Sep 23, 2020

Uh oh!

magento-engcom-team commented Sep 23, 2020

Uh oh!

engcom-Delta commented Sep 24, 2020

Uh oh!

engcom-Delta commented Sep 24, 2020

Uh oh!

engcom-Delta commented Sep 25, 2020

Uh oh!

gabrieldagama commented Sep 25, 2020

Uh oh!

magento-deployment-service bot commented Sep 25, 2020

Uh oh!

magento-deployment-service bot commented Sep 25, 2020

Uh oh!

m2-assistant bot commented Sep 30, 2020

Uh oh!

Uh oh!

GrimLink commented Sep 21, 2020 •

edited by m2-assistant bot

Loading

mrtuvn commented Sep 22, 2020 •

edited

Loading