Category icons instead of user user avatars

Zhaan

G'day folks! I'm interested in displaying custom category icons next to every topic, similar to how IndexPhotos works. Is this possible?

I'm not very good at coding, so this is beyond me for now. ><

Any input will be appreciated.

Here's a quick mockup for reference:

Kasper

This should do the trick:

public function DiscussionsController_BeforeDiscussionContent_Handler($Sender) {
    $this->CategoryIcon($Sender);
}

public function CategoriesController_BeforeDiscussionContent_Handler($Sender) {
    $this->CategoryIcon($Sender);
}

protected function CategoryIcon($Sender) {
    $Category = $Sender->EventArguments["Discussion"]->CategoryUrlCode;
    echo "<div class='CategoryIcon Category-$Category'></div>";
}

Now you have an element with the category url code as an identifier that you can style to your liking.

Zhaan

It seems my mockup isn't showing: http://i5.minus.com/jk41SRlzssRFY.png

@kasperisager Thanks a lot, I'll play around with that!

peregrine

at the same time you Kasper posted above, I was testing this.

add this to your themehooks.

tested on 2.1

 public function DiscussionsController_AfterDiscussionLabels_Handler($Sender, $Args) {

    $Object = ($Sender->EventArguments['Discussion']);
    $cat = $Object->CategoryUrlCode;
    $theme = $Sender->Theme;
    echo Anchor(Img("/themes/$theme/design/images/$cat" . ".png", array('alt' => 'Cat Image','class' => 'ProfilePhotoSmall' )), '/categories/'.rawurlencode($cat));
}

 public function CategoriesController_AfterDiscussionLabels_Handler($Sender) {



  $Object = ($Sender->EventArguments['Discussion']);
    $cat = $Object->CategoryUrlCode;
     $theme = $Sender->Theme;
    echo Anchor(Img("/themes/$theme/design/images/$cat" . ".png", array('alt' => 'Cat Image','class' => 'ProfilePhotoSmall' )), '/categories/'.rawurlencode($cat));

 }

add your various "category" pngs to

your theme's design/images folder

e.g. if your categories are general and tech

create a general.png and a tech.png

for 2.0.18.4 use

 public function DiscussionsController_BeforeDiscussionContent_Handler($Sender) {
    
   $Object = ($Sender->EventArguments['Discussion']);
        $cat = $Object->CategoryUrlCode;
         $theme = $Sender->Theme;
        echo Anchor(Img("/themes/$theme/design/images/$cat" . ".png", array('alt' => 'Cat Image','class' => 'ProfilePhotoSmall' )), '/categories/'.rawurlencode($cat));


 }
   
  
   public function CategoriesController_BeforeDiscussionContent_Handler($Sender) {
     
 $Object = ($Sender->EventArguments['Discussion']);
        $cat = $Object->CategoryUrlCode;
         $theme = $Sender->Theme;
        echo Anchor(Img("/themes/$theme/design/images/$cat" . ".png", array('alt' => 'Cat Image','class' => 'ProfilePhotoSmall' )), '/categories/'.rawurlencode($cat));


}

it's tedious doing things for multiple versions of vanilla.

if you want the same routine for both controllers, you could point it to the same function as kasper showed.

Kasper

That is just pure genious @peregrine!

peregrine

@kasperisager said:
That is just pure genious peregrine!

thx. Kasper - you are the theme genius, mine was just a tad tedious.

Kasper

That's the cool thing about your solution: In the long run, it's not tedious at all as it allows for simply dropping a .png in a folder and voilá - you've got yourself a category icon. I'm doing somewhat the same here (the parent category icon and label) using CSS pseudo elements and it kinda sucks having to edit the CSS each time a new category is added - simply adding a new .png to a folder would be a lot easier.

Zhaan

I hate sounding like a newb (I totally am one), but where exactly do I place your code, @peregrine? Not familiar with themehooks..

