[Resolved] Custom field not working for category archive pages

[David]

Try this:

/* Make flex row */
.page-hero #category {
    display: flex;
    align-items: center;
}

/* Force image to right hand side */
.page-hero #category_image {
    margin-left: auto;
}
/* Limit hieght of image */
.page-hero #category_image img {
    vertical-align: bottom;
    max-height: 400px;
}
/* add desktop padding to title and summary */
.page-hero #category_title {
    padding: 40px;
}

/* Change Padding for mobile */
@media (max-width: 768px) {
    .page-hero #category_title {
        padding: 20px;
    }
}

[William]

Thank you, that is nearly there.

The title on the left is height centralized – is it possible for it to be towards the top?

Also, the image size changes based on the width of the screen. Is it possible to change the width of the image for different screen sizes so it looks a bit better, or is it possible for the image to always be the same height as the height of the content displayed next to it?

Many thanks,

[David]

This CSS:

.page-hero #category {
    display: flex;
    align-items: center;
}

Change to:

.page-hero #category {
    display: flex;
    align-items: flex-start;
}

I am not sure what you mean about the image. The CSS i provided set a maximum height, on smaller screens it behaves responsively and reduces in size.

[William]

Ah yes, I’ve modified it for mobile as it was resizing too small. Thank you for your help.

I’ve also noticed that the descriptions I have for category pages are not showing, is there any reason for this since changing the hook element?

[David]

The default category descriptions are displayed as part of the entry header. Which is removed when a hero element is added.

Do you want the ‘description’ within the page hero?

[William]

I would like the description to be displayable as it was before if that’s possible?

Also, is it possible to remove the link to articles on parent category archives but not child category archives? SO parent category archives are just content pages?

[David]

Create a new Hook Element:
https://docs.generatepress.com/article/hooks-element-overview/

Add this to the hook content:

<header class="page-header grid-container">
    <div class="taxonomy-description inside-article">
        <p><?php echo category_description(); ?></p>
    </div>		
</header>

Select after_header hook
Check Execute PHP
Set the Priority to 25

Set Display Rules to match those used in our Header Element.

[William]

Thank you for that – the padding is a bit off though for desktop and mobile though? Can you provide something that can rectify that please?
Many thanks for your support. Here’s an example category page with the issue: https://bookanalysis.com/george-orwell/1984/

[David]

I edited the HTML here – that should style it correctly:

https://generatepress.com/forums/topic/custom-field-not-working-for-category-archive-pages/page/2/#post-1349372

[William]

That’s perfect thank you so much. I really appreciate the support on this.

[David]

You’re welcome

[Author]

Posts