- This topic has 25 replies, 2 voices, and was last updated 8 months ago by
David.
-
AuthorPosts
-
June 26, 2020 at 6:23 am #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
June 26, 2020 at 6:49 am #1342570David
StaffCustomer SupportHi there,
how are you adding the Custom Fields to the Category ?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 29, 2020 at 4:00 am #1345278William
I’m using the Custom Fields plugin, and having two custom fields appear for all taxonomy: category_summary (text) and category_image (image)
June 29, 2020 at 4:01 am #1345280William
and then I am applying that to an element in GeneratePress
June 29, 2020 at 6:33 am #1345458David
StaffCustomer SupportIs that the Advanced Custom Fields plugin ?
https://wordpress.org/plugins/advanced-custom-fields/Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 29, 2020 at 7:27 am #1345545William
Yes that’s the one
June 29, 2020 at 7:53 am #1345726David
StaffCustomer SupportIt 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.Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 29, 2020 at 8:04 am #1345741William
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.
June 29, 2020 at 1:51 pm #1346185David
StaffCustomer SupportThe 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.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 30, 2020 at 1:37 am #1346598William
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,
June 30, 2020 at 5:06 am #1346809David
StaffCustomer SupportI made an edit to the first shortcode here:
https://generatepress.com/forums/topic/custom-field-not-working-for-category-archive-pages/#post-1345726Try 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">';
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 30, 2020 at 8:02 am #1347144William
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?
June 30, 2020 at 8:09 am #1347157William
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/
June 30, 2020 at 9:49 am #1347270David
StaffCustomer SupportYou 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:
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 1, 2020 at 2:42 am #1347901William
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.
-
AuthorPosts
- You must be logged in to reply to this topic.