Easy Catalog Images

EasyCatalogImages allows you to show category listing of the specified parent category.

It’s very helpful to improve browsing experience in categories with a lot of child categories.

Contents

1. Installation
2. Changelog
3. Configuration
4. Block options
5. Custom usage examples
   1. Inline php code
   2. Layout xml code
   3. Inline block for magento cms filter
6. Use cases
   1. Show block below the category title
   2. Show block for certain category only
   3. Remove block from certain category
   4. Display images near subcategories
7. Compatibility issues
8. Troubleshooting

Configuration

General

• Enabled
• Use category image, when thumbnail is not available
• Use image helper to resize images
• Background color

Category page

• Enabled for default categories
• Enabled for anchor categories
• Hidden, when filter or pagination is used
• Number of categories to show
• Columns count
• Show images
• Image width
• Image height
• Number of subcategories to show

Automated Image Assignment

Have a lot of categories without images?

This option will help you fill the categories thumbnails with image of the first product of each category.

Options

You can find how to use these options in the Custom Usage section.

Custom Usage

Below you will find examples of custom usage of the module block with all available options.

Inline call to use in magento cms blocks and pages

{{widget type="easycatalogimg/widget_list" category_count="100" subcategory_count="5" column_count="4" show_image="1" image_width="200" image_height="200" template="tm/easycatalogimg/list.phtml"}}

Inline php code

<?php echo $this->getLayout()
    ->createBlock('easycatalogimg/list')
    ->setTemplate('tm/easycatalogimg/list.phtml')
    ->setEnabledForAnchor(true)
    ->setEnabledForDefault(true)
    ->setCategoryCount(4)
    ->setSubcategoryCount(3)
    ->setColumnCount(4)
    ->setShowImage(true)
    ->setImageWidth(200)
    ->setImageHeight(200)
    ->setHideWhenFilterIsUsed(false)
    ->setCategoryId(8)
    ->setCategoryToHide('1,2,3')
    ->setCategoryToShow('4,5,6')
    ->toHtml(); ?>

Layout xml code

<block type="easycatalogimg/list" name="subcategories" template="tm/easycatalogimg/list.phtml">
    <action method="setColumnCount"><count>4</count></action>
    <action method="setShowImage"><flag>1</flag></action>
    <action method="setImageHeight"><height>200</height></action>
    <action method="setImageWidth"><width>200</width></action>
    <action method="setCategoryCount"><count>4</count></action>
    <action method="setSubcategoryCount"><count>3</count></action>
    <action method="setResizeImage"><flag>1</flag></action>
    <action method="setUseImageAttribute"><flag>1</flag></action>
    <action method="setEnabledForAnchor"><flag>1</flag></action>
    <action method="setEnabledForDefault"><flag>1</flag></action>
    <action method="setHideWhenFilterIsUsed"><flag>0</flag></action>
    <action method="setCategoryId"><category>8</category></action>
    <action method="setCategoryToHide"><category>1,2,3</category></action>
    <action method="setCategoryToShow"><category>4,5,6</category></action>
</block>

Use cases

Show block below the category title

1. Navigate to System > Configuration > TM > EasyCatalogImages > Category and disable the following options:

   Enabled for default categories
   Enabled for anchor categories
   

2. Open app/design/frontend/base/default/template/catalog/category/view.phtml

   Please note that, your theme may override this template, so you need to edit your theme template, instead of this one.

3. Add the following code, where you wish to:

   <?php
       echo $this->getLayout()
           ->createBlock('easycatalogimg/widget_list')
           ->setTemplate('tm/easycatalogimg/list.phtml')
           ->setCategoryCount(10)
           ->toHtml();
   ?>
   

   See the additional options at inline php code section.

4. Save the file and clear the cache.

Show block for certain category only

1. Navigate to CMS > Static Blocks and create new block with following content:

   Block Title:    EasyCatalogImages
   Identifier:     EasyCatalogImages
   Store View:     All Store Views
   Status:         Enabled
   Content:        {{widget type="easycatalogimg/widget_list" category_count="100" subcategory_count="5" column_count="4" show_image="1" image_width="200" image_height="200" template="tm/easycatalogimg/list.phtml" hide_when_filter_is_used="1"}}
   

2. Navigate to System > Configuration > TM > EasyCatalogImages > Category and disable the following options:

   Enabled for default categories
   Enabled for anchor categories
   

3. Navigate to Catalog > Manage Categories
4. Select some category

5. Switch to Display Settings tab and set the following values:

   Display Mode:   Static block and products
   CMS Block:      EasyCatalogImages
   

6. Save category and clear the cache.

Remove block from certain category

1. Navigate to Catalog > Manage Categories
2. Select some the category

3. Switch to Custom Design tab and add the following code to Custom Layout Update field:

   <remove name="subcategories"/>
   

4. Save category and clear the cache.

Display images near subcategories

1. Open app/design/frontend/base/default/template/tm/easycatalogimg/list.phtml and find the following lines:

   <li>
       <a href="<?php echo $_subcategory->getUrl() ?>"
           title="<?php echo $this->htmlEscape($_subcategory->getName())?>"
           class="category-name child-category"><?php
           echo $this->htmlEscape($_subcategory->getName());
       ?></a>
   </li>
   

2. Replace them with:

   <li>
       <a href="<?php echo $_subcategory->getUrl() ?>"
           title="<?php echo $this->htmlEscape($_subcategory->getName())?>"
           class="category-name child-category"
           ><img src="<?php echo Mage::helper('easycatalogimg/image')->resize($this->getImage($_subcategory), 60, 60) ?>"
               width="60"
               height="60"
               alt="<?php echo $this->htmlEscape($_subcategory->getName()) ?>"
           /><?php
           echo $this->htmlEscape($_subcategory->getName());
       ?></a>
   </li>
   

3. Save file and clear the cache

4. Add the css styles to your theme to make subcategory links look nice:

   .easycatalogimg .list-subcategories li {
       background: none !important;
       padding: 0 !important;
       line-height: 60px !important;
   }
   .easycatalogimg .list-subcategories li a {
       text-decoration: none !important;
   }
   .easycatalogimg .list-subcategories li img {
       margin-right: 4px !important;
   }
   

Compatibility issues

Amasty Shopby extension

Extension option ‘Hidden, when filter or pagination is used’ does not work properly with Shopby extension from Amasty.

Solving - remove few lines at app/code/local/Amasty/Shopby/Block/Catalog/Layer/View.php in method _prepareLayout(). Below is code that has to be removed/commented:

if($productsBlock = Mage::app()->getLayout()->getBlock('category.products')) {
    $productsBlock->getCmsBlockHtml();
}