Question

我正在使用自定义模板运行magento。我一直在尝试将新产品小部件（无论是网格还是列表）的图像大小扩大为232px宽度和280px长度。我已成功找到new_grid.phtml和new_list.phtml文件应用程序/设计/前端/基/默认/模板/目录/产品/部件/新/内容。我还将图像尺寸从我认为85px宽度和85px长度改为我想要的232px宽度和280px长度。而不是放大图像的帧和图像本身，图像似乎被放大，但帧保持相同，为85px 85px。那么你只能在85px乘85px的图像帧中看到一小部分图像。我正在谈论的小部件是可以从CMS页面插入的新产品小部件。我正在运行magento社区版1.7

以下是new_grid.phtml的代码段。任何帮助表示赞赏。感谢

<div class="widget-products">
<?php $_columnCount = $this->getColumnCount(); ?>
    <?php $i=0; foreach ($_products->getItems() as $_product): ?>
    <?php if ($i++%$_columnCount==0): ?>
    <ul class="products-grid">
    <?php endif ?>
        <li class="item<?php if(($i-1)%$_columnCount==0): ?> first<?php elseif($i%$_columnCount==0): ?> last<?php endif; ?>">
            <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>" class="product-image"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(232,280) ?>" width="232" height="280" alt="<?php echo $this->stripTags($_product->getName(), null, true) ?>" /></a>
            <h3 class="product-name"><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>)"><?php echo $this->helper('catalog/output')->productAttribute($_product, $_product->getName() , 'name') ?></a></h3>
            <?php echo $this->getReviewsSummaryHtml($_product, 'short') ?>
            <?php echo $this->getPriceHtml($_product, true, '-widget-new-grid') ?>
            <div class="actions">
                <?php if ($_product->isSaleable()): ?>
                    <button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button>
                <?php else: ?>
                    <p class="availability out-of-stock"><span><?php echo $this->__('Out of stock') ?></span></p>
                <?php endif; ?>
                <ul class="add-to-links">
                    <?php if ($this->helper('wishlist')->isAllow()) : ?>
                        <li><a href="<?php echo $this->getAddToWishlistUrl($_product) ?>" class="link-wishlist"><?php echo $this->__('Add to Wishlist') ?></a></li>
                    <?php endif; ?>
                    <?php if($_compareUrl=$this->getAddToCompareUrl($_product)): ?>
                        <li><span class="separator">|</span> <a href="<?php echo $_compareUrl ?>" class="link-compare"><?php echo $this->__('Add to Compare') ?></a></li>
                    <?php endif; ?>
                </ul>
            </div>
        </li>
    <?php if ($i%$_columnCount==0 || $i==count($_products)): ?>
    </ul>
    <?php endif ?>
    <?php endforeach; ?>

Answer 1

这几乎肯定是一个CSS问题。

您似乎正在正确调整图片大小：

<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(232,280) ?>

要确保您的新模板得到处理布局，您可以在system / configuration / developer选项卡中启用模板提示。

假设你已经做到了这一点，很可能在css中重置为85px。

来自 widgets.css

.widget-new-products .products-grid .product-image,
.widget-new-products .products-list .product-image { width:85px; height:85px; }

我强烈建议您在自己喜欢的浏览器检查工具中查找，以确定哪些规则正好覆盖了服务器端的更改。

欢呼声

Answer 2

对于任何遇到这种情况的人，就像我做的那样......

通过更改new.phtml中的网格列表来纠正我：

<ul class="products-grid">

到：

<ul class="products-grid products-grid--max-<?php echo $_columnCount; ?>-col">

Answer 3

您可以使用CSS图像将高度和宽度设置为所需的值，而无需更新

之类的模板

<Your Image class/id>{
width:50%;
max-width:100%;
}

2）或者您可以将js用作

jQuery("document").ready(function() {
    jQuery(".product-image img").attr({ width: "100%", height: "auto" });
});

Magento新产品小部件图像调整大小

3 个答案: