title: Not getting product images in category page
body: <p>I am still a newbie to Magento. I am trying to do display product images on the category listing page of my custom theme, but somehow this shows up Organic terra safflower oil in the html after the page is rendered and the link seems broken, <em>though a file exists in the location and with all the necessary file permissions</em>. I have scoured the forums and tried all possible fixes from flushing the cache and reindexing to no avail.</p>
  
  <pre><code>&lt;?php $_productCollection=$this-&gt;getLoadedProductCollection();
      $_helper = $this-&gt;helper('catalog/output');?&gt;
      &lt;?php $_iterator = 0; ?&gt;
      &lt;?php $_columnCount = $this-&gt;getColumnCount(); ?&gt;
      &lt;section class="container"&gt;
        &lt;?php $i=0; foreach ($_productCollection as $_product): ?&gt;
        &lt;?php if ($i++%$_columnCount==0): ?&gt;    
        &lt;div class="row&lt;?php if(($i-1)%$_columnCount==0): ?&gt; first&lt;?php elseif($i%$_columnCount==0): ?&gt; last&lt;?php endif; ?&gt;"&gt;
         &lt;?php endif ?&gt;
        &lt;div class="four columns"&gt;
          &lt;div class="productDisplay"&gt;
            &lt;div class="productImage"&gt;
               &lt;a href="&lt;?php echo $_product-&gt;getProductUrl() ?&gt;" title="&lt;?php echo $this-&gt;stripTags($this-&gt;getImageLabel($_product, 'small_image'), null, true) ?&gt;" class="img-responsive"&gt;&lt;img src="&lt;?php echo $this-&gt;helper('catalog/image')-&gt;init($_product, 'small_image'); ?&gt;" alt="&lt;?php echo $this-&gt;stripTags($this-&gt;getImageLabel($_product, 'small_image'), null, true) ?&gt;" /&gt;&lt;/a&gt;
            &lt;/div&gt;          
            &lt;hr style="width:20%; margin-top: 11px; margin-bottom: 12px; margin-left: auto;"&gt;
            &lt;div class="productName"&gt;&lt;a href="&lt;?php echo $_product-&gt;getProductUrl() ?&gt;" title="&lt;?php echo $_productNameStripped; ?&gt;"&gt;&lt;?php echo $_helper-&gt;productAttribute($_product, $_product-&gt;getName() , 'name'); ?&gt;&lt;/a&gt;&lt;/div&gt;
            &lt;div class="productPrice"&gt;&lt;?php echo $this-&gt;getPriceHtml($_product, true) ?&gt;&lt;/div&gt;
            &lt;?php if($_product-&gt;isSaleable()): ?&gt;
              &lt;button type="button" title="&lt;?php echo Mage::helper('core')-&gt;quoteEscape($this-&gt;__('Add to Cart')) ?&gt;" class="addToCartButton button" onclick="setLocation('&lt;?php echo $this-&gt;getAddToCartUrl($_product) ?&gt;')"&gt;&lt;span&gt;&lt;span&gt;&lt;?php echo $this-&gt;__('Add to Cart') ?&gt;&lt;/span&gt;&lt;/span&gt;&lt;/button&gt;
                &lt;?php else: ?&gt;
                  &lt;p class="availability out-of-stock"&gt;&lt;span&gt;&lt;?php echo $this-&gt;__('Out of stock') ?&gt;&lt;/span&gt;&lt;/p&gt;
                  &lt;?php endif; ?&gt;
            &lt;/div&gt; 
         &lt;/div&gt;   
        &lt;?php if ($i%$_columnCount==0 || $i==$_collectionSize): ?&gt;
        &lt;/div&gt;
        &lt;?php endif ?&gt;
        &lt;?php endforeach ?&gt;   
      &lt;/section&gt;
  &lt;!-- Script for Pop-Out side Menu--&gt;
  &lt;!-- Created by Sayan Sarkar on 21/01/2016 --&gt;
  &lt;script&gt;
  (function() {
    var body = $('body');
    $('.categoryButton').bind('click', function(){
        body.toggleClass('menu-open');
        return false;
    });
  })();
  (function() {
    var body = $('body');
    $('.menuclose').bind('click', function(){
        body.toggleClass('menu-open');
        return false;
    });
  })();
  &lt;/script&gt;
  </code></pre>
  
  <p>Firstly, I am confused as to why the default image gets displayed when the product image appears in the product detail page. Any help will be highly appreciated.</p>