Docs

[Noaviv]

Hello, I put the following code in my child theme functions file to get excerpts on my recent posts.

You can see this issue I am having here: http://unsettle.jessicarea.me
with the large space between the image and excerpt only on one of the shortcodes with the category specified.

Ideally I would like my recent posts to look like this

So if beyond this issue you can help me with CSS to get the overlay with the title over the image that would be great too!

Thank you for any help, code below:

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';
       }
 
       $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">'
                        . '<h3 class="h-recent-posts">' . get_the_title() . '</h3>'
                        . '<span class="x-recent-posts-date">' . get_the_date() . '</span>'
                        . ( $enable_excerpt ? '<span class="x-recent-posts-excerpt">' . strip_tags( get_the_excerpt() ) . '</span>' : '' )
                      . '</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( 'recent_posts' );
 	add_shortcode( 'recent_posts', 'x_shortcode_recent_posts_v2code' );
 } 
 
// Excerpt Custom Length
function custom_excerpt_length(  ) {
  return 35;
}
add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );

[Noaviv]

So I started to make some headway with this, I know the problem area is here:

$image_output = '<div class="x-recent-posts-img">' . get_the_post_thumbnail( get_the_ID(), 'entry-' . get_theme_mod( 'x_stack' ) . '-cropped', NULL ) . '</div>';

and that needs to be the background of the div instead of inside it. I am just having trouble pulling the thumbnail url

[Noaviv]

and I found the code in the shortcodes with everything I needed commented out 🙂

Here it is in case anyone else is looking

 function x_shortcode_recent_posts_v2code( $atts ) {
   extract( shortcode_atts( array(
       'id'           => '',
       'class'        => '',
       'style'        => '',
       'type'         => 'post',
       'count'        => '',
       'category'     => '',
       'offset'       => '',
       'orientation'  => '',
       'show_excerpt' => 'true',
       'no_sticky'    => '',
       'no_image'     => '',
       'fade'         => ''
     ), $atts, 'x_recent_posts' ) );
   
     $allowed_post_types = apply_filters( 'cs_recent_posts_post_types', array( 'post' => 'post' ) );
     $type = ( isset( $allowed_post_types[$type] ) ) ? $allowed_post_types[$type] : 'post';
   
     $id            = ( $id           != ''     ) ? 'id="' . esc_attr( $id ) . '"' : '';
     $class         = ( $class        != ''     ) ? 'x-recent-posts cf ' . esc_attr( $class ) : 'x-recent-posts cf';
     $style         = ( $style        != ''     ) ? 'style="' . $style . '"' : '';
     $count         = ( $count        != ''     ) ? $count : 3;
     $category      = ( $category     != ''     ) ? $category : '';
     $category_type = ( $type         == 'post' ) ? 'category_name' : 'portfolio-category';
     $offset        = ( $offset       != ''     ) ? $offset : 0;
     $orientation   = ( $orientation  != ''     ) ? ' ' . $orientation : ' horizontal';
     $show_excerpt  = ( $show_excerpt == 'true' );
     $no_sticky     = ( $no_sticky    == 'true' );
     $no_image      = ( $no_image     == 'true' ) ? $no_image : '';
     $fade          = ( $fade         == 'true' ) ? $fade : 'false';
   
     $js_params = array(
       'fade' => ( $fade == 'true' )
     );
   
     $data = cs_generate_data_attributes( 'recent_posts', $js_params );
   
     $output = "<div {$id} class=\"{$class}{$orientation}\" {$style} {$data} data-fade=\"{$fade}\" >";
   
       $q = new WP_Query( array(
         'orderby'             => 'date',
         'post_type'           => "{$type}",
         'posts_per_page'      => "{$count}",
         'offset'              => "{$offset}",
         "{$category_type}"    => "{$category}",
         'ignore_sticky_posts' => $no_sticky
       ) );
   
       if ( $q->have_posts() ) : while ( $q->have_posts() ) : $q->the_post();
   
         if ( $no_image == 'true' ) {
           $image_output       = '';
           $image_output_class = 'no-image';
         } else {
           $image              = wp_get_attachment_image_src( get_post_thumbnail_id(), 'entry-cropped' );
           $bg_image           = ( $image[0] != '' ) ? ' style="background-image: url(' . $image[0] . ');"' : '';
           $image_output       = '<div class="x-recent-posts-img"' . $bg_image . '></div>';
           $image_output_class = 'with-image';
         }
       
       $excerpt = ( $show_excerpt ) ? '<div class="x-recent-posts-excerpt"><p>' . preg_replace('/<a.*?more-link.*?<\/a>/', '', cs_get_raw_excerpt() ) . '</p></div>' : '';
       
             $output .= '<a class="x-recent-post' . $count . ' ' . $image_output_class . '" href="' . get_permalink( get_the_ID() ) . '" title="' . esc_attr( sprintf( __( 'Permalink to: "%s"', 'cornerstone' ), 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">'
                              . '<h3 class="h-recent-posts">' . get_the_title() . '</h3>'
                              . '<span class="x-recent-posts-date">' . get_the_date() . '</span>'
                              . $excerpt
                            . '</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( 'recent_posts' );
 	add_shortcode( 'recent_posts', 'x_shortcode_recent_posts_v2code' );
 } 
 
// Excerpt Custom Length
function custom_excerpt_length(  ) {
  return 35;
}
add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );

[Darshana]

Glad you were able to figure it out 🙂

[Author]

Posts