A gorgeous banner for your category blog, easy to adjust and maintain by the content manager of the site - surely you must need an extension for that? Nope. Not in Joomla. You don’t even have to be Super Coder to achieve this! Read all about the power of custom fields to style your categories.

A lot has been written already about articles and category blogs, but an important aspect has been neglected: you can use custom fields in categories.

How would you create a banner like this? With an extension? Let's see how we can do it with Joomla Core.

Starting position

We have a travel blog (see this previous article about category blog) with articles in several categories: Mountains, City trips and Road trips. We have a menu item for each category. Each page should have a title, a subheading, an intro text and an image. This information should be displayed in a box with a specific color.

Do we have Joomla elements for that? Yes!

Title: Category name

Subheading: Custom field

Intro text: Category description

Image: Category image

Color: Custom field

Creating fields

It is not visible at first glance, which is why it is perhaps often overlooked, but you can create fields and field groups for a category. Under Content -> Field Groups you need to select “Category” in the dropdown:

We will create a group called “Category Details” and add some fields there:

1. A text field for the subheading
2. A radio field to select the layout of the category description
3. A color field to pick a color for the box

All fields should be set to “Do not automatically display” in the options, because we want to use them on an override of the blog view.

And that is how it looks when we edit our category, we have a new tab called “Category Details” containing our three fields:

In the tab “Category” we enter the intro text:

And in “Options” we select the image:

Override

In order to display the new elements in the right position, we will create an override of the blog view (System -> Site Templates -> Cassiopeia Details and Files -> Create Overrides -> Components -> com_content -> category)

The system will create several files inside our template in the folder html/com_content/category. We will only need the file blog.php, the other ones can be removed.

From line 37 to line 73 we find the code for the top part of a blog page: page title, category title, category tags, category description, category image, etc. Since not all categories on our website will have the special box, we will not touch the original code. We will put it inside an if/else statement as an alternative to our new code. The idea is to use the new field “Description Layout” to control the way a blog page is built: if we select “Banner” as layout, our new code will be used and we get a nice box, if we select “Standard” (default value from the radio field) the normal code from the blog view will be used.

Directly after line 37 we insert this code:

    <?php if ($this->category->jcfields[12]->rawvalue == 1) : ?>
        <div class="category-container fullwidth" style="background-color:<?php echo $this->category->jcfields[13]->rawvalue; ?>;">
            <div class="category-container__inner">
                <?php echo LayoutHelper::render(
                    'joomla.html.image',
                    [
                        'src' => $this->category->getParams()->get('image'),
                        'alt' => empty($this->category->getParams()->get('image_alt')) && empty($this->category->getParams()->get('image_alt_empty')) ? false : $this->category->getParams()->get('image_alt'),
                    ]
                ); ?>
                <hgroup class="category-title">
                    <h1><?php echo $this->category->title; ?></h1>
                    <p><?php echo $this->category->jcfields[11]->rawvalue; ?></p>
                </hgroup>
            </div>
            <?php echo HTMLHelper::_('content.prepare', $this->category->description, '', 'com_content.category'); ?>
        </div>

    <?php else : ?>

And before the line

<?php if (empty($this->lead_items) && empty($this->link_items) && empty($this->intro_items)) : ?>

we close the if-statement

    <?php endif; ?>

    <?php if (empty($this->lead_items) && empty($this->link_items) && empty($this->intro_items)) : ?>

The complete code of the override can be found here:

https://gist.github.com/drmenzelit/b5f0f159d424804ff7f741db6575d111

Make sure to replace the field IDs with the ID of your custom fields.

Code explained

At first we check with an if-statement, if the field “Description Layout” (in this case with the id 12) has the value 1 (Banner-Layout). If yes the code below will be executed.

We create a div-element with the class “category-container” (important for the styling with CSS) and we add an inline style for our background color (inline styles are not best practice in general, but in this case is acceptable). In this way we can create new categories with their own colors without having to write new css for each of them.

Inside the container we create another div-element with the class “category-container__inner” and insert there the category image and the category title and the subheading field grouped in an hgroup-element. After the <div> we insert the category description (intro text). We close the box and add the else-statement for the standard layout.

Adding some CSS

.category-container {
    color: white;
    padding: 1.3rem;
    margin-bottom: 2rem;
}
.category-container p {
    margin-bottom: 0;
}
.category-container__inner {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    align-items: end;
    margin-bottom: 1rem;
}
.category-container__inner img {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: 400px;
    object-fit: cover;
}
.category-container__inner .category-title {
    grid-column: 1;
    grid-row: 1;
    padding: 1rem;
}
.category-container__inner .category-title p {
    font-size: calc(1.2rem + .9vw);
}

For the “category-container” we define the text color, the padding and a margin bottom.

The “category-container__inner” element is defined as a grid with a column that takes the available space (1fr) and an auto-sized row. The elements in the grid are aligned to the bottom (end).

The image inside the grid takes the whole width, the height is limited to 400px and with object-fit: cover we avoid distortions.

Positioning both image and title in the same column and row creates an overlay effect.

Result

Our “Mountains” category looks like this:

And without extra work we can create different pages:

No modules, no extra extensions, just Joomla elements and a few lines of code.

Bonus

Do you want to make the banner full width? No problem! The trick Brian Teeman explained in the last Magazine issue for full width modules, can be applied for the category description box too: just add the class “fullwidth” to the “category-container” div-element and insert the CSS snippet to your user.css and your banner will be full width.

Custom fields are extremely versatile and they can be used not only in articles, but also in categories, contacts and user profiles. Use the power of fields, overrides and CSS and let your website shine with an unique design.