[Resolved] Category custom field displaying on post header element

Home Forums Support Category custom field displaying on post header element

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1349717
    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?

    #1349739
    David
    Staff
    Customer Support

    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 🙂

    #1349766
    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)

    #1349771
    William

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

    #1349786
    David
    Staff
    Customer Support

    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

    #1350393
    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.

    #1350475
    David
    Staff
    Customer Support

    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;
    }
    #1350494
    William

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

    #1350500
    David
    Staff
    Customer Support
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.