WooCommerce在描述页面中显示图像模糊

时间:2012-10-20 作者:user159377

我正在使用Woocommerce plugin. 大多数事情都运行良好,只需稍作改动。但我面临着一个关于图像的问题。我已经上传了将在产品库中显示的特色图像的图像,该图像显示良好,但当我只需单击产品图像来查看产品描述时,它显示的图像模糊。为了知道我在谷歌上搜索的原因,我在this page. 但我不明白solution. 如何使用它。在这里,我附上了我的产品类别、产品描述图像屏幕截图和插件设置中图像的设置。欢迎对此问题提供任何帮助和建议。

Product category image

enter image description here

Product description image

enter image description here

Image settings from the woocommerce plugin

enter image description here

5 个回复
SO网友:Pieter

屏幕截图中显示的产品图像具有不同的尺寸。您应该将单个产品图像大小设置为225px,然后使用以下插件重新生成缩略图:http://wordpress.org/extend/plugins/regenerate-thumbnails/

SO网友:Steve

这是WooCommerce的一个记录良好的问题,关于如何解决这个问题,有好几个Tut。我列出了对我最有帮助的两个。

WooCommerce Documentation

The Design Guys

通过将以下内容添加到主题的样式表中,还可以覆盖WooCommerce css文件中的100%宽度声明:

div.product div.images img, #content div.product div.images img {
    width: auto ! important;
}

SO网友:paultp

woocommerce图像模糊的原因是,woocommerce css是为响应主题而设计的,但目录设置中的缩略图设置是特定的像素大小。

Woocommerce在他们的文档中涵盖了这一点,但他们的解释和修复方法并不完全正确。看见http://wcdocs.woothemes.com/tutorials/using-the-appropriate-product-image-dimensions/

我将使用一个示例来显示产品图像的情况(显示在单个产品页面上):

原始图像为500 x 500(假设)Woocommerce目录单个产品图像设置为300 x 300,因此会生成原始图像的300 x 300缩略图。产品页面image div class=“images”css设置为宽度:48%;在我的屏幕上,这48%相当于470 x 470的图像大小,因此300 x 300缩略图被拉伸到470 x 470,使其变得模糊。

由于缩略图的大小是固定的,这也会破坏响应主题的响应能力。

您可以更改css以适应缩略图大小,也可以更改单个产品图像大小以适应原始图像大小(或至少大于您认为的48%宽度将拉伸缩略图的大小)。编辑:实际上你可以同时做这两件事。

可能目录设置页面上的其他缩略图设置也存在类似问题。

对我来说,这是woocommerce的问题,而不是其他人的主题问题。

SO网友:mirage

在woocommerce中定义了屏幕截图(模糊截图)中的图像宽度。css宽度:100%,可能导致拉伸。您可以在样式中覆盖此内容。css通过定义:div.product div.images img,#content div.product div.images img{宽度:200px!重要;}

SO网友:Katie

我找到了一种适合我的迂回方式,尽管这是一项额外的工作。

尽可能地发布新产品,然后在wordpress博客上查看。右键单击主照片,然后单击inspect element。将鼠标悬停在突出显示的文本上,找出宽度和高度(第一个数字,而不是括号中的数字)以及上载路径(例如:www.yourwebsite.com/blog/wp-content-uploads/yourfilenames)。

进入照片编辑软件,重新调整照片大小以匹配尺寸,然后将文件重新上载到同一路径并覆盖它。我使用服务器插件add来手动上载文件,所以我只是从ftp客户端进入文件夹。我在WooCommerce博客上对每一张模糊的照片都这样做。

经过多次尝试,我发现这对我来说是最容易的,尽管这是额外的工作。图片很清晰:)

结束

相关推荐

Images in wp_mail not showing

我创建了一个发送电子邮件的插件:$subject = \'New comment - \'.$post_title; ob_start(); include(SUBSCRIBE_USER_BASE_DIR . \'/email/message.php\'); $message = ob_get_clean(); foreach($user_emails as $user_email){ $to = $user