Product Listing Images Are Not Displaying/Loading Correctly
Website is on Magento 2.2.6. As far as I remember, this issue was not present when we were on previous versions of Magento.
Description of the issue:
When clicking on a product listing, the resulting product page will load just fine, except for the image.
All you can see is the top 1px of the height of the image. The width seems to be the correct size.
Clicking on any of the size/color attributes will change the photo, but it will still not load completely. You can tell the photo changes if you look closely at the 1px height that is visible.
The only way to get the photo to load in correctly is to refresh the page.
After the page is cached, you can revisit the same page which had an issue, and the photos will now load properly with no need to refresh.
This seems to happen more often when you click on the product listing and open it in the same tab. If you CTRL-Click and open the listing in a new tab, more often than not, it will load just fine.
Although caching temporarily solves the issue, the issue would still be present for any new visitors to the website.
The theme that the website is using is Unero.
I have tried multiple solutions, to no avail.
I have merged css/js files and deployed, then flushed the cache, but the issue still persists.
product-images magento2.2.6
asked Jan 21 at 20:09
David A.David A.
84
add a comment |
Website is on Magento 2.2.6. As far as I remember, this issue was not present when we were on previous versions of Magento.
Description of the issue:
When clicking on a product listing, the resulting product page will load just fine, except for the image.
All you can see is the top 1px of the height of the image. The width seems to be the correct size.
Clicking on any of the size/color attributes will change the photo, but it will still not load completely. You can tell the photo changes if you look closely at the 1px height that is visible.
The only way to get the photo to load in correctly is to refresh the page.
After the page is cached, you can revisit the same page which had an issue, and the photos will now load properly with no need to refresh.
This seems to happen more often when you click on the product listing and open it in the same tab. If you CTRL-Click and open the listing in a new tab, more often than not, it will load just fine.
Although caching temporarily solves the issue, the issue would still be present for any new visitors to the website.
The theme that the website is using is Unero.
I have tried multiple solutions, to no avail.
I have merged css/js files and deployed, then flushed the cache, but the issue still persists.
product-images magento2.2.6
asked Jan 21 at 20:09
David A.David A.
84
add a comment |
Website is on Magento 2.2.6. As far as I remember, this issue was not present when we were on previous versions of Magento.
Description of the issue:
When clicking on a product listing, the resulting product page will load just fine, except for the image.
All you can see is the top 1px of the height of the image. The width seems to be the correct size.
Clicking on any of the size/color attributes will change the photo, but it will still not load completely. You can tell the photo changes if you look closely at the 1px height that is visible.
The only way to get the photo to load in correctly is to refresh the page.
After the page is cached, you can revisit the same page which had an issue, and the photos will now load properly with no need to refresh.
This seems to happen more often when you click on the product listing and open it in the same tab. If you CTRL-Click and open the listing in a new tab, more often than not, it will load just fine.
Although caching temporarily solves the issue, the issue would still be present for any new visitors to the website.
The theme that the website is using is Unero.
I have tried multiple solutions, to no avail.
I have merged css/js files and deployed, then flushed the cache, but the issue still persists.
product-images magento2.2.6
asked Jan 21 at 20:09
David A.David A.
84
Website is on Magento 2.2.6. As far as I remember, this issue was not present when we were on previous versions of Magento.
Description of the issue:
When clicking on a product listing, the resulting product page will load just fine, except for the image.
All you can see is the top 1px of the height of the image. The width seems to be the correct size.
Clicking on any of the size/color attributes will change the photo, but it will still not load completely. You can tell the photo changes if you look closely at the 1px height that is visible.
The only way to get the photo to load in correctly is to refresh the page.
After the page is cached, you can revisit the same page which had an issue, and the photos will now load properly with no need to refresh.
This seems to happen more often when you click on the product listing and open it in the same tab. If you CTRL-Click and open the listing in a new tab, more often than not, it will load just fine.
Although caching temporarily solves the issue, the issue would still be present for any new visitors to the website.
The theme that the website is using is Unero.
I have tried multiple solutions, to no avail.
I have merged css/js files and deployed, then flushed the cache, but the issue still persists.
product-images magento2.2.6
product-images magento2.2.6
asked Jan 21 at 20:09
David A.David A.
84
asked Jan 21 at 20:09
David A.David A.
84
edited Jan 21 at 22:38
David A.
asked Jan 21 at 20:09
David A.David A.
84
asked Jan 21 at 20:09
David A.David A.
84
asked Jan 21 at 20:09
David A.David A.
84
84
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
I was able to figure out a "bandaid" fix for my issue. I am sure there is a much more solid method, but this is what I did to resolve the issue:
The following div would load an element.style setting the height of the image to 1px, seemingly at random. I just forced the 600px height by using !important within the associated stylesheet.
There may be some conflicting settings somewhere, but for now this temporary fix will allow me to move forward.
<div class="product media" style="height: 600px !important;">
answered Jan 21 at 21:57
David A.David A.
84
add a comment |
Your Answer
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "479"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f258629%2fproduct-listing-images-are-not-displaying-loading-correctly%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I was able to figure out a "bandaid" fix for my issue. I am sure there is a much more solid method, but this is what I did to resolve the issue:
The following div would load an element.style setting the height of the image to 1px, seemingly at random. I just forced the 600px height by using !important within the associated stylesheet.
There may be some conflicting settings somewhere, but for now this temporary fix will allow me to move forward.
<div class="product media" style="height: 600px !important;">
answered Jan 21 at 21:57
David A.David A.
84
add a comment |
I was able to figure out a "bandaid" fix for my issue. I am sure there is a much more solid method, but this is what I did to resolve the issue:
The following div would load an element.style setting the height of the image to 1px, seemingly at random. I just forced the 600px height by using !important within the associated stylesheet.
There may be some conflicting settings somewhere, but for now this temporary fix will allow me to move forward.
<div class="product media" style="height: 600px !important;">
answered Jan 21 at 21:57
David A.David A.
84
add a comment |
I was able to figure out a "bandaid" fix for my issue. I am sure there is a much more solid method, but this is what I did to resolve the issue:
The following div would load an element.style setting the height of the image to 1px, seemingly at random. I just forced the 600px height by using !important within the associated stylesheet.
There may be some conflicting settings somewhere, but for now this temporary fix will allow me to move forward.
<div class="product media" style="height: 600px !important;">
answered Jan 21 at 21:57
David A.David A.
84
I was able to figure out a "bandaid" fix for my issue. I am sure there is a much more solid method, but this is what I did to resolve the issue:
The following div would load an element.style setting the height of the image to 1px, seemingly at random. I just forced the 600px height by using !important within the associated stylesheet.
There may be some conflicting settings somewhere, but for now this temporary fix will allow me to move forward.
<div class="product media" style="height: 600px !important;">
answered Jan 21 at 21:57
David A.David A.
84
answered Jan 21 at 21:57
David A.David A.
84
answered Jan 21 at 21:57
David A.David A.
84
answered Jan 21 at 21:57
David A.David A.
84
84
add a comment |
add a comment |
Thanks for contributing an answer to Magento Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f258629%2fproduct-listing-images-are-not-displaying-loading-correctly%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
