Layout list.phtml上的Magento图像

我希望产品清单的样式与此处类似：

CSS只让我走了这么远。My list.phtml目前是库存（来自空白主题）。 我希望有我的第一个和最后一个图像显示在一个不同的大小作为其余的产品图像和调整相应的网格。然后我会假设我必须修改ul以适应这些更改，但我自己不能这样做，这就是我需要帮助的地方

任何建议，让我在正确的（逻辑）方向将不胜感激。谢谢你的阅读

---

编辑：我没有编辑任何核心文件。这是关于List.ptML在空白（或任何）主题中找到的。

< P>一个关于MaMto to的最难的部分是理解整体。花一些时间了解模板和设计覆盖

实际上：

• 在magento design director实例中创建新的主题目录
• 将list.phtml复制到新设计目录中的同一目录中
• 对副本进行更改
• 在配置的设计区域中指定新的主题目录作为覆盖

这就是你在坚果壳里需要做的。不要只是开始更改Magento core中的list.phtml…如果这样做，以后你会后悔的：）

---后期添加---

为了实现布局，我建议在第一项和第十项（在您的示例中）添加某种“计数器”，在第一项和第十项上插入一些额外的css类

您还可以编辑布局xml文件，使列表一次显示10（如果不是直接通过配置）

编辑：

<?php // Grid Mode ?>

<?php $_collectionSize = $_productCollection->count() ?>
<?php $_columnCount = $this->getColumnCount(); ?>
<?php $lastItem = 10; // added this line ?>
<?php $i=0; foreach ($_productCollection 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; ?>
            <?php if($i==0): ?> firstItem<?php elseif($i==($lastItem-1):?> lastItem<?php endif; // added this line ?>">
            <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" class="product-image"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135); ?>" width="135" height="135" alt="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" /></a>

谢谢你的评论，克里斯。我不是在编辑magento core list.phtml，而是在空白主题模板中编辑的。我不是设计覆盖方面的专家，但在一定程度上理解模板。我正在寻求有关如何修改模板文件以实现此布局的帮助。@SilverSlugger--我在我的答案中添加了一些内容，这是吗lp？此计数器似乎符合逻辑，但不确定如何对其进行编码。您或任何人是否可以提供代码示例？感谢代码。我在list.phtml中尝试了此代码，但第二行似乎破坏了布局，因为我的屏幕大部分为白色。我使用了2列左侧，它删除了主列和侧栏。