Stick an image on a specific category page

Support

AI-generated summary

Problem: pfaffman wants to add a “sponsored by” image to a specific category page.

Proposed Solutions:

  • Initially, pfaffman considered adding the image to the category description excerpt, but it didn’t display the image.
  • jomaxro suggested using a category logo, but pfaffman clarified that it needs to be in addition to the category image.

Solution: Johani provided a working solution using CSS, adding a :before pseudo-element to .category-NAME .list-controls. pfaffman confirmed that removing .categories-list made it work as intended.

1

tl;dr

I need to have a “sponsored by” image on a particular category page.

mindless rambling

One idea was to put it in the category description excerpt, but that doesn’t display the image.

I suspect that the real answer is to connect to the category-name class and stick it in the main-link clearfix, uh, thingy.

image
image441×148 16 KB

2

Does a category logo not work? Something like #howto:tips-and-tricks?

3

No. They’re being used as they are intended. This needs to be in addition to the category image.

4

Got a mock-up? I’m having trouble imagining what you want where.

5

Something like this?

banner image
banner image2284×1922 258 KB

or did you have something else in mind?

If it is, here’s an initial go at it.

I used:

// change category NAME as needed like .category-staff or .category-meta

.categories-list.category-NAME .list-controls:before { 
    content: "";
    display: block;
    background: url(img.jpg) no-repeat; // <~ change the url as needed 
    background-size: 100%;
    padding-top: 40%; // <~ change padding amount according to image aspect ratio
}

I’d be happy to sort out additional problems.

6

I removed .categories-list to make it work, but this was what I needed! Thanks so very much!