[Resolved] Category custom field displaying on post header element

[William]

Hi there,

Is it possible that if a custom field is added to a child category, that the custom field could be added to a header element on posts that are inside that child category?

Also, I am really thankful how the header element (dark purple) section looks at the moment here:

https://bookanalysis.com/george-orwell/1984/

However, when adding an image to a post header element, it is underneath the content – how do I get the image in to display in this post the same location as this?

[David]

Hi there,

you may want to ask the ACF support team how to retrieve that field, here is a related topic:

https://support.advancedcustomfields.com/forums/topic/displaying-fields-from-post-category-or-subcategory/

For the hero layout – on your Category pages you have this CSS:

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

It is applied to this element:

<div id="category">

Whereas your books <div> is:

<div id="book">

Edit your <div> to include a class of hero-row e,g

<div id="category"> becomes <div id="category" class="hero-row">

and

<div id="book"> becomes <div id="book" class="hero-row">

then change the above CSS to:

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

when styling multiple elements the same way – try using Classes instead of ID 🙂

[William]

Hi there,
Understood and corrected, thanks for that!

The image is slightly not in the same location though – seems like a padding issue from experience but is there a way so that the image is in exactly the same location for both of the links? (category archive page and post page)

[William]

And also the sizing change across desktop/mobile is slightly different between the two pages too.

[David]

Its the difference in HTML and the associated CSS.
For example on the book you have this:

.page-hero #book {
    padding-left: 30px;
    padding-top: 20px;
    padding-bottom: 10px;
}

which is applying the padding to the parent container ‘hero-row’.

Whereas on Category the padding is added to the title container which is inside the hero-row and its also less padding:

.page-hero #category_title {
    padding: 20px;
}

Apply the same principles we did with the hero-row – add CSS classes for these common styles

[William]

Thank you very much for that – I think everything is nearly there just a few little niggles then I am done – I really appreciate your help on this:

On the category page on mobile (here), the image is too small (I want it to be a minimum of 140px width for mobile). It’s fine on posts such as here

Also, for the post header hook element, I would love for the ‘book_info’ to be vertically centered.

[David]

1. Try this CSS to change category image size on mobile:

@media (max-width: 768px) {
    .page-hero #category_image img {
        max-height: unset;
        max-width: 140px;
    }
}

2. This to center those elements:

.page-hero #book_info {
    align-self: center;
}

.page-hero #book_info #post_title h1 {
    margin-bottom: 0;
}

[William]

That’s brilliant, thank you so much for this help – you guys are awesome

[David]

You’re welcome

[Author]

Posts