Ethos stack recent posts

[deranaloge]

hi there,

i added the recent post shortcode in an content area. that works great.
now i have 3 questions and hopefully they can get solved.

1. is it possible to flip the image and the headline around? so the headline is on top and the image is bottom?
2. is it possible to show 2 lines of the blog post title? now it does not show the full title because it has to many chars.
3. is it possible to add an read more button?

many thanks in advance for your help!
(credentials in secure note)

cheers
harry

[ruenel]

Hello Harry,

Thank you for the very detailed post information.

Adding a read more to each of the post item is not possible because the whole post item is already a link and you cannot insert a link within a link.

I went ahead and modified the changes your want. To accomplish this, the recent post shortcode were customized to swap the image and the title. In your child theme’s functions.php file, this code were added:

// Custom Recent Post shortcode
// =============================================================================
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 );

  $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 ), 'entry-cropped' );
        $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">'
                     
                     . '<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>'
                     
                     . $image_output

                   . '</div>'
                 . '</article>'
               . '</a>';

    }

  $output .= '</div>';

  return $output;
}

add_action('wp_head', 'change_recent_posts_to_v2');

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

And also in your child theme’s CSS as well this were added:

/* Recent Post shortcode */
.x-recent-posts a {
    padding: 5px;
}

.x-recent-posts .h-recent-posts {
    white-space: normal;
	min-height: 40px;
}

The minimum of 40 pixels is necessary so that you will have a uniform height for each of the post items.

Please check your site now.

[deranaloge]

hi,

wow that is great!!!

many many thanks for your help.

cheers

[rad]

You’re most welcome!