Use full size featured images in posts and on blog page

I have a site where I use the Integrity 1 stack. When I go to the blog page and also within the posts itself, I noticed that the images used there are thumbnails and do not use the original image with the original image sizes.
How do I make it, so that on the blog page as well as in the articles itself, the images with the original size are being used instead of a generated thumbnail?

Hello @Muller,

Thanks for writing in!

By default the single blog post and the recent post element is using the cropped version of the image. If you want to display fullwidth we need to override the default settings. 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 the child theme is set up, please add the following code in your child theme’s functions.php file

// Fullsize Featured Image
// =============================================================================
if ( ! function_exists( 'x_featured_image' ) ) :
  function x_featured_image( $cropped = '' ) {

    $stack     = x_get_stack();
    $fullwidth = ( in_array( 'x-full-width-active', get_body_class() ) ) ? true : false;

    if ( has_post_thumbnail() ) {

      $thumb = get_the_post_thumbnail( NULL, 'full', NULL );

      switch ( is_singular() ) {
        case true:
          printf( '<div class="entry-thumb">%s</div>', $thumb );
          break;
        case false:
          printf( '<a href="%1$s" class="entry-thumb" title="%2$s">%3$s</a>',
            esc_url( get_permalink() ),
            esc_attr( sprintf( __( 'Permalink to: "%s"', '__x__' ), the_title_attribute( 'echo=0' ) ) ),
            $thumb
          );
          break;
      }

    }

  }
endif;

// Fullsize image 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 );

  $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 ), 'fullwidth' );
        $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">'
                     . $image_output
                     . '<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>'
                   . '</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' );
  add_shortcode( 'x_recent_posts', 'x_shortcode_recent_posts_v2code' );
}
// =============================================================================

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

1 Like

Hello @RueNel,

thank you very much! Your solution worked perfectly fine! It did exactly what I was looking to achieve :slight_smile:

Glad to know!

Thanks

Hi support
I am looking to do something similar but maybe not exactly the same.
URL: http://richardrosebery.com/news-events/
This page is using a classic recent posts element, it seems to have a set proportion in it, can I change this to reflect the proportions of the post images.

Hey Phil,

For this case, we would need to override the image frame’s aspect ratio by using this CSS

.x-recent-posts .x-recent-posts-img {
    padding-bottom: 55.95%;
}

Please note that this will not work if you have different image aspect ratios. For that, I’d recommend that you use Envira Gallery

Hope that helps.

Thanks guys
That is a great help I think I will flip it to the Envira gallery

Glad we could help.

Cheers!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.