Distorted thumbnail images

Sparkling
1

I have a general problem with thumbnails in my theme.
I use a mix of horizontal and vertical featured images for my posts and in my old theme the thumbnails were simply cropped to the right proportions instead of distorted.
In the Sparkling theme, the thumbnails are distorted so that vertical images are pressed flat. How can I fix this?

See my category page for examples:

2

Hi @tjuel,

Sorry to hear of the problem you are having.

To resolve the issue could you please try regenerating thumbnails on your site using the following plugin?

Best Regards,
Movin

3

Hi Movin
Sorry for my late reply, I got all caught up in Christmas :wink:

I should have clarified that I have already tried using the regenerate thumbnails plugin several times, with the same result. In Settings > Media, I have set the thumbnail size to 180 x 180 pixels and checked the “crop thumbnails” option, but as you can see, all thumbnail images are distorted.

Thanks for your help

4

Hi @tjuel,

It seems the following custom CSS code added in the style.css file of theme causing images distorted so could you please try removing it?

#CatGrid article.post img {
    padding-top: 0px;
    padding-bottom: 0px;
    height: 140px;
}

Best Regards,
Movin

5

Hi Movin

Thanks for your tip!
I removed the code, which correctly ensures the thumbnails are not distorted BUT they are now their actual proportions, e.g. a mix of vertical and horizontal images. I need the thumbnails to be 140 x 140 pixels cropped. How can I achieve this?

Example: http://www.bageglad.dk/opskrifter/desserter/bagvaerk-gaerdej/

6

Hi @tjuel,

You are using older version 1.9.3 of Sparkling theme so please try using latest version of it.

Also by default on Sparkling category page, the images are not displayed like that so have you developed any custom code to display it like that?

If yes then please share it to me so that i can troubleshoot it on my test site.

Regards,
Movin

7

Hi Movin,

Yes some custom code has been added to the theme to show a list of posts on category pages like this.

<?php
/**
 * @package sparkling
 */
?>

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	<div class="blog-item-wrap">
				<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
			 	
			</a>
		<div class="post-inner-content">

<!-- .entry-header -->

			<?php if ( is_search() ) : // Only display Excerpts for Search ?>
			<div class="entry-summary">
				<?php the_excerpt(); ?>
				<p><a class="btn btn-default read-more" href="<?php the_permalink(); ?>"><?php esc_html_e( 'Læs opskriften', 'sparkling' ); ?></a></p>
			</div><!-- .entry-summary -->
			<?php else : ?>
			<div class="entry-content">
<a href="<?php the_permalink(); ?>">
				<?php
				if ( get_theme_mod( 'sparkling_excerpts' ) == 1 ) :
					the_excerpt();
				else :
//					the_content();
					the_post_thumbnail(); 

				endif;
				 ?>
</a>
<!--				<p><a class="btn btn-default read-more" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php esc_html_e( 'Læs opskriften', 'sparkling' ); ?></a></p> -->

			</div><!-- .entry-content -->
				<h1 class="entry-title"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h1>

			<?php endif; ?>
		</div>
	</div>
</article>
<!-- #post-## -->

and

/* =Category grid - MOI 06092015

----------------------------------------------- */

#CatGrid{

}

#CatGrid article{
width:180px;
height:250px;
float:left;
margin-right:20px;
_border:1px solid lightgrey;
}

#CatGrid article .post-inner-content{
padding:0px;
}

#CatGrid article .entry-content p:first-child{
display:none;
}

#CatGrid article .entry-content{
margin:0 0 0;
}

#CatGrid h1.entry-title{
font-size:18px;
margin-bottom:0px;
text-align:center;

padding:9px 0px;
}

#CatGrid h1.entry-title a{
  font-size: 14px;
}

#CatGrid .entry-meta{
background-color:#ffffff;
margin-bottom:0px;
text-transform:none;
padding:0px;
text-align:center;
}

#CatGrid .entry-meta a{
font-weight:normal;
}

What I want to do is force the thumbnail size to 180x180 pixels cropped instead of distorted.
As already mentioned, I have set “thumbnail size” to be 180x180 and cropped in the media section of Wordpress’ settings.

Thanks so much for your help and merry christmas :slight_smile:

8

Hi @tjuel,

Could you please try changing in your above shared code the_post_thumbnail function call as following?

the_post_thumbnail(array(180, 180) );

Also please check whether the following solutions help you.

Regards,
Movin

9

Hi Movin

Thanks for the reply and the helpful tip. I changed the_post_thumbnail code as you suggested, which seems to have solved the problem for the vertical thumbnails. However, the horizontal thumbnails are not shown as 180x180.

Note: I ran the regenerate post thumbnails plugin after changing your code just to be sure, with no change.

Have a look here for example: http://www.bageglad.dk/opskrifter/tema/julemad/

I wonder if I need to change the thumbnail size settings in “Media”?

10

Hi @tjuel,

I wonder if I need to change the thumbnail size settings in “Media”?

Yes try changing it to 180 X 180

Also please try using the following CSS code.

#CatGrid article.post img {
    height: 210px;
    width: 180px;
}

Regards,
Movin

11

Hi Monin,

Thanks so much, this did the trick! I changed the article.post img as you suggested and ran the regenerate thumbnails plugin. Now all my thumbnails look correct.

One last question related to this: Is it possible to set a different thumbnail size for mobile and desktop devices?

12

Hi @tjuel,

You are most welcome here :slight_smile:

One last question related to this: Is it possible to set a different thumbnail size for mobile and desktop devices?

Yes you can try achieving this as described on the following pages.

http://www.smashingmagazine.com/2012/06/responsive-images-with-wordress-featured-images/
http://wpshout.com/adding-using-custom-image-sizes-wordpress-guide-best-thing-ever/

Best Regards,
Movin