Edit featured image in Recent Post element

[psft]

Hi!

I’m using “Recent Post” element in Cornerstone with the featured image option ON.
Nonetheless, the cut that is made in the image is arbitrary and I’m not able to edit the way that featured image looks like. How can I get the first preview image (See “PSFT Events” in the first screenshot attached) instead of the default preview (see the second screenshot)?
Btw, I’m using Renew.

Many thanks!!

[jade]

Hey Pamela,

The featured image used by the recent post element is cropped so if you want to show the full image, please install and activate the child theme and login through FTP then edit the functions.php then add this code:

function x_shortcode_recent_posts_v2( $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 );

  $posts = get_posts( array(
    'orderby'             => 'date',
    'post_type'           => "{$type}",
    'posts_per_page'      => "{$count}",
    'offset'              => "{$offset}",
    "{$category_type}"    => "{$category}",
    'ignore_sticky_posts' => $no_sticky
  ) );

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

    foreach ($posts as $post) {

      if ( $no_image == 'true' ) {
        $image_output       = '';
        $image_output_class = 'no-image';
      } else {
        $image              = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );
        $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';
      }

      $output .= '<a class="x-recent-post' . $count . ' ' . $image_output_class . '" href="' . get_permalink( $post->ID ) . '" title="' . esc_attr( sprintf( csi18n('shortcodes.recent-posts-permalink'), the_title_attribute( array( 'echo' => false, 'post' => $post->ID ) ) ) ) . '">'
                 . '<article id="post-' . $post->ID . '" class="' . implode( ' ', get_post_class('', $post->ID) ) . '">'
                   . '<div class="entry-wrap">'
                     . $image_output
                     . '<div class="x-recent-posts-content">'
                       . '<h3 class="h-recent-posts">' . get_the_title( $post->ID ) . '</h3>'
                       . '<span class="x-recent-posts-date">' . get_the_date( '', $post->ID ) . '</span>'
                     . '</div>'
                   . '</div>'
                 . '</article>'
               . '</a>';

    }

  $output .= '</div>';

  return $output;
}

function x_recent_posts_excerpt() {
  remove_shortcode( 'x_recent_posts' );
  remove_shortcode( 'recent_posts' );
  add_shortcode( 'x_recent_posts', 'x_shortcode_recent_posts_v2' );
  add_shortcode( 'recent_posts', 'x_shortcode_recent_posts_v2' );
}

Also you can try adding this code in the Global CSS:

.x-recent-posts .x-recent-posts-img {
    padding-bottom: 75%;
}

If the featured image still looks cropped can you send us the link of the page where the recent post element is so that we can check it?

Thank you.

[psft]

Thank you very much, Jade.

I’m a little confused. In my web, I’m using X THEME. Do I have to install the Child Theme and use that theme instead of X?

The link of the page where the recent post element is http://clon.psft.eu/

Thanks!

[christian]

Hey Pamela,

We’re sorry for the confusion. You do not need to use a child theme for this.

I’d first like to let you know the Recent Post featured image setup in our theme. The Recent Post featured image’s aspect ratio is fixed to 16:9 which is the aspect ratio of most devices like computer monitors, cellphones and TV. In case you don’t know what an aspect ratio is, please read this: https://calculateaspectratio.com

Since the aspect ratio is fixed, you need to conform to that ratio. That means you need to design your featured image in a 16:9 aspect ratio. For example, if your image width is 1920px, the height must be 1080px.

The aspect ratio is defined by the padding-bottom property in the stack’s CSS.

If you don’t want to conform to the theme’s aspect ratio, you need to override the padding-bottom. To test, add this code in WP Admin > X/Pro > Theme Options > CSS.

.x-recent-posts .x-recent-posts-img {
    padding-bottom: 82.25%;
}

That will display most of your image.

Hope that helps.