Docs

[khtims75]

Hello, I am using the ethos xtheme and I have a small section on my home page that I have my projects in at http://websmithguy.com. I would like to use images that show the top of the image. Since they are websites it doesn’t make sense to show the center. Can I change the cropping to crop from the top instead of center? Or is there another way to do this? I didn’t see any css fix because the image used does not have the top. So, thanks for your help.

[Rupok]

Hi there,

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

.home .x-recent-posts-img {
  background-position: center top;
}

Cheers!

[khtims75]

So I mentioned in my first post that the css doesn’t fix it. Maybe we’re not on the same page. I’m talking about the section on my homepage that has a few of my recent projects featured. Not on the projects page itself. On the homepage in that section the images the theme is using crop in the middle. So the top does not show and is not a part of the image used here. You can see by attempting to try the code you provided does not resolve this issue. Is there a way that I can use an image that has the top of it included?

[Rupok]

Hi there,

I am looking at this section – http://prntscr.com/czqkh0

And if you notice the code, it’s tailored for home page. However checking the image itself (http://websmithguy.com/wp-content/uploads/2016/10/mitrapura-full-1000×654.jpg), I can see the top part is visible. So not sure what exactly not working. You can try other background-position and size properties.

Thanks!

[khtims75]

Well, you’re on the right section but the image in that section does not have the top of the image on it. It’s a cropped version of the image I uploaded. For example, if you click on the image that you gave as an example. That’s the MitraPura project. Once you click on that image it will pull up that project page and you can see the image there in it’s entirety (this image:http://websmithguy.com/wp-content/uploads/2016/10/mitrapura-full.jpg). That’s the actual image I uploaded. So I want the upper portion of the image to be used for my images, not the center portion that is getting cropped now. This isn’t css stuff. It’s the way the theme is cropping and using images. I hope that added some clarity to see the image as it should be displayed.

[Rue Nel]

Hello There,

By default, the recent posts element will be using a cropped version of the image. In your case, it will need to be modified to be able to display the full image and change the position of the image. Because what you are trying to accomplish requires a template customization, we would like to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

After the child theme is set up, please add the following code in your child theme’s functions.php file

// Custom Recent Posts element
// =============================================================================
// Recent Posts
// =============================================================================

function custom_x_shortcode_recent_posts( $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] . '); background-position: top center;"' : '';
        $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', 'change_x_shortcode_recent_posts');
function change_x_shortcode_recent_posts() {
    remove_shortcode( 'x_recent_posts' );
    add_shortcode( 'x_recent_posts', 'custom_x_shortcode_recent_posts' );
}
// =============================================================================

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

[khtims75]

Yes, that is exactly what I was looking for. You were most helpful!

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts