Community - Width & Height attribute - Pagebuilder image #767

[aj-prajapati]

Width and Height attribute added for Pagebuilder image element

#767

Description (*)

Story

Bug

Task

Fixed Issues (if relevant)

1. magento/magento2-page-builder#<issue_number>: Issue title

Builds

Related Pull Requests

https://github.com/magento-commerce/magento2-infrastructure/pull/1880

Manual testing scenarios (*)

1. ...
2. ...

Questions or comments

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)
• README.md files for modified modules are updated and included in the pull request if any README.md predefined sections require an update
• All automated tests passed successfully (all builds are green)

Resolved issues:

1. resolves [Issue] Width & Height attribute - Pagebuilder image #767 #867: Width & Height attribute - Pagebuilder image Page Builder missing support for remote storage / resize image #767

[larsmbm]

Hello @aj-prajapati

Thanks for making this code. We do use it. Although we did add code for loading attribute as wel. We think it's a good to at it to you merge request.

This is the code we made:

pagebuilder_image_form.xml
<field name="image_attribute_loading" formElement="select" sortOrder="12"> <settings> <dataType>text</dataType> <label translate="true">Image Attribute Loading</label> <dataScope>image_attribute_loading</dataScope> <notice translate="true">Place the value lazy on images that are below the fold on desktop for better page speed performance.</notice> </settings> <formElements> <select> <settings> <options> <option name="eager" xsi:type="array"> <item name="value" xsi:type="string">eager</item> <item name="label" xsi:type="string">eager</item> </option> <option name="lazy" xsi:type="array"> <item name="value" xsi:type="string">lazy</item> <item name="label" xsi:type="string">lazy</item> </option> </options> <caption translate="true">Select the correct loading method for the image.</caption> </settings> </select> </formElements> </field>
<field name="mobile_image_attribute_loading" formElement="select" sortOrder="15"> <settings> <dataType>text</dataType> <label translate="true">Mobile Image Attribute Loading</label> <dataScope>mobile_image_attribute_loading</dataScope> <notice translate="true">Place the value lazy on images that are below the fold on mobile for better page speed performance.</notice> </settings> <formElements> <select> <settings> <options> <option name="eager" xsi:type="array"> <item name="value" xsi:type="string">eager</item> <item name="label" xsi:type="string">eager</item> </option> <option name="lazy" xsi:type="array"> <item name="value" xsi:type="string">lazy</item> <item name="label" xsi:type="string">lazy</item> </option> </options> <caption translate="true">Select the correct loading method for the image.</caption> </settings> </select> </formElements> </field>

image.xml
<attribute name="image_attribute_loading" source="loading"/> <attribute name="mobile_image_attribute_loading" source="loading"/>

ImageData.xml
<!-- Image Loading --> <entity name="PageBuilderImageLoadingProperty" type="pagebuilder_Loading_property"> <data key="name">Loading</data> <data key="section">general</data> <data key="fieldName">image_attribute_loading</data> <data key="value">eager</data> </entity>

<!-- Mobile Image Loading --> <entity name="PageBuilderImageLoadingProperty" type="pagebuilder_Loading_property"> <data key="name">Loading</data> <data key="section">general</data> <data key="fieldName">mobile_image_attribute_loading</data> <data key="value">eager</data> </entity>

[engcom-Hotel]

@magento run all tests

[magento-automated-testing]

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please message the #magento-devops slack channel if they don't show in a reasonable amount of time and a representative will look into any issues.

[engcom-Hotel]

@magento run all tests

[engcom-Hotel]

Hello @aj-prajapati,

Thanks for the contribution!

Please look into the automated test failures.

Thanks

[engcom-Hotel]

We are picking this PR for further development

[engcom-Hotel]

@magento create issue

[larsmbm]

Hello @engcom-Hotel,

Great that this issue is picked up for further development :)
I do question will the lazy loading attribute option be added as wel?
Like my comment suggest in this ticket earlier.

Thank you in advance.

[engcom-Hotel]

@magento run Static Tests

[engcom-Hotel]

@magento run Static Tests

[engcom-Hotel]

@magento run Static Tests

[engcom-Hotel]

@magento run Static Tests

[engcom-Hotel]

@magento run Static Tests

[engcom-Hotel]

@magento run Static Tests

[engcom-Hotel]

@magento run Database Compare, Functional Tests B2B, Functional Tests CE, Functional Tests EE, Integration Tests, Magento Health Index, Performance Acceptance Tests, Semantic Version Checker, Unit Tests, WebAPI Tests

[engcom-Hotel]

It seems the bot moved it to Changes Requested, moving back to Pending Review

[engcom-Bravo]

@magento run all tests

[engcom-Bravo]

@magento give me test instance

[magento-deployment-service]

Hi @engcom-Bravo. Thank you for your request. I'm working on Magento instance for you.

[magento-deployment-service]

Hi @engcom-Bravo, here is your Magento Instance: https://d1a442a3dd69c2b3868e7229c0e5eebc.instances-prod.magento-community.engineering
Admin access: https://d1a442a3dd69c2b3868e7229c0e5eebc.instances-prod.magento-community.engineering/admin_9df8
Login: 06e6d262
Password: 2875e3350d04

[engcom-Bravo]

Hi @aj-prajapati,

Thanks for the collaboration & contribution!

✔️ QA Passed

Preconditions:

• Install fresh Magento 2.4-develop

Steps to reproduce

• Content>>Pages>>Content>>Edit with Pagebuilder
• Add Row>>Add Image element.
• Upload images for both desktop image and Mobile image
• Check both images are having Width and Height.

Before: ✖️ 

After: ✔️  

Builds are failed. Hence, moving this PR to Extended Testing.

Thanks.

[engcom-Hotel]

@magento run Functional Tests B2B, Functional Tests CE, WebAPI Tests

[engcom-Hotel]

@magento run Functional Tests B2B, WebAPI Tests

[engcom-Hotel]

@magento run Functional Tests B2B, WebAPI Tests