Images scaled up

It’s pretty easy really. The images that you’re using are (a lot) smaller than they should be, so they have ot be scaled up to fit into the area that’s available.

There’s two options. One easy, one slightly complicated.

First, and easist, use larger-sized images. Normally a minimum of 800 x 800 is recommended as that’s a pretty standard size for most shop themes.

Second, change the CSS to set the image width is “auto” instead of “100%”.

.storefront-pro-active.single-product div.product .woocommerce-product-gallery img {
	width: auto;
}

BUT… be aware that doing that will affect the images, so there’s really more than just that to make it work perfectly.

The website has some images that are over 10 years old, and I cant retake some of them, so I have to use the images I’m supplied. 800 x 800 would be great in a perfect world, but for not I just want to use what I have without storefront stupidly blowing them up.

second, that css did nothing. As you can see on the homepage, that blue ring is still scaled up and giant.

Not so easy in the end, but thanks for the effort.

EDIT: I also tried changing auto to 100%, 50%, 20% without result.

No.. of course it didn’t work on the homepage. That CSS doesn’t target the proper elements on the home page. It’s not meant to. Just the product pages. You can set more CSS selectors to increase this. As an idea, the homepage image can be targeted usin…

.wp-block-media-text > figure > img, .wp-block-media-text > figure > video

And when I set that width to ‘auto’ using the browser tools here, it works exactly as you’ve asked for it to.

“No.. of course it didn’t work on the homepage”

How would anyone possibly know that if they don’t use wordpress all the time. Its so counterintuitive that something that works in one area does not work in another?

Your new css didn’t does nothing as well. It gives me an error expecting a brace? was I supposed to copy and paste the entire block or am I missing another “of course” somewhere?

FYI, i dont have a masters in computer coding. Just basic html. I chose wordpress as an EASIER route, which has been a massive mistake.

I’m sorry. When people ask questions like this they normally have some knowledge of CSS. I shouldn’t have guessed at that one.

For what you need, you can paste this…

.storefront-pro-active.single-product div.product .woocommerce-product-gallery img,
.wp-block-media-text > figure > img {
	width: auto;
}

YAY! that stopped the scaling. well done. Any way to align the image so its not left? Is there a page of css customisations that I could read?

THX

EDIT, but of course in the page editor it still looks broken

• This reply was modified 6 years ago by danielcjtodd.

You could add in (needs tt go in the brackets…)

display: block;
margin: 0 auto;

That should work.

As far as a page to read, there’s several 1,000 of them as CSS can be a very complicated system. Just do some googleing of your problem when you find it and you can end up finding out what you want to do.

hmm. That makes it hard to help myself if I dont know what to look for. Thanks again.

Last question: Different issue. the Image on the home page that I am using is using a media and text block. I cant figure out how to make the home page image a “featured product” image (the one with the star next to it in my products.

What im trying to do is show a random featured product image each time you come to the homepage?

Is that possible? (I should really re-post this issue into a new post, but I thought Id fire it at you first as you seem to know whats going on.

Cheers,
Dan

Possible? Yes. Easy? Probably not.

The probem is that you’ll need to find a widget or text block that can drag in a random item each time. That might not exist, and if not you’ll have to make it yourself (hence the “probably not easy” rating for this).