Docs

[mbecker908]

Rad asked me to start a new thread on this topic. The old thread is here: https://community.theme.co/forums/topic/recent-posts-add-featured-image-and-text/

I think I asked too many (of the wrong) questions (sorry) and I think we’ve finally sorted out where I need to go. As per Rad’s request, I removed the CSS from the previous question.

What I want to do is add a page with the Recent Posts element showing posts vertically. The RP element, without any modification, only shows the Subject line. I want to show the Featured Image flush left with the Subject line to the right and a post snippet under that. I want to use the snippet from Yoast SEO if at all possible. If not, I will need to build a meta field to copy the Yoast SEO snippet into so I can access it.

I’ve attached a mock-up of what I want the Recent Posts to look like on the page.

Thank you.

[mbecker908]

This reply has been marked as private.

[Joao]

Hi There,

Please add the following code to Appereance > Customizer > Custom > CSS

@media (min-width:767px){
.x-recent-posts .x-recent-posts-img {
    float: left;
    width: 70%;
    margin: 0;
}
.x-recent-posts .x-recent-posts-content {
    padding-top: 30px;
}
  
.x-recent-posts a.x-recent-post1 {
     border: 0;
}
}

Hope it helps

Joao

[mbecker908]

See the attachment “Got Stress 3” for what that looks like.

That adds the Featured Image and the Post Title but please refer back to the attachment in the first post. I need the height reduced. The FI should be about 25% of the page.

Big problem is that there’s no snippet from the post. I have Yoast SEO as a plugin and it has a snippet that I’d like inserted below the title. You can see what I’m talking about in the attachment “Yoast.” I don’t know if the snippet has a meta name or one can be assigned, but if you refer to the first post attachment you’ll see what I’m looking for in terms of placement.

Thank you

[Jade]

Hi there,

The recent post shortcode does not include a post’s excerpt by default. However, you can add it by following the suggestion on this thread.

Hope this helps.

[mbecker908]

I think we’re almost there.

I made the changes to the Custom CSS and they’re reflected in the attachment. The first four posts shown with the images are a Recent Posts code in a Text element. The ones below without the images are just a Recent Posts element. Is it possible to put the coding for the image into Custom CSS so that I don’t need the Text box. If it’s a hassle I’m fine with the Text box.

Two things I’d like to fix with this layout.

1) Wrap the Post Title if it’s too long to fit in the space.
2) Add a snippet of the post similar to what you see in the Archive layout. (Archive.jpg) My preference is to use the snippet in the Yoast SEO plugin.

If that’s not possible I’ve created a separate META using Essential Grid, it’s called eg-snippet and I can just copy the Yoast info into that one. How do I get the info to display below the Post Title?

Thank you.

[Paul R]

Hi,

1. You can add this under Custom > Edit Global CSS in the Customizer.

.x-recent-posts .h-recent-posts {
      white-space: initial;
}

2. You can add this in your child theme’s functions.php file.

function x_shortcode_recent_posts_v2code( $atts ) {
  extract( shortcode_atts( array(
    'id'           => '',
    'class'        => '',
    'style'        => '',
    'type'         => 'post',
    'count'        => '',
    'category'     => '',
    'offset'       => '',
    'orientation'  => '',
    'show_excerpt' => 'false',
    '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( 'x_recent_posts' );
  add_shortcode( 'x_recent_posts', 'x_shortcode_recent_posts_v2code' );
}
// ============================================================================= 

Then use the recent posts shortcode with show_excerpt attribute.

eg.

[x_recent_posts count="4" show_excerpt="true"]

Hope that helps.

[mbecker908]

Okay, that got the excerpt in! Is there some way I can swap the generic excerpt for the META I created with Essential Grid, it’s called “eg-snippet”…

Thank you.

[mbecker908]

I got it.

When I click on “Excerpt” as a screen option it gives the ability to put exactly the excerpt I want.

Thank you for your help!

[Nabeel A]

Glad we could help.

Cheers!

[Author]

Posts