Sharing is helping.

We offer you this space to share your knowledge about Magento and learn from our experienced customers.

    I wanted to show some featured products on the homepage, different to the existing carousel featured products.

    I have managed to implement:

    The problem I have is the products appear in one narrow column rather than four columns which I want.

    I'm sure my code is missing one piece of vital data, but I do not know what it is. Can anyone help please?

    This is my code:

    <div id="home-featured">
    	<div class="page-title featured-title">
            <h3><?php echo $this->__('Featured products') ?></h3>
    		// some helpers
    		$_helper = $this->helper('catalog/output');
    		$storeId = Mage::app()->getStore()->getId();
    		$catalog = $this->getLayout()->createBlock('catalog/product_list')->setStoreId($storeId);
    		// get all products that are marked as featured
    		$collection = Mage::getModel('catalog/product')->getCollection();
    			array('attribute' => 'featured_product', 'eq' => true),
    		// if no products are currently featured, display some text
    		if (!$collection->count()) :
    	<p class="note-msg"><?php echo $this->__('There are no featured products at the moment.') ?></p>
    	<?php else : ?>
    	<div class="category-products">
    		$_collectionSize = $collection->count();
    		$_columnCount = 4;
    		$i = 0;
    		foreach ($collection as $_product) :
    			$_product = Mage::getModel('catalog/product')->setStoreId($storeId)->load($_product->getId());
    	    <?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 class="preview" rel="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(300, 300); ?>" href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(170); ?>" width="170" height="170" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" /></a>
    	            <div style="width:170px;" align="justify"><h4 class="product-name"><a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>"><?php echo $_helper->productAttribute($_product, $_product->getName(), 'name') ?></a></h4>
    	            <?php if($_product->getRatingSummary()): ?>
    	            <?php echo $this->getReviewsSummaryHtml($_product, 'short') ?>
    	            <?php endif; ?>
    	            <?php echo $this->getPriceHtml($_product, true) ?>
    	            <div class="actions">
    	                <ul class="add-to-links">
    	                    <?php if ($this->helper('wishlist')->isAllow()) : ?>
    	                        <li><a href="<?php echo $this->helper('wishlist')->getAddUrl($_product) ?>" class="link-wishlist"><?php echo $this->__('Add to Wishlist') ?></a>
    	                    <?php endif; ?>
    	                    <?php if($_compareUrl=$catalog->getAddToCompareUrl($_product)): ?>
    	                        <span class="separator">|</span> <a href="<?php echo $_compareUrl ?>" class="link-compare"><?php echo $this->__('Compare') ?></a></li>
    	                    <?php endif; ?>
    					<?php if($_product->isSaleable()): ?>
    	                    <button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onclick="setLocation('<?php echo $catalog->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; ?>
    	    <?php if ($i%$_columnCount==0 || $i==$_collectionSize): ?>
    	    <?php endif ?>
    		<?php endforeach ?>
            <script type="text/javascript">decorateGeneric($$('ul.products-grid'), ['odd','even','first','last'])</script>
    	<?php endif ?>