Portfolio Frontpage - how to make images "zoom to fill"?

A few of the featured images are displaying in the grid on the Portfolio Frontpage with white space below them. I thought it was probably only images with a very wide landscape aspect ratio, but some of them are actually portrait aspect ratio.
https://www.dropbox.com/s/5rehbjw1xt9hnqt/Screen%20Shot%202015-11-05%20at%2020.00.13.png?dl=0

1. Why might some images be doing this? Is it to do with aspect ratio, or size, or something else?

2. How can I adjust the CSS to make sure the images fill the whole space?

Hi,

Could you please provide me with a URL to your page where the issue is visible, either here or via PM (click the “Private Message” text underneath my avatar) so that I may analyze it?

Hi Piotr.
http://www.paulvincentfarrell.com/japangasm/

It's because of ratio.

Please check the first image, which is fine:
http://www.paulvincentfarrell.com/japan ... 00x380.jpg

but height of this one is not enough:
http://www.paulvincentfarrell.com/japan ... 00x344.jpg

That's what I thought, but images like thes are also showing white space:

http://www.paulvincentfarrell.com/japan ... 01_800.jpg

http://www.paulvincentfarrell.com/japan ... 01_900.jpg

http://www.paulvincentfarrell.com/japan ... 00_497.jpg

The aspect ratio on all of these is fine - the first 2 are portrait mode and 800/900 px high.

These images and many others (which are showing white space) have a taller aspect ratio than others which are displaying correctly.
So it doesn't seem a problem with the image aspect ratio, it must be something else.

Hi,
You've provided original image:
http://www.paulvincentfarrell.com/japan ... 01_900.jpg

but in this view wordpress takes this thumbnail:
http://www.paulvincentfarrell.com/japan ... 00x380.jpg

Please check the functions.php file, you should find here this fragment:

Code: Select all

// add image size for the portfolio frontpages
   add_image_size( 'portfolio-thumb', 500, 380, true );


which is responsible for the portfolio thumbnail size, please check the documentation:
https://developer.wordpress.org/referen ... mage_size/
and try to change these values. (don't forget to regenerate your image thumbnails after modifications, you can use i.e. this plugin: https://pl.wordpress.org/plugins/regenerate-thumbnails/ )

Thanks, I have looked at that.

So are you saying the Writer theme needs all thumbnails to be resized to 500x380? Or are you saying my thumbnails are already 500x380 and should be a different size? If so, what size?

I don't understand why I should have to manually change all the thumbnail sizes - as they are always automatically generated by WordPress - shouldn't the code of the theme be based on what WordPress automatically does?

Also I still don't understand how to change my thumbnail sizes - do I need to change the values in that line from the functions.php file? It also mentions the media.php file - do I have to change that too?

Sorry about all the dumb questions, I'm new to coding things inside WordPress, usually I just add custom CSS to change the appearance of things. This is all new to me.

We've added this thumbnails size (500x380), because the default wordpress thumbnails were not optimal. You may use bigger image size.

WordPress generates thumbnails automatically, but if you add new image size, it will be used only for new images, so if you want also existing images in this new size, you have to regenerate thumbnails.

If you don't want to add this modifications, try to edit template.portfolio.php file and change this line:

Code: Select all

$thumb = wp_get_attachment_image_src( get_post_thumbnail_id(), apply_filters('writer_portfolio_thumb_size','portfolio-thumb'));

into:

Code: Select all

$thumb = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large');

and check the effect - your images should be replaced to default large thumbnails (640px x 640px)

Thanks Piotr - I appreciate your help...it's beginning to make sense now!