Category on Recent Post Element with a lot of whitespace

Support
#1

Hey There,

I just followed the insturctions of another Topic but it doesnt work perfectly.

I want to show the category tags on the recent post element.
What I found in another Thread was the code at the bottom…

The code works fine, but after implementing in the functions.php there is a lot of whitespace on the recent post element (see screenshot attached).

How to fix the whitespace problem?

Thanks for your advice
Andy

Bildschirmfoto 2020-04-30 um 09.37.08
Bildschirmfoto 2020-04-30 um 09.37.081511×616 186 KB 

// Add category name to recent posts shortcode
// =============================================================================
function x_shortcode_recent_posts_v2code( $atts ) {
  extract( shortcode_atts( array(
    'id'          => '',
    'class'       => '',
    'style'       => '',
    'type'        => '',
    'count'       => '',
    'category'    => '',
    'enable_excerpt' => '',
    'offset'      => '',
    'orientation' => '',
    'no_image'    => '',
    'fade'        => ''
  ), $atts ) );

  $id            = ( $id          != ''          ) ? 'id="' . esc_attr( $id ) . '"' : '';
  $class         = ( $class       != ''          ) ? 'x-recent-posts cf ' . esc_attr( $class ) : 'x-recent-posts cf';
  $style         = ( $style       != ''          ) ? 'style="' . $style . '"' : '';
  $type          = ( $type        == 'portfolio' ) ? 'x-portfolio' : 'post';
  $count         = ( $count       != ''          ) ? $count : 3;
  $category      = ( $category    != ''          ) ? $category : '';
  $category_type = ( $type        == 'post'      ) ? 'category_name' : 'portfolio-category';
  $offset        = ( $offset      != ''          ) ? $offset : 0;
  $orientation   = ( $orientation != ''          ) ? ' ' . $orientation : ' horizontal';
  $no_image      = ( $no_image    == 'true'      ) ? $no_image : '';
  $fade          = ( $fade        == 'true'      ) ? $fade : 'false';
  $enable_excerpt = ( $enable_excerpt == 'true'      ) ? true : false;

  $output = "<div {$id} class=\"{$class}{$orientation}\" {$style} data-fade=\"{$fade}\">";

    $q = new WP_Query( array(
      'orderby'          => 'date',
      'post_type'        => "{$type}",
      'posts_per_page'   => "{$count}",
      'offset'           => "{$offset}",
      "{$category_type}" => "{$category}"
    ) );

    if ( $q->have_posts() ) : while ( $q->have_posts() ) : $q->the_post();

      if ( $no_image == 'true' ) {
        $image_output       = '';
        $image_output_class = 'no-image';
      } else {
        $image_output       = '<div class="x-recent-posts-img">' . get_the_post_thumbnail( get_the_ID(), 'entry-' . get_theme_mod( 'x_stack' ) . '-cropped', NULL ) . '</div>';
        $image_output_class = 'with-image';
      }
    
    $cat_name = get_the_category();

      $output .= '<a class="x-recent-post' . $count . ' ' . $image_output_class . '" href="' . get_permalink( get_the_ID() ) . '" title="' . esc_attr( sprintf( __( 'Permalink to: "%s"', '__x__' ), the_title_attribute( 'echo=0' ) ) ) . '">'
                 . '<article id="post-' . get_the_ID() . '" class="' . implode( ' ', get_post_class() ) . '">'
                   . '<div class="entry-wrap">'
                     . $image_output
                     . '<div class="x-recent-posts-content">'
                       . '<div class="latest-post-cat">' . $cat_name[0]->name . '</div>'
                       . '<h3 class="h-recent-posts">' . get_the_title() . '</h3>'
                       . '<span class="x-recent-posts-date">' . get_the_date() . '</span>'
                    //   . '<span class="x-recent-posts-excerpt">' . excerpt(25) . ''
                     . '</div>'
                   . '</div>'
                 . '</article>'
               . '</a>';

    endwhile; endif; wp_reset_postdata();
  
  $output .= '</div>';

  return $output;
}

add_action('wp_head', 'change_recent_posts_to_v2');

function change_recent_posts_to_v2() {
    remove_shortcode( 'x_recent_posts' );
    add_shortcode( 'x_recent_posts', 'x_shortcode_recent_posts_v2code' );
}
#2

Hello Andy,

Unfortunately, we don’t support custom code anymore for the reason that in might result to another issue like this and might needed more and more customization. If you want to proceed with that code you may inspect the element to see where the space is coming from. Here’s your guide:

An alternative without using customization is using ESSENTIAL GRID or THE GRID. Both of them has skin editor feature so that you can build the look you want.

https://www.themepunch.com/essgrid-doc/item-skin-editor/
https://theme-one.com/docs/the-grid/#skin_builder

Hope this helps.

#3

Hey there,

thanks for feedback.

Well I get it to work more or less. There was a lot of padding under the Recent Post Img - not sure why this came with the code. I removed the padding. When I am using same height Images from now on it should look okay.

Thank you and have a nice day
Andy

#4

You’re most welcome, Andy.

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.