Custom field not working for category archive pages

Hi there,

how are you adding the Custom Fields to the Category ?

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

and then I am applying that to an element in GeneratePress

Is that the Advanced Custom Fields plugin ?
https://wordpress.org/plugins/advanced-custom-fields/

Yes that's the one

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.

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.

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.

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,

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">';

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?

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/

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

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

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.