peregrine

you create one in your theme.

take a look at embedfriendly theme - you will see an example.

name the file in a similar way in your own theme.

class.YourThemethemehooks.php

also search for the word themehooks in the search box - I think I already explained and so did kasper in a recent discussion.

If you still have questions after searching - come on back.

peregrine

themes/Zhaan/class.zhaanthemehooks.php

 
<?php if (!defined('APPLICATION')) exit();
    
 class ZhaanThemeHooks implements Gdn_IPlugin {
        
    public function Setup() {
            return TRUE;
    }
    
   public function OnDisable() {
            return TRUE;
    }
        
    
   public function DiscussionsController_BeforeDiscussionContent_Handler($Sender) {
    $Object = ($Sender->EventArguments['Discussion']);
    $cat = $Object->CategoryUrlCode;
    $theme = $Sender->Theme;
    echo Anchor(Img("/themes/$theme/design/images/$cat" . ".png", array('alt' => 'Cat Image','class' => 'ProfilePhotoSmall' )), '/categories/'.rawurlencode($cat));
    }
    
   public function CategoriesController_BeforeDiscussionContent_Handler($Sender) {
    $Object = ($Sender->EventArguments['Discussion']);
    $cat = $Object->CategoryUrlCode;
    $theme = $Sender->Theme;
    echo Anchor(Img("/themes/$theme/design/images/$cat" . ".png", array('alt' => 'Cat Image','class' => 'ProfilePhotoSmall' )), '/categories/'.rawurlencode($cat));
    }
    
}

Zhaan

Hum, I followed the instructions above, but it's not working so far.. I'm using the Ozone theme, by the way. None of my icons are showing yet.

It should be class.ozonethemehooks.php, right?

peregrine

you need to follow a few steps of debugging and that's going to require you to spend some time learning php coding basics. I suggest you look at a php tutorial on the web.

some things you could do:
a) You could try doing it again
b) repeat the steps but add to embedfriendly theme , and see if it works.
c) echo "some Hellos to see if you can get some new output from you function";

to test, change

  echo Anchor(Img("/themes/$theme/design/images/$cat" . ".png", array('alt' => 'Cat Image','class' => 'ProfilePhotoSmall' )), '/categories/'.rawurlencode($cat));

to
  echo "where am I"; 
  echo Anchor(Img("/themes/$theme/design/images/$cat" . ".png", array('alt' => 'Cat Image','class' => 'ProfilePhotoSmall' )), '/categories/'.rawurlencode($cat));

---

post all of your code, changes, and show what files you added and where.

or you can try find a local developer where you live that you can pay to help you beyond this.

peregrine

also this should match the directory name of your theme

class ZhaanThemeHooks implements Gdn_IPlugin {

as well as the name of the themehooks file

class.Zhaanthemehooks.php

also match the upper and lower case in the proper places as given in my example.

also make sure to edit your categor-urls in category in dashboard to make sure they match the name of your category.png files that you created.

Zhaan - Probably I need to end here as far as answering questions - because I've done just about everything short of typing the code in on your server. and clicking the upload button from your keyboard.

good luck on your mission.

Todd

As an FYI: Category icons are a feature of 2.1.

Zhaan

@Todd Hum, I see no such option on my 2.1 test site. Is it not present in the current github version?

@peregrine Your solution finally works for me, but the icons are being displayed above thread titles, rather than next to them. What's the easiest way to fix this?

Kasper

Category icons are available in the beta branch

Zhaan

I take it that's not available for the public yet? My install is very recent, after all.

Kasper

You can checkout the beta branch here: https://github.com/vanillaforums/Garden/tree/release/2.1b1

Zhaan

Ah, looks like I'm using 2.1a34. Thanks!

Zhaan

Upgraded to 2.1b1, but none of the icons I upload show up anywhere on the site. Am I missing something here?

Kasper

What layout are you using? Modern? Table?