Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Page 11 of 12
SOLVED: Almost there - categories on homepage working but images aren’t showing up
 
Mancha
Jr. Member
 
Total Posts:  7
Joined:  2010-10-04
 
charford - 29 March 2011 07:02 PM

Hello all,

I spent a bunch of time on this issue and tried about everything I could. What I was trying to find is a way for my subcategories to show up under my main categories in grid view, instead of just displaying all the products. I know a lot of this has been covered, but I just wanted to put out all the code and steps that worked for me. Also, I am running 1.5.0.1 so it should work with any of the latest versions. Hopefully I don’t forget anything as I did all this about 3 days ago. I have copied a lot of this from other forums, but this is not exactly like Avera’s forum post- I am using different code from DirectLowVoltage to get the grid layout. If you want to see an example of all this code working, just visit my categories page…

(rest of quote removed for character limit...)

charford - thanks for much for your detailed explanation. I followed this precisely as you outlined and everything is working in version 1.6.1.0 except the category images. getImageUrl() is not returning the image URL. When I look at the html source, the src attribute of the images is empty.

I’m using a local version of Navigation.php and copied the function you specified and it’s still not working. Do you have any suggestions or does anyone have any insight into getting this to work for version 1.6.1.0?

Many thanks to everyone who contributed to this thread… just need the images to show and it will be working!

 
Magento Community Magento Community
Magento Community
Magento Community
 
Mancha
Jr. Member
 
Total Posts:  7
Joined:  2010-10-04
 

Well hot damn, I finally figured out the problem with getting category images to display in version 1.6.1.0 (I assume this applies to version 1.5+ as well, but it’s not tested for that version). The problem lies with the attribute set defined in getCurrentChildCategories(). The correct attribute for categories should be “thumbnail” not “image.” Perhaps this was changed in version 1.5+. I really don’t know. All I know is the following changes to charford’s solution solves the problem and the category thumbnails are now showing.

Follow charford’s solution, posted here: http://www.magentocommerce.com/boards/viewreply/312377/ and then make the following changes:

1. Open /app/code/local/Mage/Catalog/Block/Navigation.php (this assumes you’re using a local version of this file, otherwise this file is located in /app/code/core/Mage/Catalog/Block/Navigation.php)

2. Find the getCurrentChildCategories() function

3. Change the following attribute:

->addAttributeToSelect('image')

to

->addAttributeToSelect('thumbnail')

4. Open /app/design/frontend/[template dir]/[template dir]/template/catalog/navigation/subcategory_navigation.phtml

5. Replace the “getImageUrl()” function with “getThumbnailUrl()” as follows:

Change:

<img src="<?php echo $_category->getImageUrl() ?>" width="180" alt="<?php echo $this->htmlEscape($_category->getName()) ?>" />

to

<img src="<?php echo $_category->getThumbnailUrl() ?>" width="180" alt="<?php echo $this->htmlEscape($_category->getName()) ?>" />

6. Open /app/code/core/Mage/Catalog/Model/Category.php

7. Find the getImageUrl() function and add the following new function immediately below this:

public function getThumbnailUrl()
{
    $url 
false;
    if (
$image $this->getThumbnail()) {
        $url 
Mage::getBaseUrl('media').'catalog/category/'.$image;
    
}
    
return $url;
}

