Docs

[DiamondAlexander]

Hi there! I wanted to ask if it’s possible to add a read more link or button to the blog excerpts? I attached a screenshot from an Ethos blog featured in the showcase and she has the blog excerpt but I don’t feel from a UX standpoint that it’s clear how to read the full post.

I’ve done something similar with the Recent Posts element in Cornerstone but I haven’t tried it with the actual Ethos blog excerpt. Is there some code I can add to do this?

Thank you!

Diamond

[Prasant Rai]

Hello There,

Thanks for writing in!

Because this requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released.

Then add following code in child theme function.php file.

// Excerpt More String
// =============================================================================

if ( ! function_exists( 'x_excerpt_string' ) ) :
  function x_excerpt_string( $more ) {
    
    $stack = x_get_stack();

    if ( $stack == 'integrity' ) {
      return ' ... <div><a href="' . get_permalink() . '" class="more-link">' . __( 'Read More', '__x__' ) . '</a></div>';
    } else if ( $stack == 'renew' ) {
      return ' ... <a href="' . get_permalink() . '" class="more-link">' . __( 'Read More', '__x__' ) . '</a>';
    } else if ( $stack == 'icon' ) {
      return ' ...';
    } else if ( $stack == 'ethos' ) {
       return ' ... <a href="' . get_permalink() . '" class="more-link">' . __( 'Read More', '__x__' ) . '</a>';

    }

  }
  add_filter( 'excerpt_more', 'x_excerpt_string' );
endif;

Let us know how it goes.

Thanks.

[DiamondAlexander]

That worked perfectly, thank you so much!

Can I ask an additional question – it’s two parts:

1. Can I force the post thumbnail image to be custom dimensions? I don’t like that it currently cuts my featured image off because of the height. Am I able to force it to show the full image?

2. In the same vein, for the recent posts element, can I also force it to show the full featured image as the thumbnail as opposed to it being cut off?

Thank you in advance!
Diamond

[Darshana]

Hi there,

Please provide us with the URL to the page, so that we can check your concerns and provide you with a custom workaround.

Thanks!

[DiamondAlexander]

This reply has been marked as private.

[Rue Nel]

Hello Diamond,

Thanks for the updates! To remove the feature images issue, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.blog .entry-thumb,
.archive .entry-thumb,
.x-recent-posts .x-recent-posts-img {
    background-size: contain;
}

Please let us know if this works out for you.

[DiamondAlexander]

This reply has been marked as private.

[Lely]

Hi There,

Your site is under construction. Please do give us admin access so we can check the issue directly.

[DiamondAlexander]

This reply has been marked as private.

[Lely]

Hi There,

Thank you for the credentials.

1.) Please change the image and use a horizontal type of image. As you can see, the container is horizontal but then your image is vertical type. If we did using the current image, it’s either we can’t see the entire image or stretch badly. Other option is to update above CSS to this:

.blog .entry-thumb,
.archive .entry-thumb,
.x-recent-posts .x-recent-posts-img {
    background-size: contain;
    padding-bottom: 150%;
}

Above change will not be good if you choose horizontal type of image
2.) Recent post are using crop image. If you want to use original image we need some custom code.
Because this requires a template change, I’d advise that you setup 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.

Then add the following code on your child theme’s functions.php file:

// Recent Posts
// =============================================================================

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(), '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_to_v2');

function change_recent_posts_to_v2() {
  remove_shortcode( 'x_recent_posts' );
  add_shortcode( 'x_recent_posts', 'x_shortcode_recent_posts_v2code' );
}

Hope this helps.

[DiamondAlexander]

That worked perfectly! thank you everyone for helping me with this.

Diamond

[Rahul]

You are welcome!

[Author]

Posts