Docs

[goalsarecool]

On my homepage https://www.goalsarecool.com/ at the bottom… I have 2 recent posts elements in cornerstone but only one picture is fitting within the box. How do I make the second post image fit within the box too?

[Thai]

Hi There,

Please add the following CSS:

#post-12977 > div > div.x-recent-posts-img {
    background-size: 100% 100%;
}

Hope it helps 🙂

[goalsarecool]

That stretched the image.

1 – Is there a way to make it fit without stretching the image?
2 – That CSS is for post 12977. Is there a way to make it automatically update when a new post gets added or will I need to change the post manually?

[Thai]

Hi There,

Please update the previous CSS to this:

div.x-recent-posts-img {
    background-size: 100%;
}

Hope it helps 🙂

[goalsarecool]

That did not work.

[Rupok]

Hi there,

It’s already on it’s best state if you just leave it as is with background-size: cover;

Your images are different in dimension so you won’t get same for all whatever background-size you apply.

Hope this makes sense.

[goalsarecool]

How do I add a post excerpt with the image and title to a random page?

[Lely]

Hi There,

We can always use recent post element.
In case I misunderstood your question, please clarify so we can help you better.

[goalsarecool]

I want it to look like the attached.

I’m trying to put the latest blog post and the latest podcast episodes on my homepage and make them look like the attached. The recent posts widget seems to be very limited.

[Jade]

Hi there,

Regretfully this isn’t a feature offered by the recent post element but we could help you out adding the post excerpt. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding. Take care!

[goalsarecool]

” but we could help you out adding the post excerpt. ”

ok, so how do I add the post excerpt?

[goalsarecool]

what size does the image need to be to fit within the recent posts image box?

[Paul R]

Hi,

To achieve that 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
    ) );

    $cat = "";
    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">'.$cat.'</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' );
}

You can then display recent post with excerp using the code below.

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

With regards to the image size, you can upload an image with at least 800px width.

Hope that helps.

[Author]

Posts