Skip to content

remove image style and script coming next to it. #37720

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.

Sign up for GitHub

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

Open
wants to merge 4 commits into
base: 2.4-develop
Choose a base branch
from
Open

remove image style and script coming next to it. #37720

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
89223a7
remove script and style below images tag
Sahilsks Jul 5, 2023
0b92705
remove script and style below images tag
Sahilsks Jul 5, 2023
23c15ce
Merge branch '2.4-develop' into 2.4-develop
Sahilsks Jul 5, 2023
93db122
Merge branch '2.4-develop' into 2.4-develop
Sahilsks Jul 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 1 addition & 27 deletions app/code/Magento/Catalog/view/frontend/templates/product/image_with_borders.phtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ $width = (int)$block->getWidth();
$paddingBottom = $block->getRatio() * 100;
Copy link
Member

Choose a reason for hiding this comment

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

We don't need these two variables ($width, $paddingBottom) any more given the other changes in this pull request. (GitHub won't let me comment on line 11, so the suggestion here is incomplete.)

Suggested change
$paddingBottom = $block->getRatio() * 100;

?>
<span class="product-image-container product-image-container-<?= /* @noEscape */ $block->getProductId() ?>">
Copy link
Member

Choose a reason for hiding this comment

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

We probably don't need this ID any more given the other changes in this pull request.

Suggested change
<span class="product-image-container product-image-container-<?= /* @noEscape */ $block->getProductId() ?>">
<span class="product-image-container">

<span class="product-image-wrapper">
<span class="product-image-wrapper product-image-wrapper-padding">
<img class="<?= $escaper->escapeHtmlAttr($block->getClass()) ?>"
<?php foreach ($block->getCustomAttributes() as $name => $value): ?>
<?= $escaper->escapeHtmlAttr($name) ?>="<?= $escaper->escapeHtml($value) ?>"
Expand All @@ -23,29 +23,3 @@ $paddingBottom = $block->getRatio() * 100;
height="<?= $escaper->escapeHtmlAttr($block->getHeight()) ?>"
alt="<?= $escaper->escapeHtmlAttr($block->getLabel()) ?>"/></span>
</span>
<?php
$styles = <<<STYLE
.product-image-container-{$block->getProductId()} {
width: {$width}px;
}
.product-image-container-{$block->getProductId()} span.product-image-wrapper {
padding-bottom: {$paddingBottom}%;
}
STYLE;
//In case a script was using "style" attributes of these elements
$script = <<<SCRIPT
prodImageContainers = document.querySelectorAll(".product-image-container-{$block->getProductId()}");
for (var i = 0; i < prodImageContainers.length; i++) {
prodImageContainers[i].style.width = "{$width}px";
}
prodImageContainersWrappers = document.querySelectorAll(
".product-image-container-{$block->getProductId()} span.product-image-wrapper"
);
for (var i = 0; i < prodImageContainersWrappers.length; i++) {
prodImageContainersWrappers[i].style.paddingBottom = "{$paddingBottom}%";
}
SCRIPT;

?>
<?= /* @noEscape */ $secureRenderer->renderTag('style', [], $styles, false) ?>
<?= /* @noEscape */ $secureRenderer->renderTag('script', ['type' => 'text/javascript'], $script, false) ?>
5 changes: 5 additions & 0 deletions app/design/frontend/Magento/blank/Magento_Catalog/web/css/source/_module.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,7 @@

.product-image-container {
display: inline-block;
width: 240px;
max-width: 100%;
}

Expand All @@ -114,6 +115,10 @@
z-index: 1;
}

.product-image-wrapper-padding {
padding-bottom: 125%;
}

.product-image-photo {
bottom: 0;
display: block;
Expand Down
5 changes: 5 additions & 0 deletions app/design/frontend/Magento/luma/Magento_Catalog/web/css/source/_module.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,7 @@

.product-image-container {
display: inline-block;
width: 240px;
max-width: 100%;
}

Expand All @@ -95,6 +96,10 @@
z-index: 1;
}

.product-image-wrapper-padding {
padding-bottom: 125%;
}

.product-image-photo {
bottom: 0;
display: block;
Expand Down