Blog featured image are showing as very small thumbnail

When I add a new blog post and set a large featured image after publishing the featured image appears a super small thumbnail. Is there a configuration in xtheme to set the size of featured image? Please note that I am running this locally.

Hey,

To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Hi John,
I am running this locally right now so I cannot supply you with a url at this time.

Hey,

It`s a little hard to check without a URL and WP credentials to check the settings or any conflict. If you can send it to live and share with us.

Here is the live site. Thank you
http://statenislandda.org/

Hi Jennine,

Your site is in Maintenance mode thus we can’t see the issue. Either remove the maintenance mode or share admin credentials using a secure note so we can check. Thank you.

Sorry, I took the maintenance mode off. You should now be able to go to the site. Is there a way to upload picture so I can reference an image for you to see?

Hey,

Are talking about this section: http://prntscr.com/gs65df ? - Or there is some news page?

yes, i am referring to that section. The featured images are displaying extremely blurry because they are coming in as small thumbnail image despite the fact that the image that is actually being uploaded is big.

Hi There,

Would you mind providing us with login credentials(by clicking on the Secure Note button at the bottom) so we can take a closer look? To do this, you can make a post with the following info:

  • Link login to your site
  • WordPress Admin username / password

Thanks.

were you able to see the username and password?

I’m not sure why the Recent Post uses a very small image size. It doesn’t do that out of the box.

First, please activate your caching plugin (WP Super Cache), clear all caches then deactivate it again and uninstall it completely. See https://wordpress.org/plugins/wp-super-cache/ to learn how to completely remove it.

Next, I see a third party additional code in your functions that PHP that is related to post thumbnail. Please remove it then regenerate all of your images again using the Force Regenerate Thumbnails plugin.

If that doesn’t resolve the issue, try testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

I see you’re using Jetpack. Have you used it’s Photon service before. It’s known for reducing the image size.

If nothing helps, please give us FTP access in a Secure Note and also allow us to deactivate plugins and remove customizations so please backup your site.

Thanks.

OK Thnaks. I will do all of your suggestions and get back to you if nothing works.

I have another question please. I would like to have the post on the page be layout like you see in the photo. The picture is on the bottom as opposed to the top. How can I achieve this. I know how to do the custom CSS but is there a place to edit the html as well?
Thank you

Hi,

To add the picture at the bottom, you need to modify the recent posts shortcode.

You can add the code below in your child theme’s functions.php file.

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-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';
      }
      // $excerpt = ( $show_excerpt ) ? '<div class="x-recent-posts-excerpt"><p>' . preg_replace('/<a.*?more-link.*?<\/a>/', '', cs_get_excerpt_for_social() ) . '</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">'                     
                     . '<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>'
                     . $image_output
                   . '</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 that helps.

March 2021 Update: The above code example has been adjusted to account for a change to a function name.

Thank you that worked!!

Hello,
I followed all of your recommendations but unfortunately I am still having the same issue.
I have attached the ftp access. There are two separate websites on there. Please navigate to the statenislandda folder.
Thank you

Hi there,

It’s not the code issue, but something like image generation issue. Please install Force Regenerate Thumbnails plugin and generate your images again.

Another option is to ignore all generated images through code. Example, from the above code, replace this line

$image = wp_get_attachment_image_src( get_post_thumbnail_id(), 'entry-cropped' );

with this

$image = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' );

The entry-cropped size is supposed to be about 900px but looks like the image aren’t generated yet.

Thanks.

Hello,
That did not work either. It seems it is something within cornerstone because when i use wordpress posts without using PRO the images are perfect. I supplied the ftp username and passcode. I am hoping that someone can hep me get this resolved as I have a deadline. I am also having an issue with the template tab being empty so it seems as if something may be going on with cornerstone.
Thank you

Hi there,

That changes are for shortcode only and not for cornerstone, please use the shortcode within text element instead of actual recent posts element. Example,

[x_recent_posts count="2"]

Or, please change this

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

to this

function change_recent_posts_to_v2() {
    remove_shortcode( 'x_recent_posts' );
    remove_shortcode( 'cs_recent_posts' );
    remove_shortcode( 'recent_posts' );

    add_shortcode( 'x_recent_posts', 'x_shortcode_recent_posts_v2code' );
    add_shortcode( 'cs_recent_posts', 'x_shortcode_recent_posts_v2code' );
    add_shortcode( 'recent_posts', 'x_shortcode_recent_posts_v2code' );
}

I can’t verify image generation issue through FTP, please provide your admin login credentials as well.

Thanks!

Hi There,

The image is fine when I check again and you are now using the default image and not a cropped version of it: https://screencast-o-matic.com/watch/cb66fuICsE