Category image possible?

[Black Tiger]

My friend which I help would like to have an image next to his category text.

I found some page addon, but I don't know if that can do this like my friend want's it too.

We were looking to be able to do something like this:

Is something like this possible? Nice category text and image, or something like that?

 

[Black Tiger]

Still looking for this for a friend. Anybody?

 

[Black Tiger]

Not possible without a mod I presume?

 

[Fighting 13th]

 This is the best possible option I believe.

[Black Tiger]

That's for pages. My friend needs it for forum categories.

But thank you for looking.

[GlenP]

If you want to use Font Awesome icons, there's this help guide

 

[Black Tiger]

Font-icons are something completely different than category images.

I'm using font-icons on my own forum, but it can nowhere near do as what's shown in the example image in my first post.

But thank you for thinking with me.

[newbie LAC]

Maybe

or

 

[Black Tiger]

Nope, thank you.

My friend is really specific about that. It has to do with what his forum is about. He only want's images in the category like in the image shown.

Thank you for your reply though.

[newbie LAC]

18 minutes ago, Black Tiger said:

in the image shown.

That image too small to understand what you are looking for.

[Black Tiger]

No it isn't because I described it clearly too.

You can click on it and I wrote it was "forum category". There are only 1 kind of forum category's. So that's where the image has to come.

But to explain it better, I made another screenshot here on the forum. Still it's forum category, I couldn't understand what is not to understand about that, sorry.

So the forum category tekst like here "Community Forums" should be there and an image (self choosen) next to it.

 

[newbie LAC]

Category

So I can put an image anywhere on that page. And call it category image

48 minutes ago, Black Tiger said:

So the forum category tekst like here "Community Forums" should be there and an image (self choosen) next to it.

You could edit forums - front - index - index

Find

<a href='{$category->url()}'>{$category->_title}</a>

Add after

{{if $category->_id == X}}
	<img src="image.png">
{{endif}}

X is category ID

[Nathan Explosion]

Alternatively....

 

li[data-categoryid="307"] h2 {
	background-image: url('https://dne4i5cb88590.cloudfront.net/invisionpower-com/monthly_2019_01/tiger3.jpg.b6c18aad15478e19274ec54a9ffcc518.jpg');
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center; 
}

 

[Black Tiger]

@newbie LACThank you, but we don't want to change core files or templates.

@Nathan ExplosionThat looks like we could use this in the custom.css right? Superb, thank you! We're going to have a try at that on my friends forum.

 

[Black Tiger]

@Nathan Explosion Seems I can't get it to work correctly yet.

I put this in custom.css:

li[data-categoryid="4"] h2 {
    background-image: url('https://www.domain.com/images/image.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
}

But when scrolling the page, the image was visible in the background on all category's, or rather the forum scrolled over the image which stayed at the same position.

So to have the image stick in 1 category bar, I had to remove the "background-attachment: fixed" statement.

Now it's present, but now the picture is not in the correct postion, so 2 questions left.

1.) Is there a way so I can add a certain amount of px above the background image, so it will be visible a bit lower?

2.) Is there also a way to make the category bars higher in custom.css? So more of the image becomes visible?

[Nathan Explosion]

4 minutes ago, Black Tiger said:

Seems I can't get it to work correctly yet.

I put it in as your starting point....it wasn't 'correct' to start with.

5 minutes ago, Black Tiger said:

1.) Is there a way so I can add a certain amount of px above the background image, so it will be visible a bit lower?

Probably, yes....try looking at padding for the image, maybe?

5 minutes ago, Black Tiger said:

2.) Is there also a way to make the category bars higher in custom.css? So more of the image becomes visible?

Again, probably yes....look at height for the h2, maybe?

[Black Tiger]

I put it in as your starting point....it wasn't 'correct' to start with.

Oh I thought you gave a working solution. I didn't know, I'm not into css and not interested either because I almost never use it.

However before asking I tried things like:

background-position-y: 50px;

and same with margin and martin-top.

I already also tried:

padding-top: 25px;

Which does make die image a little bigger, but does not push it downwards (display lower).

However, I did not created a solution by search around, using the background-position as center top and then putting a margin-bottom, so pushing the image upwards again. That seems to work.

Again, probably yes....look at height for the h2, maybe?

Sorry, but these are same kind of answers as "here's google", I think that's not done on a support forum. So suppose I somehwere find h2 height is 30. I'm sure there are more things using h2 then only the forum category's. So I have no clue on how to only change this for the category's in custom.css.

Some people do servers, others do design. I'm not a designer.

Hmmz... and my solution didn't work either. It does not "up" the image, but it makes the category bar greated so the complete image fits in. Which is not good either. Big is good, but should be al same size.

 

[Nathan Explosion]

2 minutes ago, Black Tiger said:

I'm not a designer.

And neither am I - and I just used Google to get that starting point up there. I'm not going to sit in my spare time giving you a full answer for nothing if it takes more than a few seconds to do the work so I will help with the starting points.....it's entirely up to you if you want to use this method.....

li[data-categoryid="4"] h2 {

}

This targets the following html:

<section>
	<ol class='ipsList_reset cForumList' data-controller='core.global.core.table, forums.front.forum.forumList' data-baseURL=''>
			<li data-categoryID='4' class='cForumRow ipsBox ipsSpacer_bottom'>
				<h2 class="ipsType_sectionTitle ipsType_reset cForumTitle">
					<a href='#' class='ipsPos_right ipsJS_show ipsType_noUnderline cForumToggle' data-action='toggleCategory' data-ipsTooltip title='Toggle this category'></a>
					<a href='https://url'>THIS IS THE CATEGORY TITTLE</a>
				</h2>

This will put a background image on the H2 element:

li[data-categoryid="4"] h2 {
	background-image: url('https://www.domain.com/images/image.jpg');
}

This will change the height of the H2 element:

li[data-categoryid="4"] h2 {
	height: 1000px;
}

[Black Tiger]

I'm not native English and you know more about CSS then me, so that makes it a lot easier for you.
I don't understand crap from that ipslist and classes and what else, with or without Google. It's not that easy for everybody as you think. Especially because I already found 4 different methods in css to put white space some where from which none worked as wanted, as can be seen in my previous post. It's not like I'm doing nothing.

At this moment I'm almost there, except for the h2 height.

But with your last quote which points out how I can change the height of the H2 element I will succed by copying and testing.

Thank you.

 

[Black Tiger]

For anybody else looking for something like this, I used this now, looks working.

li[data-categoryid="4"] h2 {
    height: 100px;
}
li[data-categoryid="4"] h2 {
    background-image: url('https://www.forumdomain.com/images/someimage.jpg');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
}

And yes I don't sit still... I'm trying. Hence I also found the "contain" bit to put there.