Image height "recent post item"

Support
#1

Hi

how can I increase the height of the image of the “recent post item” ?

Most of my post have a square cover image, which I would like to be fully displayed in the recent post items preview

I increase the height with:

.x-recent-posts-img {
height:500px;
}

but the image is then enlarged. how can I “shrink” the image back in the box?

thanks

#2

Hi Conte,

If you want to have the entire part of the image displayed in the recent post element, try using this code:

.x-recent-posts .x-recent-posts-img {
    background-size: contain;
}

Or instead of setting the height, increase the bottom padding like this:

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

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps.

#3

Thanks for the fast reply. However the image is cut at top and bottom. Any other ideas?

#4

Hi Conte,

You have several licenses in your account and I tried to check the sites associated with the licenses but I can’t seem to find the site in question. Would you mind providing the URL of the site so that we can check it?

Thank you.

#5

sent you PM

#6

Hi Conte,

Please avoid sending private messages to the staff and keep the correspondence in this thread since there is a chance that another staff will handle a thread for the next time.

If you want to post something private so that it will only be visible to you and the staff members, please make use of the Secure Note feature.

As for the featured image of the recent post element, it is using the size entry-cropped which is a cropped version of the image by default. To use the full version of the image, please install and activate the child theme and login through FTP then edit the functions.php then add this code:

// Displaying Excerpt in Recent Posts
// =============================================================================

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;
  
  }
  
  add_filter('wp_head', 'x_recent_posts_full_image');
  
  function x_recent_posts_full_image() {
    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' );
  }

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps.

#8

rocks!

Thanks for the impressive support.

#9

You’re most welcome, Conte! Have a nice Friday ahead. :slight_smile:

#10

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