List View Image Size and Cropping
-
I have my site set to the list view rather than the grid. Right now I’m having a couple issues, both pertaining to the image size and how the thumbnails crop the images.
The featured images showing up in the list of posts are square. I’d rather it be a ratio like 4:3 or 16:9. Is there a way to adjust the ratio of the image? I tried changing the standard thumbnail sizes, but I’m not sure I did it correctly. I created a functions.php file in my child theme and added the add_image_size code there. Is this how/where I would do this? I know the parent theme doesn’t have an actual functions.php file, but a file in a Functions folder titled “init-core.php”. Was I supposed to create a folder/file like that in the child theme and then edit it?
Also, images are being cropped in an odd way that cuts off portions of my images. Is there a way to specify an image size or aspect ratio and have the thumbnail fit/fill that space rather than cropping the image? Prior to this, I was using the Twenty Fourteen theme and as long as I used a very large image, it would be shrunk to fit and fill the space needed for the Featured Image, but it was never cropped. I’d like to do something similar to that if possible.
Hopefully all of that makes sense and maybe someone can steer me in the right direction. Thanks in advance!
-
Hi AZBros. Adding the new image size in functions.php is the right approach. Here’s a general reference for using the function:
https://developer.wordpress.org/reference/functions/add_image_size/
That function will only apply to new images. To create thumbnails from existing images you could run this plugin:
https://wordpress.org/plugins/regenerate-thumbnails/Image sizing and cropping are entire topics in and of themselves. I’ve put together a list of references that I’ve shared in the past. The rist group is all previous posts; the others are articles. Lots of info; let me know if you don’t find what you need:
Image sizes
https://wordpress.org/support/topic/thumbnail-placeholder-resize
https://wordpress.org/support/topic/changing-size-of-thumbnails-on-home-page
https://wordpress.org/support/topic/thumbnails-on-galleries-are-in-different-sizes
http://stackoverflow.com/questions/15685666/changing-image-sizes-proportionally-using-css
https://wordpress.org/support/topic/i-beg-anyone-for-help-with-feature-post-image-dimension
https://wordpress.org/support/topic/featured-images-not-properly-scaled
https://wordpress.org/support/topic/resizing-thumbnail-sizes-to-smaller-using-child-theme
https://wordpress.org/support/topic/post-thumbnails-20
https://wordpress.org/support/topic/serve-scaled-images-optimization
https://wordpress.org/support/topic/?replies=11\
https://wordpress.org/support/topic/featured-image-resize-4How to crop/size images
http://havecamerawilltravel.com/photographer/wordpress-thumbnail-crop
http://havecamerawilltravel.com/photographer/wordpress-resize-thumbnails
http://www.davidtan.org/wordpress-hard-crop-vs-soft-crop-difference-comparison-example/
http://www.wpexplorer.com/wordpress-image-crop-sizes/
http://www.wpbeginner.com/wp-tutorials/how-to-create-additional-image-sizes-in-wordpress/Cropping images
https://wordpress.org/plugins/manual-image-crop/
https://wordpress.org/plugins/post-thumbnail-editor/Responsive Images
http://blog.cloudfour.com/responsive-images-101-definitions/Hi bdbrown,
Thanks for the links, lots of good information. Right now, I’m still stuck changing the default image sizes. I copied the code below into my child theme’s functions.php file and changed the image sizes to what I want them to be.function alx_setup() { // Enable title tag add_theme_support( 'title-tag' ); // Enable automatic feed links add_theme_support( 'automatic-feed-links' ); // Enable featured image add_theme_support( 'post-thumbnails' ); // Enable post format support add_theme_support( 'post-formats', array( 'audio', 'aside', 'chat', 'gallery', 'image', 'link', 'quote', 'status', 'video' ) ); // Declare WooCommerce support add_theme_support( 'woocommerce' ); // Thumbnail sizes add_image_size( 'thumb-small', 160, 160, true ); add_image_size( 'thumb-standard', 320, 320, true ); add_image_size( 'thumb-medium', 520, 245, true ); add_image_size( 'thumb-large', 720, 340, true ); // Custom menu areas register_nav_menus( array( 'topbar' => 'Topbar', 'header' => 'Header', 'footer' => 'Footer', ) ); }I then regenerated all the thumbnails on the site, but after the plugin ran, I checked and all images are still their original sizes. I’m really confused why changing the above code in my functions.php file isn’t changing it on my site.
Is there something else I need to do or some other piece of code that needs to be adjusted? I’m guessing it’s something simple that I’m overlooking, but right now I’m really stumped.
One thing is the function name has changed. It’s now hu_setup() instead of alx_setup(). And the sizes above are the default sizes. You mentioned you changed them so I’m guessing the code above is before those changes. I think if you rename the function it should work.
That did it! I knew it was going to be something simple. I could have sworn I had cross checked it with the original file, but that part I somehow missed.
I honestly can’t say this enough, but thank you so much for your help, I really appreciate it.
The topic ‘List View Image Size and Cropping’ is closed to new replies.
