Archived topic
Move category in the image above title and center it with relative positioning
3 replies · Started by Antoine on August 17, 2020
Hi guys,
I found this topic already, which was of great help, but does not fit entirely my needs :
https://generatepress.com/forums/topic/i-want-to-move-the-category-display-above-the-title
The solution above is almost perfect, but I would like the categories to be always centered whatever the width of the archive container (or image within it).
What would be the CSS for it please ?
Also, what if I want to do the same thing with tags ? What would be the php function and CSS please ?
Thanks a lot for your help,
To add tags below categories and to center both:
1. the last snippet becomes this:
// Add category link within Post Image Wrap
add_action( 'generate_before_content','tu_cats_above_title', 15 );
function tu_cats_above_title() {
$meta_string = '';
if ( is_home() || is_archive() ) {
$categories_list = get_the_category_list( _x( ', ', 'Used between list items, there is a space after the comma.', 'generatepress' ) );
$tags_list = get_the_tag_list('',', ','');
if ( $categories_list ) {
$meta_string = '<span class="cat-links"><span class="screen-reader-text">%1$s </span>%2$s</span>';
}
if ( $tags_list ) {
$meta_string .= '<span class="tag-links"><span class="screen-reader-text">%3$s </span>%4$s</span>';
}
printf( '<span class="entry-meta">' .$meta_string . '</span></div>',
_x( 'Categories', 'Used before category names.', 'generatepress' ),
$categories_list,
_x( 'Tags', 'Used before category names.', 'generatepress' ),
$tags_list
);
}
}And replace all of the CSS with this:
.post-image-above-header .inside-article .post-image {
margin-bottom: 0.5em !important;
}
.post-image-wrap {
position: relative;
}
.post-image-wrap .entry-meta {
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
bottom: 15px;
left: 50%;
transform: translatex(-50%);
font-size: 12px;
text-align: center;
}
.post-image-wrap .entry-meta span {
padding: 4px 8px;
background-color: #fff;
border-radius: 2px;
margin: 2px 0;
}
.post-image-wrap span:before {
display: none;
}It works great :)
Fast and efficient support, wow !
Thanks a lot
Glad to be of help
