icon assigned to article depending on category

Hi there,
I just wonder if it is possible to assign specific icon image to every article in specific category.

ex. I have articles about music, so every article header will have soundspeaker icon in front of it.
Just now I have to do it in non SEO way, and it causes me some trouble on google pages http://www.chcemviac.com

There is one template in RocketTheme http://demo.rockettheme.com/live/joomla/voxel/ which has something similar (but not exactly how we need it to be).

Is there any easy SEO solution? Do you know some kind of plugin for K2 or anything?

thanks for advice.

Hi

I would use K2 extra fields for that and than reposition the image included with css or by editing /html/com_k2/templates/default/item.php

would you mind writting a bit more concrete tutorial?

Hi

This is more of a customisation, so I cant tell anything more than tips, but lets say You have an extra field for an icon. You add this icon per article so it displays in extra fields area. When You will have it get back to me with a link to such page and I'll try to come up with a small code to move it in the place You want.

Thank you for your assistance, I really apreciate it.
My website http://www.chcemviac.com is running music state template.
the "problem" is - I have 3 types of articles on the website - text articles, articles with audio, articles with video. I would like user to know which type is he choosing by clicking the headline of the article. Just now, I am solving this with ReReplace component, which can replace any string with almost anything. So, if I write (t) Article headline, the (t) string is replaced with icon of the text.

This solution is not very comfortable, does not work properly on mobile devices (since it is not easy to customize the image to scale properly) and it is completely not SEO (if you see my article in google, you see it in a format (t) Article headline, which is - let's say quite creepy.

I want to get rid of this by asigning icon to the article with extra fields in K2, or - asigning the icon to the article depending on category (since I have those 3 categories on my website K2 component too). The only problem I have is, that I do not know how to do it in an elegant way.
The problem with extra fields is, that when you choose for example dropdown extrafield, I can define my content by that (audio, video, text) but I cannot asign any icon to that.
And - I want the icon to be displayed in front of the Headline of the article not just in article view, but also in modules, which is not easy to do.

As I was writting, there is one template in RocketTheme http://demo.rockettheme.com/live/joomla/voxel/ which has something similar (but not exactly how we need it to be).

How can I do that in a proper way in musicstate template?

Hi

I'm afraid this is possible, but not without a massive customisations to K2 and modules displaying it's content.

I think the simpliest way is as You've done it right now with some strange characters in front of the title. But I would not use ReReplace, but some hand adding script, so if such characters will be recognised it will not only change the the characters to images, but also move it outside of the title. This way SEO should be working ok.

Thanks for your answer, I appreciate it. Any handful idea how to do that script, so that SEO is ok?

Hi

I'm sorry, but I really cannot help with this. It's above our support.

Thanks for willing to help. I saw this: http://www.bethinking.org/is-christianity-true, and the icon there is made by h1 class attribute. Do you think, I could work it out on my page this way also?

Hi

For this icon they used custom font called "ModernPictograms":

Code: Select all

.container > h1.engage::before, .index .engage h2::before, .site-header nav li.engage > a::before {
    content: "b";
}
.container > h1::before {
    font-family: ModernPictograms;
    font-size: 48px;
    padding-right: 12px;
}


I do not know where to get this font, but here is a free with similar icons: http://fortawesome.github.io/Font-Awesome/icons/ and instruction how to use it.

Thanks for reply. I did not meant the font, I meant the way of use. Do you think it is possible this way on our template?
because it looks to me as smartest way to do what we need to do.

Hi

Yes, that's possible. Please read my previous post one more time. All the details how to use it like that can be found on font awesome site along with the method how to add it to Your site.

thanks, I'll try it than.