I didn’t bother making a local copy of this particular file because the absence of the “getThumbnailUrl()” function is a known Magento bug (http://www.magentocommerce.com/bug-tracking/issue?issue=11044), so I suspect it will be added in a future release. If you want to play it safe, copy Category.php to the equivalent local directory to make sure it doesn’t get overwritten with a future release.

8. Refresh all caches

Magic. The category thumbnail should now display. If not, let me know. I may have been sloppy with my instructions and missed something.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Essteffan
Jr. Member
 
Total Posts:  8
Joined:  2008-07-03
 

that was brilliant charford!
Thanks a lot.

We have to make a bow to such persons

Best Regards,
Stefan

 
Magento Community Magento Community
Magento Community
Magento Community
 
J6891
Sr. Member
 
Total Posts:  142
Joined:  2010-08-26
 

@Mancha Thank you for your instructions. I too am having difficulty in getting the image to display using Magento 1.6. I have followed your instructions however still no joy. You did say you may have missed something?

 
Magento Community Magento Community
Magento Community
Magento Community
 
muff
Member
 
Total Posts:  33
Joined:  2010-04-21
 
charford - 29 March 2011 07:02 PM

Hello all,

I spent a bunch of time on this issue and tried about everything I could. What I was trying to find is a way for my subcategories to show up under my main categories in grid view, instead of just displaying all the products. I know a lot of this has been covered, but I just wanted to put out all the code and steps that worked for me. Also, I am running 1.5.0.1 so it should work with any of the latest versions. Hopefully I don’t forget anything as I did all this about 3 days ago. I have copied a lot of this from other forums, but this is not exactly like Avera’s forum post- I am using different code from DirectLowVoltage to get the grid layout. If you want to see an example of all this code working, just visit my categories page:

http://www.itrees.com/species.html and http://www.itrees.com/categories.html

OK, so here goes…
.............

charford, you’re the Man! thanx for such a great post.
but after a whole day of brainwashing I still can’t make images to appear! :((
the funniest thing is that I’m also using 1.5.0.1.

Please, can anyone help me?

UPD
also, I’ve noticed that removing/renaming file
/app/code/local/Mage/Catalog/Block/Navigation.php
as well as
/app/code/core/Mage/Catalog/Block/Navigation.php
makes no difference!
There are working links but NO IMAGES of subcategories.

Any ideas??

 
Magento Community Magento Community
Magento Community
Magento Community
 
joe62890
Jr. Member
 
Total Posts:  5
Joined:  2012-01-19
 

I followed Charford’s guide to getting the subcategories to display when you select a category however nothing appears when you select my categories from the left side vertical nav.

http://www.arperformancemotorsports.com/index.php/240sx-s13.html

If you view either of the main categories, when clicked it should display the subcategories with images above but alas, nothing displays.  I’m running version 1.5.1.0.  Any assistance would be much appreciated.

 
Magento Community Magento Community
Magento Community
Magento Community
 
muff
Member
 
Total Posts:  33
Joined:  2010-04-21
 

It seems that you’ve made it, solved the problem with sucategory images! Please, tell us how.

 
Magento Community Magento Community
Magento Community
Magento Community
 
joe62890
Jr. Member
 
Total Posts:  5
Joined:  2012-01-19
 

After struggling for several days without much to go on or available help for the issues I was

having, I have gotten the results I wanted.  I will not take credit for any of the code used;

however, what I am using is a combination of several sources.  Here’s a step-by-step of what is

needed in order to properly display your subcategories in a grid view when you select a main

category.

Step One:  Create a Static Block

Login to your Magento Admin.  Go to CMS -> Static Blocks.  You will then select “Add New Block”

In your new block you will need to fill out a few different field of information:

Block Title:  Subcategory Listing

Identifier: subcategory_listing

Status: Enabled

Content: Use the below code

{{block type="catalog/navigation" 

template="catalog/navigation/subcategory_listing.phtml"}}

Now save your static block.  What you’ve just done is create a static block that will display the

subcategories when you go to the category view.

Step Two:  Create a new file for your code

At this point you will need to create a new .phtml file so that we can create the file your static

block will access.  You can create your .phtml file using many mediums but I prefer to use

Notepad++.  Not only is it easy to use but is very useful since it’s designed to be used when

coding.

Open a new file.  You will want to paste the following code into your new file.

<?php
   $layer 
Mage::getSingleton('catalog/layer');
   
$_category   $layer->getCurrentCategory();
   
$_categories $_category->getCollection()
     

->
addAttributeToSelect(array('url_key','name','image','all_children','is_anchor','description'))
     ->
addAttributeToFilter('is_active'1)
     ->
addIdFilter($_category->getChildren())
     ->
setOrder('position''ASC')
     ->
joinUrlRewrite();
?>

<?php 
foreach ($_categories as $_category): ?>
   
<div class="subcategory-listing"
    
<?php if($_category->getIsActive()):?>
        
<img src="<?php echo $this->htmlEscape($_category->getImageUrl()) ?>" alt="<?php echo 

$this->htmlEscape($_category->getName()) ?>" />
        <
a href="<?php echo $_category->getURL() ?>" title="<?php echo 

$this->htmlEscape($_category->getName()) ?>"><?php echo $this->htmlEscape($_category->getName()) 

?></a>
    
<?php endif; ?>
   
</div
<?php endforeach; ?>

Now you will want to save your new file as subcategory_listing.phtml.

Step Three: Upload subcategory_listing.phtml

You will want to upload subcategory_listing.phtml to the following directory.  By placing it

here, your static block from step one will be able to access the code that is in the file and

display the information we want.

public_html/app/design/frontend/base/default/template/catalog/navigation

Step Four: Setting up your Category

Login to your Magento Admin.  Go to Catalog -> Manage Categories.  Select one of your main

categories you have created.  You will want to upload an image for the “Thumbnail Image” and the

“Image”. 

Make note of the image size you are uploading as this will affect the changes we will need to

make to the .css files.  For my site, I am using Photoshop to edit my image files, creating them

with a image size of 150px by 125px.

Still in your category, select the “Display Settings” tab and use the following settings.

Display Mode: Static block only

CMS Block: Subcategory Listing

Is Anchor: No

After making these changes do not forget to click save category.

I will be posting the last step below.

 
Magento Community Magento Community
Magento Community
Magento Community
 
joe62890
Jr. Member
 
Total Posts:  5
Joined:  2012-01-19
 

Step Five:  Editing styles.css

The final step is to make a few additions to your styles.css file.  This file will allow you to

make changes to the positioning and styling of your code.  If you take notice from when we created

our subcategories_listing.phtml file, we have included a line for a “div class”. I have included a portion of our earlier code to show where.

<?php foreach ($_categories as $_category): ?>
   
<div class="subcategory-listing">  <------------------------This is your div class opening code.
    
<?php if($_category->getIsActive()):?>
        
<img src="<?php echo $this->htmlEscape($_category->getImageUrl()) ?>" alt="<?php echo 

$this->htmlEscape($_category->getName()) ?>" />
        <
a href="<?php echo $_category->getURL() ?>" title="<?php echo 

$this->htmlEscape($_category->getName()) ?>"><?php echo $this->htmlEscape($_category->getName()) 

?></a>
    
<?php endif; ?>
   
</div>        <------------------------This is your div class closing code.
<?php endforeach; ?>

By creating a “div class”, we can make additions to our style sheet that will be reflected directly upon the code between the div tags.

An issue I ran into was the lack of a div class.  Without it the content has a mind of its own and will usually run in a vertical column making your page extremely long and unsightly.  I had to add this div class to the code I used in order to make everything function the way I needed.

Locate and open the styles.css file for your theme.  For my theme, MAGFREE001, the file was located at the following location

public_html/skin/frontend/default/MAGFREE001/css/styles.css

We will need to open this file and add the following code in.  I added it around line 145.

/* Subcategory Listing==================================================================== */
.subcategory-listing {width:157px;height:157px;
                      
font-weight:bold;
                      
text-decoration:underline;
                      
font-size12px;
                      
text-align:center;
                      
float:left;}

What we’ve done is applied styling to our div class “.subcategory-listing” we created when we coded our .phtml file.  If you also remember, I’m using product images with a image size of 150px by 125px.  By designating a width of 157px and a height of 157px, it leaves enough room for our subcategory image width wise but forces our subcategory title beneath the image. The use of text-align:center keeps everything centered within our div class.

I hope that this helps clear up some confusion on how to display subcategories instead of products when selecting a category view.  If anyone follows these steps and still cannot get it to display, please reply here.  I wrote this off of memory and cannot guarantee it 100% but I would love to hear feedback from others to see if it works for them.  If you have issues, please include your web URL and Magento version number so that I can try and help you as best as possible.

 
Magento Community Magento Community
Magento Community
Magento Community
 
muff
Member
 
Total Posts:  33
Joined:  2010-04-21
 

joe62890, thank you very much for such a detailed manual! But unfortunately it didn’t work for me. :( I still have NO images of subcategories. What could be wrong?  I’ve done everything you wrote. And I didn’t forget to attach images to subcategorries. Any ideas?
PS. I’m running ver. 1.5.0.1.

Image Attachments
Игрушки и игры.png
 
Magento Community Magento Community
Magento Community
Magento Community
 
joe62890
Jr. Member
 
Total Posts:  5
Joined:  2012-01-19
 
muff - 06 February 2012 12:16 PM

joe62890, thank you very much for such a detailed manual! But unfortunately it didn’t work for me. :( I still have NO images of subcategories. What could be wrong?  I’ve done everything you wrote. And I didn’t forget to attach images to subcategorries. Any ideas?
PS. I’m running ver. 1.5.0.1.

Could you provide me with a link to your webpage please?  I’d like to look at the html on it.

 
Magento Community Magento Community
Magento Community
Magento Community
 
muff
Member
 
Total Posts:  33
Joined:  2010-04-21
 

Of course! I would appreciate that!
http://testshop.com.ua/toys.html

 
Magento Community Magento Community
Magento Community
Magento Community
 
joe62890
Jr. Member
 
Total Posts:  5
Joined:  2012-01-19
 
muff - 06 February 2012 10:35 PM

Of course! I would appreciate that!
http://testshop.com.ua/toys.html

I cannot view it right now because of my web filter at work but I will take a look at it this evening.

 
Magento Community Magento Community
Magento Community
Magento Community
 
muff
Member
 
Total Posts:  33
Joined:  2010-04-21
 

I appreciate that! =)

 
Magento Community Magento Community
Magento Community
Magento Community
 
amat1
Member
 
Total Posts:  36
Joined:  2011-06-13
 

Hi all,

I’m converting my existing web shop into a Magento shop, version 1.6.2.0, and am currently trying to get the sub category images to display on the category pages. I am using a code from this website and added that code in a new category_listing.phtml file. This file is located in app/design/frontend/default/MY_THEME/template/catalog/navigation

Furthermore I have done some styling in the styles.css located in skin/frontend/default/MY_THEME/css (created a grid listing, some image border hover effects, etcetera...), and modified the script.js file located in the skin/frontend/default/MY_THEME/js folder (opacity when no-mouse-over)

When coding I did front-end checks using the Google Chrome browser and the Safari browser on my iPad 2 (Fire Fox is okay too). Everything looked really good an worked all fine, untill I double checked using Internet Explorer 9 [edit: and IE8] on my desktop and the android mobile browser of a Samsung Galaxy Tab 10.1

It appears that Internet Explorer won’t display the sub category images at all. This is my biggest concern… The mobile browser of the Galaxy Tab does display the images, but in a long vertical list (not in grid).

I’ve spent a lot of time figuring this out, but I’m not that much of a coder. I’ve removed the code added in the styles.css file but this doen’t seem to make a difference. Therefore I think it must be in the category_listing.phtml file code, but I don’t have a clue what causes the problem. Could anybody please help me out here?

Thanks!!

PS: the sub category images DO display on the sub category page itself using Internet Explorer…

Edit: RESOLVED the issue with the Internet Explorer browser today. For some reason I originally changed width="160" in the code below to width="auto"

<img src="<?php echo $_imageUrl ?>" width="160" alt="<?php echo $this->htmlEscape($_category->getName()) ?>" />

Now I have completely removed the width from the code and voila, Internet Explorer is able to display the images!

Still struggeling though with the list instead of grid display for the Galaxy Tab browser. I’ve tried and set the iPhone theme for Android but this completely messed up my template layout. Any thoughts?

Image Attachments
Chrome.gifIE9.gif
 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top
Page 11 of 12