[ThitParticipant]

Hi X support team,

I would like to use the “Recent Posts” shortcode on my front page, to display recent posts as a news feed. I would like the featured image from the post to be showing as well.

But when setting the orientation of Recent Posts to horizontal, the columns are many different heights because of the different sized featured images.
Is it possible to add CSS or some other solution to show a cropped/thumbnailed version of the featured image? Preferably a very low height crop for all images. So the columns will all be the same height. 🙂 It would look so much better with the horizontal orientation to have equal height.

My second question is, if it is possible to add excerpt text to the Recent Posts? To make it look more like the news blog feed.

My site (work in progress) is located here: http://ofag.dk.linux43.unoeuro-server.com/wp/

Thank you so much for your time.
From Thit H, Denmark.

[ZeshanMember]

Hi Thit,

Thank you for writing in!

#1: This can be achieved by adding the following CSS code in Customizer > Custom > CSS:

.home .x-recent-posts .has-post-thumbnail .x-recent-posts-img { /* This will only work on HOMEPAGE, for all pages, remove ".home" from the starting of this line */
   height: 200px;
   overflow: hidden;
}

#2: This can be done by custom development. 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.

Next paste the following code in your child theme’s functions.php file:

function x_shortcode_recent_posts_v2code( $atts ) {

     extract( shortcode_atts( array(
    'id'          => '',
    'class'       => '',
    'style'       => '',
    'type'        => '',
    'count'       => '',
    'category'    => '',
    'offset'      => '',
    'orientation' => '',
    'enable_excerpt' => '',
    'no_image'    => '',
    'fade'        => ''
  ), $atts ) );

  $id            = ( $id          != ''          ) ? 'id="' . esc_attr( $id ) . '"' : '';
  $class         = ( $class       != ''          ) ? 'x-recent-posts cf ' . esc_attr( $class ) : 'x-recent-posts cf';
  $style         = ( $style       != ''          ) ? 'style="' . $style . '"' : '';
  $type          = ( $type        == 'portfolio' ) ? 'x-portfolio' : 'post';
  $count         = ( $count       != ''          ) ? $count : 3;
  $category      = ( $category    != ''          ) ? $category : '';
  $category_type = ( $type        == 'post'      ) ? 'category_name' : 'portfolio-category';
  $offset        = ( $offset      != ''          ) ? $offset : 0;
  $orientation   = ( $orientation != ''          ) ? ' ' . $orientation : ' horizontal';
  $no_image      = ( $no_image    == 'true'      ) ? $no_image : '';
  $fade          = ( $fade        == 'true'      ) ? $fade : 'false';
  $enable_excerpt = ( $enable_excerpt == 'true'      ) ? true : false;

  $output = "<div {$id} class=\"{$class}{$orientation}\" {$style} data-fade=\"{$fade}\">";

    $q = new WP_Query( array(
      'orderby'          => 'date',
      'post_type'        => "{$type}",
      'posts_per_page'   => "{$count}",
      'offset'           => "{$offset}",
      "{$category_type}" => "{$category}"
    ) );

    if ( $q->have_posts() ) : while ( $q->have_posts() ) : $q->the_post();

      if ( $no_image == 'true' ) {
        $image_output       = '';
        $image_output_class = 'no-image';
      } else {
        $image_output       = '<div class="x-recent-posts-img">' . get_the_post_thumbnail( get_the_ID(), 'entry-' . x_get_option( 'x_stack', 'integrity' ) . '-cropped', NULL ) . '</div>';
        $image_output_class = 'with-image';
      }

      $output .= '<a class="x-recent-post' . $count . ' ' . $image_output_class . '" href="' . get_permalink( get_the_ID() ) . '" title="' . esc_attr( sprintf( __( 'Permalink to: "%s"', '__x__' ), 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><br>'
                     . '<span class="x-recent-posts-excerpt">' . get_the_excerpt() . '</span>'
                   . '</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( 'recent_posts' );
	add_shortcode( 'recent_posts', 'x_shortcode_recent_posts_v2code' );
}

Hope this helps. 🙂

Thank you.

[yesHEisParticipant]

This reply has been marked as private.

[Paula SMember]

Hi Rob,

Thanks for the information, and I’m sorry to hear that you’re still having issues with the website. Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Kindly send us a reply with your login information (and tick the Set as private reply at the bottom). Thanks and we’ll be waiting for your response. Have a nice day.

[yesHEisParticipant]

This reply has been marked as private.

[Paul RModerator]

Hi Rob,

In your custom shortcode function find the code

get_the_content()

replace it with

strip_tags(get_the_content())

Thanks

[yesHEisParticipant]

This reply has been marked as private.

[RadModerator]

Hi Rob,

This is why 🙂

get_the_content() will pickup the raw content of your post. Then strip_tags() will remove any HTML on it.

The problem is that shortcodes are not yet evaluate when using get_the_content() compared to the_content(), this means that shortcodes are not converted to HTML and strip_tags() will skip them. When done, the result output (which has raw shortcodes) will be forwarded to its parent shortcode for rendering. And this rendering includes the not converted shortcode from get_the_content() which creates the blank content band.

This is the fix,

. '<p>' . wp_trim_words( strip_tags( do_shortcode( get_the_content() )), 30 ) . '</p>'

The problem with that is performance, and could lead to slow processing and memory overflow. Still, you can still use get_the_excerpt() instead get_the_content(), because it’s the main purpose of that function. get_the_content() is meant to full single page display and not in the loop.

. '<p>' . wp_trim_words( strip_tags( get_the_excerpt() ), 30 ) . '</p>'

Thanks.

[yesHEisParticipant]

This reply has been marked as private.

[RadModerator]

Great to hear that Rob, you’re always welcome !

[sander bParticipant]

I have might a solution! i found

http://theme.co/x/member/?s=posts+in+different+pages
where somebody was describing this plugin. Post for page

everything works as a charm with this plug. Very easy to use. Recommended.

http://wordpress.org/plugins/posts-for-page/

[MrinalMember]

Hi Sander,

We appreciate your research & sharing it here for other users. Many Thanks!

Have a nice day, Cheers!

[Author]

Posts