[Resolved] Custom field not working for category archive pages

Home Forums Support Custom field not working for category archive pages

  • This topic has 25 replies, 2 voices, and was last updated 3 months ago by David.
Viewing 15 posts - 1 through 15 (of 26 total)
  • Author
    Posts
  • #1342539
    William

    Hi there,

    I want to add custom fields to category pages using the Generate Press snippet.

    https://bookanalysis.com/albert-camus/ <– this is the example category page I’m using

    I made this snippet to work on just category pages:

    <table style=”width: 100%;” border=”0″>
    <tbody>
    <tr>
    <td style=”width: 50%;”>

    <h1 style=”font-size:42px; font-weight:bold;”>{{post_title}}</h1>

    {{custom_field.category_summary}}

    </td>
    <td style=”width: 50%;”>

    {{custom_field.category_image}}

    </table>

    I added some text to the custom field and an image in the category for above, but it’s not showing up? Is there any reason why this is happening?

    Kind regards,

    Will

    #1342570
    David
    Staff
    Customer Support

    Hi there,

    how are you adding the Custom Fields to the Category ?

    #1345278
    William

    I’m using the Custom Fields plugin, and having two custom fields appear for all taxonomy: category_summary (text) and category_image (image)

    #1345280
    William

    and then I am applying that to an element in GeneratePress

    #1345458
    David
    Staff
    Customer Support
    #1345545
    William

    Yes that’s the one

    #1345726
    David
    Staff
    Customer Support

    It requires a few extra steps to output ACF to a taxonomy term:

    https://www.advancedcustomfields.com/resources/adding-fields-taxonomy-term/

    And as you’re using a Header Element you will need to register a couple of shortcodes to get thos fields. For example add this PHP Snippet to your site:

    add_shortcode( 'category_summary', function() {
    	
        $term = get_queried_object();
        
        $category_summary = get_field( 'category_summary', $term );
    
        return $category_summary;
    	
    } );

    Then you can display the summary with this shortcode: [category_summary]

    If you’re using an image field for your category_image then this snippet:

    add_shortcode( 'category_image', function() {
    	
        $term = get_queried_object();
        
        $category_image = get_field( 'category_image', $term );
        $category_image_html = '<img src="' . $category_image['url'] . '">';
    
        return $category_image_html;
    	
    } );

    will register this shortcode: [category_image] which will return the image HTML.

    #1345741
    William

    Thanks very much for that – I appreciate it.

    Does the shortcode you suggested work for Generate Press elements? I find that including [category_summary] or {{custom_field.category_summary}} does not work for Generate Press elements.

    #1346185
    David
    Staff
    Customer Support

    The template tag {{custom_field.category_summary}} won’t work on an archive page. But if you added the two snippets then that [category_summary] shortcode should.

    Try adding it a Hook Element to see if it displays correctly.

    #1346598
    William

    Hi there,

    I’ve added both shortcodes to a Hook Element, and the image is showing but not the summary?

    Also, is there a way to resize the image as it’s quite large here?

    https://bookanalysis.com/albert-camus/

    Many thanks,

    #1346809
    David
    Staff
    Customer Support

    I made an edit to the first shortcode here:
    https://generatepress.com/forums/topic/custom-field-not-working-for-category-archive-pages/#post-1345726

    Try that to fix the Summary problem.

    For the image shorcode edit this line to include a width attribute:

    $category_image_html = '<img src="' . $category_image['url'] . '" width="200">';

    #1347144
    William

    Hi there,
    Thanks for that, perfect – works a treat.

    Only thing is the image resizing – it does not really work effectively, can there be a height restriction so it works for mobile/tablet/desktop all the same and still achieves a similar ratio in terms of its look?

    #1347157
    William

    Is there also a way to have the text in the Hook element to float to the top instead of in the middle?

    Example here https://bookanalysis.com/albert-camus/

    #1347270
    David
    Staff
    Customer Support

    You can add a class to your image like so:

    $category_image_html = '<img class="ba-archive-image" src="' . $category_image['url'] . '" width="200">';

    Then you can style it how you want with CSS for example:

    .ba-archive-image {
        width: 50%;
    }

    To adjust the vertical positioning you should remove the table HTML and use the Markup and CSS provided here:

    https://generatepress.com/forums/topic/how-do-i-create-a-hero-section-for-the-following-scenario/#post-1329768

    #1347901
    William

    Hi there,
    I’ve added this Hook Element but unsure what CSS to add specifically?

    <h1 style=”font-size:42px; font-weight:bold;”>{{post_title}}</h1>

    [category_summary]

    [category_image]

    Ultimately, I want ‘category_title’ div id to float left, and at top, and the ‘category_image’ float right, with a restriction on the height/width of image.

Viewing 15 posts - 1 through 15 (of 26 total)
  • You must be logged in to reply to this topic.