Docs

[Jennifer P]

Hi,

I’m using the Ethos theme, and the Recent Posts module. I’d like the recent post image to show as square, which I was able to achieve. The problem is, that the image is scaled way up. And it looks like it is using an cropped rectangular thumbnail for the featured image. Can you help?

I’m targeting the image currently this way:

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

And it looks like in the code, this is what image is being pulled in: url(“http://writerobinson.com/wp-content/uploads/2016/09/Screen-Shot-2016-09-10-at-9.43.05-AM-842×471.png”);

Is there a way to target the featured image crop and change that so it isn’t cropping the images this way?

Thanks, Jen

[Jennifer P]

This reply has been marked as private.

[Jennifer P]

One more Recent Posts question to tack on here. I have a plugin that created a custom post type called Products. I’d like to use this to populate my recent post module. However, it isn’t showing up in the dropdown under Post Type when I go in to edit that module. Is there a fix for this?

Thanks,
Jen

[Rad]

Hi Jen,

Thanks for posting in.

You should change background-size: contain; to background-size: cover;

Please add this code to your child theme’s functions.php with your preferred post type.

add_filter( 'cs_recent_posts_post_types', 'my_allowed_post_types', 999 );

function my_allowed_post_types ( $post_types ) {

$post_types['my-post-type'] = 'My Post Type';

return $post_types;

}

Cheers!

[Jennifer P]

Issue #1: background-size: cover; isn’t changing anything. The thumbnails still look the same as the screenshot above.

Issue #2: The product post. I added the code and changed it like so:

add_filter( 'cs_recent_posts_post_types', 'my_allowed_post_types', 999 );

function my_allowed_post_types ( $post_types ) {

$post_types['products'] = 'Products';

return $post_types;

}

See the screenshot below. Basically, it added a blank choice that didn’t pull in any data to my Recent Posts feed. Did I put in the post name improperly?

Thanks!
Jen

[Thai]

Hi There,

Please try adding the following shortcode to the raw content:

[recent_posts count="4" type="products"]

Hope it helps 🙂

[Jennifer P]

That didn’t work either. Should I remove the added function above first before trying the shortcode?

[Jennifer P]

Tried removing the function and the shortcode worked, but pulled in the post category of “products” not the Products post type.

[Paul R]

Hi Jennifer,

To fix it, you can add this in your child theme’s functions.php file.

function x_shortcode_recent_posts_v2code( $atts ) {
  extract( shortcode_atts( array(
    'id'           => '',
    'class'        => '',
    'style'        => '',
    'type'         => 'post',
    'count'        => '',
    'category'     => '',
    'offset'       => '',
    'orientation'  => '',
    'show_excerpt' => 'false',
    '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' );
}
// ============================================================================= 

Then add this in Custom > Edit Global CSS

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

Hope that helps

[Jennifer P]

Hi, thanks for the help. The photos now look correct in Customizer, but not in the Cornerstone page editor. Oddness. But, it looks right in the page preview, so that is good.

I’m unclear as to what the added function was supposed to do…..is it what helped the thumbnails view correctly? Or was that to help the shortcode work? If that was the purpose, it didn’t work as the shortcode is pulling in posts with the product category (like the recent posts module) instead of the Products custom post type.

Thanks again!

[Paul R]

Hi Jennifer,

The code provided above is to modify the recent posts shortcode to pull the full size image and not the cropped one.

To fix the posts type, try changing this line

add_action('wp_head', 'change_recent_posts_to_v2');

to this

add_action('wp_head', 'change_recent_posts_to_v2',99);

If that doesn’t help kindly provide us your wordpress and ftp login in private reply.

Thanks

[Jennifer P]

That didn’t fix the posts type. I put the login info above, but will paste it below as well to make it easier. Thanks!

[Jennifer P]

This reply has been marked as private.

[Jade]

Hi Jennifer,

I have tried to login to your site to check but I can’t seem to find the page where you used the recent posts. Also it’s not using the Ethos stack. Are you trying to change things at the moment?

[Jennifer P]

Yes, we were trying to change things. Sorry. We needed updated hosting so we had to migrate the site. Everything is back up and running again now.

[Author]

Posts