Magento 1.9 – Thumbnails / Store icons for categories and display them in the main category

We have a shop that offers different brands with their own logo. Now we wanted the respective logo as an icon for each brand category / Can deposit thumbnail, in order to then display all logos with the names of the respective brands in the top category “brands”.

In Magento 1.9 the possibility to store a thumbnail per category next to an image is no longer included. In 1.8 this was still possible.

In order to reactivate this possibility in the first step, a new attribute for the categories must be integrated. We do this with three SQL commands directly in the database.

INSERT INTO `eav_attribute` (`attribute_id`, `entity_type_id`, `attribute_code`,`attribute_model`, `backend_model`, `backend_type`, `backend_table`, `frontend_model`,`frontend_input`, `frontend_label`, `frontend_class`, `source_model`, `is_required`,`is_user_defined`, `default_value`, `is_unique`, `note`) VALUES(120, 3, 'thumbnail', NULL,'catalog/category_attribute_backend_image', 'varchar', NULL, NULL, 'image', 'Thumbnail', NULL, NULL, 0, 0, NULL, 0, NULL);

INSERT INTO `catalog_eav_attribute` (`attribute_id`, `frontend_input_renderer`,`is_global`, `is_visible`, `is_searchable`, `is_filterable`, `is_comparable`,`is_visible_on_front`, `is_html_allowed_on_front`, `is_used_for_price_rules`,`is_filterable_in_search`, `used_in_product_listing`, `used_for_sort_by`,`is_configurable`, `apply_to`, `is_visible_in_advanced_search`, `position`,`is_wysiwyg_enabled`, `is_used_for_promo_rules`) VALUES (120, NULL, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, NULL, 0, 0, 0, 0);

INSERT INTO `eav_entity_attribute` (`entity_attribute_id`, `entity_type_id`,`attribute_set_id`, `attribute_group_id`, `attribute_id`, `sort_order`) VALUES (337, 3, 3, 4, 120, 3);

It is important here, that the ID of the new attribute must be set individually for each shop. Therefore in the table above eav_attribute go and see which ID was last assigned (e.g.. 2 x Click on the first column heading “attribute_id”, to have the largest ID at the top) and then the next one instead of the one given in the commands above 120 to take (in every command!).

Then run.

The new attribute is now available in the category management and thumbnails can be stored.

In order to have the icons of the subcategories displayed in a grid on the top category page, the shop installation is now accessed via FTP and a new file is created

/app/design/frontend/rwd/drinksandco/template/catalog/category/cat-thumbs.phtml

We put the following content into this file:

<?php
$category = Mage::getSingleton('catalog/layer')->getCurrentCategory();
$categories = $category->getCollection()
        ->addAttributeToSelect(array('name', 'thumbnail'))
        ->addAttributeToFilter('is_active', 1)
        ->addIdFilter($category->getChildren())
        ->addAttributeToSort('position');
?>
<ul class ="subcategories">
    <?php foreach ($categories as $category): ?>
        <li>
            <a href="<?php echo $category->getUrl() ?>"><img src ="<?php echo Mage::getBaseUrl('media') . 'catalog' . DS . 'category' . DS . $category->getThumbnail() ?>" alt ="<?php echo $this->htmlEscape($category->getName()) ?>" /></a>
        </li>
    <?php endforeach; ?>
</Street>

Would you like to have the name of the category under the logo?, you can add this line before the closing one </a> incorporate

<span><?php echo $category->getName() ?></span>

Now we create a new static block called “Cat-Thumbs” (or as you like) and the code “cat-thumbs”.

The content of this block is then

{{block type="core/template" template ="catalog/category/cat-thumbs.phtml"}}

Then in the desired main category under” "Display Settings" either "Only static block" selected if only the subcategories from the static block are to be displayed. However, products should also be displayed, the correct setting would be “Static block and article”.

Either way you select the block you just created and save it.

The last thing to do is to make your side pretty. You can then adjust the display with CSS, that it likes.

One possibility would be e.g..

.subcategories li {
    float: left; 
    display: block; 
    margin: 25px;
}
.subcategories li span {
    display: block; 
    margin: 8px 0;
}
.subcategories {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
}

Of course, you can work this out much more.

Ready!

Who has problems with the display of the specific subcategories, can on the comments this side evtl. to find help.