[lilokwanParticipant]

Hi guys! I need a hand! Whenever I have a new post I add a label at the bottom of the image I set as “featured image” which states the category that post belongs to.

I’ve had some problems with the “recent posts” short code as it crops my picture cutting my label at the bottom, or as it happened with my last post, leaving it completely out. I searched for this issue on the forum and tried to add

.x-recent-posts img {
min-height: 150px;
max-height: 150px;
}

To the customizer, tried different px sizes and nothing, so I kept on looking and saw another solution which involved changing the functions.php file. I’m not entirely sure where that is, so I went to my wordpress adm page, found “appearance”, then found an “editor” there and found a so called functions.php file which I then modified by adding a code you shared with someone else that started as

// =============================================================================
// Avoid Recent Posts Image Cropping
// =============================================================================

Didn’t work either… I don’t really care if my images are cropped or not, but I need the bottom limit to stay intact as I need the “category label” to appear on the “recent posts” shortcode. Could you please give me a hand?

Here is my site: liliquant.com, you will see my latest post, the one on “Sensō-ji”, does not have the label I’m talking about on the image shown in the “latest posts”, but if you open the entry the image has it at the bottom.

Thanks a lot!

[Rue NelModerator]

Hello There,

Thanks for writing in! The recent post element display the featured image as a background image of the post item. It is using the built in image size dimension in X entry-cropped. This width is taken from the content width and site layout settings in the customizer. To resolve your issue, you must do two things.
#1] Please add the following css code in the customizer, Appearance > Customize > Custom > Edit Global CSS

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

#2] Please insert this following code in your child theme’s functions.php file.

// Custom Recent Post with full image
// =============================================================================
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(), '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';
      }

      // $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' );
}

We would loved to know if this has work for you. Thank you.

[lilokwanParticipant]

Awesome! worked perfectly, thanks a lot!

Now, a random question: I Purchased an X license around 2 months ago, and I now I have “support” for 6 months with my purchase, does that mean after those 6 months I don’t get to ask questions? Or what does it mean exactly?

Thanks again!

PS: in the code added to the customizer, is it possible to change the “contain” for a pixel size number? I would like the preview images in the “recent posts” short code to be a little bigger than they are now.

[JoaoModerator]

Hi There,

Not sure if changing of px would be the best solution in terms of responsive design. Would you mind to share your URL with us? Would you like to make those pics even smaller or what would be your goal?

Please let us know

Joao

[JoaoModerator]

And regarding the support you can purchase extended support at themeforest after that.

Of course if you have puntual questions we would not deny to answer you.

Hope it helps

Joao

[lilokwanParticipant]

Hi!

Sorry for the delay but here I am! Ok, here is what is going on: I have a “recent post” section on my page, it works great but your shortcode kept on cropping my “featured image” and I needed the bottom edge of the image to remain intact as I add tags to them to show the “category” the post belongs to. I wrote you guys and you were awesome and gave me some things to do, that included adding some code to my customizer and changing the functions file of the child´s theme. It worked, now my pictures were not being cropped on the “recent post” section, but because they were not, they looked rather small. So, I used to have “horizontal, 4 count” and I changed it to an “offset” mix to have like a grid, that works for me, but one of the pictures, the one on “Senjo-ji” is still being cropped somehow. Could you give me a hand please?

PS: my URL is liliquant.com

[Rue NelModerator]

Hello There,

Thanks for updating in! Please update the css code given in our previous reply. You can make use of this code instead:

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

This code will make sure that the image will be display from bottom up. And by the way, your images still looks like it is crop because you are using Photon module. Please disable the Photon module in your Jetpack plugin. Please have a understanding of using Photon and also know its limitation. You can check it here: https://developer.wordpress.com/docs/photon/

Hope this helps. Kindly let us know.

[Author]

Posts