WooCommerce单品形象模糊,体积小。实际图像较大

时间:2013-08-04 作者:naquiuddin

woocommerce产品页面中的图像模糊且不清晰。您可以通过下面的链接看到这一点。

http://childdevelopmentinfo.com/shop/discipline-your-kid-the-right-way-without-shouting-or-spanking/

在更改woocommerce目录设置中的图像尺寸后,我尝试更改CSS并重新生成缩略图,但这种情况仍然存在。

这个问题很奇怪。我认为问题在于产品形象。woocommerce的php文件,返回的是缩略图大小的小图像,而不是中等大小的图像。下面是返回图像的代码。

$image = get_the_post_thumbnail( $post->ID, apply_filters(\'single_product_large_thumbnail_size\', \'shop_single\' ) );
$image_title = esc_attr( get_the_title( get_post_thumbnail_id() ) );
$image_link = wp_get_attachment_url( get_post_thumbnail_id() );
$attachment_count   = count( $product->get_gallery_attachment_ids() );
知道出了什么问题吗?

谢谢

2 个回复
SO网友:TomHarrigan

我认为@JMau指的是以下内容:

enter image description here

实际图像的宽度只有211像素,显示宽度为281像素,因此发生了像素化。

这里更大的问题是,显示在主产品图像左侧的小缩略图图像会使对齐偏离。将以下内容添加到自定义CSS样式中以修复对齐:

.single-product.woocommerce .product .avatar {
width: 10%;
}
.single-product.woocommerce .product .avatar img {
max-width: 100%;
height: auto;
}
.single-product.woocommerce .product .images {
width: 37%;
}
这将导致所有内容都放在同一行上,而不是将标题/价格/添加到购物车按钮移到图像下方,如下所示:

enter image description here

这也会导致主产品图像始终以217px的宽度显示(我看到它目前在您的产品中有所不同),并且还会减少示例链接上的像素化,因为现在的差异将仅为6px,而不是70px。

SO网友:JMau

看看source file, 您试图以大比例显示一幅小图像,这就是为什么会出现这种模糊。

您必须上载另一个源图像(更大、更高),并可能重新生成缩略图。

结束

相关推荐

How do WP child-themes work?

好的,我已经设置了主主题,现在我创建了一个名为interio\\u child的子主题。从这些instructions 我知道您只需要添加样式。css文件,用于链接到主主题。此外,您还可以添加其他文件来覆盖主主题中的代码。现在我已经激活了我的孩子主题。它只显示“我的子主题”文件夹中的代码,而不显示CSS。这怎么可能?我看过很多教程和wordpress支持主题,但我无法将这个儿童主题链接到我的主主题。这些是我的孩子主题风格的内容。css:/* Theme Name: Interio Child&#x