Recent Posts Shortcode - Image Size Too Big

I don’t understand why the recent posts shortcode should have the full size image. The shortcode is used mostly to show recent posts in a list and a thumbnail should be taken instead.

How could I change the image size in the function? I assume this line needs to be edited somehow to pick a smaller thumbnail size.

$image_output = '<div class="x-recent-posts-img">' . get_the_post_thumbnail( get_the_ID(), 'entry', NULL ) . '</div>';

Many thanks,
Andrew

Hello There,

Thanks for writing in! The entry size for the recent posts element is not the fullwidth. It maybe the full image if you have upload an image smaller than the set entry size. If you want to change that size, you will have to modify the shortcode. Because what you are trying to accomplish requires a template customization, we would highly 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

// Add Excerpts to the recent post element
// =============================================================================
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(), 'medium' );
        $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( csi18n('shortcodes.recent-posts-permalink'), 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' );
}
// =============================================================================

The code is using the medium size image. You can set or check the dimension of medium size in Settings > Media.

Hope this helps. Please let us know how it goes.

ok this works but I am a bit confused because now I have [x_recent_posts] shortcode and [recent_posts] shortcode.

Both of them work… not sure if you were meant to have the original naming convention for your example…

if you don’t mind me asking, how could I also display the category of each post in the output ?

:grinning:

many thanks!

Hi There,

Regretfully, the recent posts shortcode/element does not offer that feature. It could be possible with custom development, but this would be outside the scope of support we can offer. I advice that you use a 3rd party plugin instead to output a very flexible recent post content. Something like the Display Posts Shortcode It does offer a lot of parameters. It may look very raw at first but that is one thing good about it, it is fully styleable (with css).

Thanks for understanding.

Hi, I will try and figure this out myself as I don’t want to install more plugins !

Also my previous developer, developed a similar shortcode which uses transients. This is supposed to minimise the overload on the database. Why don’t you use transients as well ?

I attach the code, in case you want to implement this in X Theme.

function get_asset_posts($params, $content){
		$default_params = array(
			'post_type' 	=> 'post',
			'order'			=> 'desc',
			'orderby'		=> 'date',
			'posts_per_page'=> 6,
		);

		if (isset($params['type']) && !empty($params['type']) && post_type_exists($params['type']))
			$params['post_type'] = $params['type'];

		if (isset($params['taxonomy']) && !empty($params['taxonomy']) && taxonomy_exists($params['taxonomy'])
			&& isset($params['slug']) && !empty($params['slug']))
			$params[$params['taxonomy']] = $params['slug'];

		foreach(array('type', 'slug', 'taxonomy') as $key)
			if (isset($params[$key]))
				unset($params[$key]);

		$params = wp_parse_args($params, $default_params);

		$transient_hash = 'get_asset_posts_'.substr(md5(serialize($params)),0,10);

		if (false === ($html = get_transient($transient_hash))){
			add_filter('query', 'q');
			global $request_sql;

			$html = '';

			$rp = new WP_Query($params);

	if ($rp->have_posts()){

				$html .= '<ul>';
				while ( $rp->have_posts() ) {
					$rp->the_post();
					$html .= "<li>";

					if (($thumb_id = get_post_thumbnail_id())){
						$thumb = wp_get_attachment_image_src($thumb_id, 'spotlight', false);
					    $html .= "<a id=\"dubstep\" href=".get_permalink()."><img width=\"300\" height=\"170\" src=\"{$thumb['0']}\"><span id=\"epictext\">".get_field('fl_title')."</span>";
					}

					$html .= "</a></li>";
				}
				$html .= '</ul>';
			}

			if (!empty($html))
				set_transient($transient_hash, $html, 60);

		}
		return $html;
	}


// debug helper - setting posts query globaly
	function q($q){
		global $request_sql;

		if (strpos($q, 'SQL_CALC_FOUND_ROWS') !== false)
			remove_filter('query', 'q');

		$request_sql = $q;
		return $q;
	}


function breadcrombs(){
$html = '';
return $html;
}

	add_shortcode('get_date_posts', 'get_date_posts');
	add_shortcode('get_asset_posts', 'get_asset_posts');
	add_shortcode('breadcrombs', 'breadcrombs');

Hello There,

Thanks for updating in! We will be forwarding this and add it in our enhancements list.
If you need anything else we can help you with, please let us know.

Best Regards.