Hi,
I’m trying to figure out how to change the thumbnail size of my blog and portfolio.
They’re cropped automatically, and I’d prefer square or vertical images, rather than horizontal ones like it is now. I have tried changing the settings, but it didn’t help.
I was also wondering if it is possible to have different thumbnail sizes in the blog and recent post section.
Hi There,
Please provide us with the URL to your site, so that we can look into your issue.
In the meantime, you can try uploading similar high resolution images by resizing your images using a image resizing tool. For example, if you are using an image with less height, it will be showed in the frontend as you have mentioned.
Thanks!
Hi There,
To change the featured image size, please add the following code under functions.php file locates in your child theme:
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() ) {
if ( $cropped == 'cropped' ) {
if ( $fullwidth ) {
$thumb = get_the_post_thumbnail( NULL, 'full', NULL );
} else {
$thumb = get_the_post_thumbnail( NULL, 'full', NULL );
}
} else {
if ( $fullwidth ) {
$thumb = get_the_post_thumbnail( NULL, 'full', NULL );
} else {
$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;
}
}
}
Hope it helps 
Thank you
I have added your code to my child theme now.
Do I need to make any changes to the code, as my website looks just like before… ?
I’ve also created a test-page to show you even better what my problem ist…:
All the images on this page are cropped in a really unnice way… 
especially the one in the bottom one in the middle… http://pawsent.de/testseite/
Hi There,
Thanks for the update!
We are really sorry but I didn’t find any image on the given page.
As you mention that the site is same as before even adding the code, please check if you have any caching plugin active on your site. You can clear cache to reflect the changes.
If that doesn’t help please provide us your website details to look on to the issue.
Please provide following information:
Set it as Secure Note
Thanks
Thank you! I habe added the details above.
All the best
Hi There,
That’s the recent posts shortcode so you have to use this code to override the default shortcode:
function x_shortcode_recent_posts_v3( $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(), 'full' );
$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_v3');
function change_recent_posts_to_v3() {
remove_shortcode( 'x_recent_posts' );
add_shortcode( 'x_recent_posts', 'x_shortcode_recent_posts_v3' );
}
Let us know how it goes!
Thanks for that!
I have added the code to my child theme’s function.php, but I don’t see a change on my website.
Where do I need to define the size I want the thumbnails to have?
All the best and thanks again!
Hi,
You can try adding this in Theme Options > CSS
.single-post .entry-featured,
.x-portfolio .entry-featured {
width: 50%;
}
If you want to reduce the image size in your blog page, you can add this code.
.blog .entry-featured {
width: 50%;
margin:25px auto;
}
Hope this helps.
Yes, it did, kind of Thank you!
It only worked for my blog page though, not for my recent posts, do you know why and how I can change that?
Is it also possible to define a size, so all the featured images are the same size, preferably squares?
How do I keep the actual size in my blog post?
All the best
Hi there,
Recent posts are different and implemented in a different way too. The size also depends on the image uploaded, if we force them to be square and it happened to be rectangle image then clipping and distortion would occur. But to make the featured image from recent posts to be square, then please add this CSS too.
.x-recent-posts .x-recent-posts-img {
padding-bottom: 100%;
}
Hope this helps.
Thank you!
You’re most welcome!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.