[Resolved] Move category in the image above title and center it with relative positioning

Home Forums Support Move category in the image above title and center it with relative positioning

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1406932
    Antoine

    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,

    #1407342
    David
    Staff
    Customer Support

    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;
    }
    #1408019
    Antoine

    It works great 🙂
    Fast and efficient support, wow !
    Thanks a lot

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