something starnge with 6.1.5 foundation

[keat]

When I enter in to a product the product image is huge and starting to pixelate.

Wondering if was anything to do with the work I've done today, I started to roll back.

If I install a clean 6.1.5 foundation skin, the problem is still there.

If I imnstall a 6.0.12 foundation skin, the problem goes away.

 

I'm confused ?

 

http://www.sterlingworkshopsupplies.co.uk/superglue.html

[Dirty Butter]

That's not a url we can access - requires password.

Is it a tall image? There's some recent GitHub work done to improve dealing with images.

[keat]

I forgot about the password, it's my test domain.

try:

cubecart

forum12345

[bsmither]

Please see: https://forums.cubecart.com/topic/52197-picture-size/

 

[keat]

scroll down to the superglue.

compare this with https://www.beal.org.uk/lubrication-cleaning/adhesives/superglue-20g.html

 

it's the same image

 

I cleared the lines

 

a.open-clearing #img-preview {
    width: 100%;
    height: 100%;
}

Delete the above.

  in cubecart.css, but this made things worse

 

I just jumped on to my PC in the office and can confirm that the image is only 165 x 500, so well withing the boundaries as foundation.

[keat]

Seems to work ok with Foundation from 6.1.1 also but not with 6.1.4

[keat]

for the time being, i'm using the foundation skin from 6.1.1

[keat]

I came back this morning and the issue has re-occured, so heaven only knows why it worked last night and doesn't again today.

Anyhow, after tinkering with the image, I figured out that it must have something to do with the layout of the image.

The image in question was 500 tall by 165 wide, and causes an issue with the display.

If I modify the image to be 500 x 500, then it displays correctly.

Any thoughts what's causing this ?

 

[bsmither]

The new CSS rules (the ones that were deleted) tell the browser to scale the image as wide as the <div> container it is in. (Browsers do not do a very good job of enlarging images.) That <div> container ends up being 438px on a large viewport.

[keat]

If I delete the few lines, then it makes matters worse.

only if i refresh the browser each time, the image is displayed correctly.

This is the same with chrome or firefox.

Incidentally, I don't have this issue with Mican

I could fix this but I'd have to edit a whole load of images.

[bsmither]

If it makes matters worse, then I must conclude you may be deleting more than just:

cubecart.css, line 9-12:

a.open-clearing #img-preview {
    height: 100%;
    width: 100%;
}

Try this:

a.open-clearing #img-preview {
    height: 100%;
/*    width: 100%;  */
}

Making edits to the CSS file may require you to force the browser to reload page resources.

When you say, "having to refresh the browser each time," are you speaking of each product page (having a different image), or the same product page over and over?

I would also like for you to find these files and place them where indicated:

jquery.chosen.min.css -- put in /skins/foundation/css/

jquery.chosen.min.js -- put in /skins/foundation/js/vendor/

[keat]

With the 4 lines intact, the image displays, but it's huge https://www.cabletiesonline.co.uk/aerosols-glue/scented-dash-vinyl-polish.html

If I view the image info it says that it's scaled to something like 485 x 1023, yet the image will be no where near this size.

If I remove those 4 lines, then the image is chopped in half, until I perform a page refresh.

I commented out that width line, which didn't help, and I also uploaded those 2 files, which hasn't helped either.

 

These images will probably all have been 500, due to it being a former V3 site, the one mentioned above is 122 x 390px.

If I edit the image in photoshop, make it 390 x 390, giving it some white space, it will display OK

 

if I follow the link to the cache, it displays OK.

 

[bsmither]

Those two files are still not found at the sterlingworkshopsupplies store.

But I see that you are working on cabletiesonline. There has been no change to the file cubecart.css at cabletiesonline. I explained why the image is large in an earlier post.

 

[keat]

I changed it back again when it didn't work.

The sterling site was the pre-cursor to the cableties upgrade, which went ahead today.

I've just restored the modified css if you want to take a look.

 

[bsmither]

I see that cubecart.common.css is now missing.

[keat]

THis FTP is frying my brain. I'm having to do this remotely from home on my work PC, as I can't seem to FTP directly from home, and I keep making schoolboy errors, like renaming the wrong CSS file.

[bsmither]

I see in cubecart.css, this:

a.open-clearing #img-preview {
    width: 100%;
}

So, the height went away, but it is the width that needs to disappear.

[keat]

yet another schoolboy blunder.

 

in my css file the lines go:

a.open-clearing #img-preview {
    width: 100%;
    height: 100%;

In yours they go:

 

a.open-clearing #img-preview {
  height: 100%;   

width: 100%;
 

Not paying attention, I commented out the bottom line...

[bsmither]

I copy them from Firebug as opposed to the source. Firebug sorts the rules alphabetically, and groups them where possible if Firebug is configured that way.

Do you have a product with gallery images (additional images other than the main image)?

This additional CSS rule was put in place in an attempt to fix the gallery images from jumping around. If you don't have any and never plan to have any, you don't need this newly added rule.

[keat]

I'm not aware of any on this site, lots on our main web site, but this is running MIcan

[bsmither]

And now, in cubecart,css, near line 5:

Find:

a.open-clearing {
     display: block;
     overflow: hidden;
}

Change to:

a.open-clearing {
     display: block;
     overflow: hidden;
     text-align: center;
}

 

[keat]

I did that, what does that do ?

[bsmither]

It will (should) center the image in the space provided.

[keat]

I cleared the cache and now can't get in to admin. I'm not sure it's related though