Recent Post Image Cropping

Support
#1

Hello,

The recent post element is cropping my image as seen below. The yellow box around the photo should go around the top and bottom as well. I have tried many corrections after searching the form including the link below and can’t get anything to work, although I have not tried uploading a different size picture yet. Is that my only option?

Thanks,
David

#2

I also have an un-related question… is there anything reading material you can provide me on the differences/uses of elements vs shortcode? You seem to be able to implement the same things, just one is using a drag and drop from the page builder and the other is inserting a code via text box? Am I missing something? Thanks!

#3

Hi David,

I would like to check your website but the password is incorrect. Could you please double check?

Can you also replace your current custom code with the following 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' );
}

The result would be the same. The element can be placed under the content builder only. The shortcode you can insert any where.

Let us know how it goes!

#4

Hey Thai -

Sorry about that. I updated my login info in the secure message.

I also inserted the above code into the global CSS under theme options. It doesn’t look like it changed the picture much. Is that where I was supposed to put it?

Thanks

#5

Hi @davepar3,

All the custom PHP codes should be put under functions.php file locates in your child theme.

I’ve already corrected it for you. Please take a look.

Regards!

#6

Hey Thai -

Thanks for that. But my picture on the recent posts element is still cropped. Here is what it looks like,

And here is the full picture,

As you can see, the yellow border goes all the way around the photo. Is it possible to make it look like this in the recent posts element?

Thanks

#7

Ok timeout, for some reason it shows correctly when I’m looking at the website through at this level,

But as soon as I click “edit” under the home page it shows the cropped picture. So maybe we are good to go.

Thanks again.

#8

Glad to hear it’s working fine now.

#9

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