Docs

[photosteron]

Hi,

Having my website online for several weeks now, I’m perfectly happy with the functionality of all the elements. However, I noticed that the ‘Recent Posts’ element (that shows my recent blog-posts at my homepage) displays the ‘featured image’ of the blog-post, but crops it (cutting off a top and bottom part).
I did some searches in this forum, but couldn’t find my answer; hope you guys can help me. Is it possible (via CSS) to adjust the crop height or set it so that the image is displayed without cropping, or is used full height (maybe the crop happening at the sides then).

If you need an example; a quick glance at my website ( http://www.photosteron.com ) shows the element at the bottom of the page and you can see at the right-most image of the dog that her head is cut-off now). I have worse examples, but I took them offline for now (for cosmetic reasons 😉

Thanks for taking the time to help me out! 😉
Erik.

[Lely]

Hi Erik,

To avoid image cropping and use original image instead, please add the following code on your child theme’s functions.php file:

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

function x_shortcode_recent_posts_avoid_cropping( $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(), 'entry' );
        $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_2');
 
function change_recent_posts_2() {
    remove_shortcode( 'x_recent_posts' );
    add_shortcode( 'x_recent_posts', 'x_shortcode_recent_posts_avoid_cropping' );
}

But that wouldn’t help on the first recent post entry. It is cropped because you’re original image is vertical instead of horizontal. You may opt to use vertical image instead of adding above code.

Hope this helps.

[photosteron]

Hi Lely,

Thanks for the quick reply and help! I think one of the finer things in the support of you guys, is the quick turnaround, so you don’t have to wait several days for an answer while working at a website 😉

I already had the child theme functionality set-up and active, so I could quickly insert the code in the editor. However, nothing has changed and the images are still cut. Do I need to adjust any further parameters in the code you provided?

About your remark of vertical vs horizontal: I’m aware of that, but this particular vertical image (the first one on the left) is the least of my concerns. It’s about the cropping of the horizontal images (and square images) that I’d like to change.

Hope you can find some more ideas to help me out here!?

Cheers,
Erik.

[Paul R]

Hi Erik,

You can add this under Custom > Edit Global CSS in the Customizer.

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

You can change cover to other options.

YOu can test how each option works on the link below

http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=auto

Hope that helps.

[photosteron]

Hi Paul,

Thanks for your help! I can feel we’re on the right track, but unfortunately the CSS code makes no difference at all. I tried several arguments (although I think the ‘contain’ parameter is what I am looking for)… Whatever argument I use, I cannot spot any differences, so I’m asking myself if I am tweaking the right thing here. Hope you can shed some further light on this!

Extra question: I’m unsure what to do with the code from Lely (see his first answer, above). Does this code and your css code work together and are both needed? I tried with- and without the code from Lely, but it doesn’t work either way… Images are still cropped the same way they were before…

Thanks again for helping me out!
Erik.

[Paul R]

Hi Erik,

Yes, both code is needed.

Please change the code(Lely’s code) provided above with this.

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

function x_shortcode_recent_posts_avoid_cropping( $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_2');
 
function change_recent_posts_2() {
    remove_shortcode( 'x_recent_posts' );
    add_shortcode( 'x_recent_posts', 'x_shortcode_recent_posts_avoid_cropping' );
}

Hope that helps.

[photosteron]

Hi Paul,

Thanks for the adjustments! But it still doesn’t work. I think I have all the stuff in the right places (not the first time I edit the child theme functions file or the custom css), but it still doesn’t change anything. Also trying other Property Values like in your example above doesn’t change anything.

Any further insights what to do?

Thanks in advance for all your time you invest in my problem!
Erik.

[Rad]

Hi there,

Please try changing this code,

add_action('wp_head', 'change_recent_posts_2');
 
function change_recent_posts_2() {
    remove_shortcode( 'x_recent_posts' );
    add_shortcode( 'x_recent_posts', 'x_shortcode_recent_posts_avoid_cropping' );
}

to this,

add_action('wp_head', 'change_recent_posts_2');
 
function change_recent_posts_2() {

    remove_shortcode( 'x_recent_posts' ); //X
    remove_shortcode( 'cs_recent_posts' ); //CS
    remove_shortcode( 'recent_posts' ); //VC

    add_shortcode( 'x_recent_posts', 'x_shortcode_recent_posts_avoid_cropping' ); //X
    add_shortcode( 'cs_recent_posts', 'x_shortcode_recent_posts_avoid_cropping' ); //CS
    add_shortcode( 'recent_posts', 'x_shortcode_recent_posts_avoid_cropping' ); //VC

}

Thanks!

[photosteron]

Hi Rad,

Thanks for helping me out! Looks like this is a nasty one, since the image on the fromtpage is still cropped, with all extra child-theme and css code in place.
I’ll send my login credentials in the following post. Would you be so kind to pop-in my website and check to see if I have the code properly set? Maybe there’s something not right?
And please share any further insights on how to get the cropping to change.

Thanks again,
Erik.

[photosteron]

This reply has been marked as private.

[Rue Nel]

Hello There,

it is not working because you added the code in the wrong file. You need to add it in your child theme’s functions.php file. I went ahead and fixed the issue.

I also added this custom css in your child theme’s style.css file

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

The spaces around the feature image in the recent posts element is not the same because the images were not of the same sizes and this will be normal. If you want to eliminate the spaces and make it uniform, you will have to choose because you will be back to square one which the portrait images will not be fully displayed.

Hope this explains it.

[photosteron]

Hi Rue,

Thank you very much for helping me out! It works! 😉
I’m a bit puzzled that you edited the child theme css; I hadn’t done that before; all changes I got from help in this forum normally had to go in the CSS part of the theme that opens when you select CUSTOMIZE.
But it’s working now and I can focus on how to edit the images to achieve a more uniform look.

Thanks again and thanks to all above (Lely, Paul, Rad) that also helped me here.
Erik.

[Christopher]

Hi there,

CSS code could be added in customizer or child theme’s style.css file, both work the same. If you added all previous CSS in customizer, you can add this one in customizer too.

Thanks.

[Author]

Posts