Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Boris Kamp
Boris Kamp
16,660 Points

Force images to be square for grid system

Hi people!

Im creating a tiled archive page in wordpress (working with bootstrap framework) and was wondering how I can force the thumbnails (tiles) to be square at all time. Everything is responsive so it has to scale down. So the image's height needs to be the same as the image's width, as the width is decided by the grid layout, and thus the same for every image. I know I can fix this by uploading square images only in a custom field and use that field as the src in the loop, but i intend on users uploading stuff as well and don't want them to mess up the grid if they select a non-square image.

Is this achievable? Thanks!

1 Answer

Nicholas Read
Nicholas Read
2,958 Points

Sounds like you need an image manipulation tool to crop and scale your images. You don't want your pictures to be squashed or stretched if they're not the right size so you're going to have to do some cropping unless you force users to upload square images. I'm not very familiar with wordpress but a google search provided the following resources which look useful for your situation.

http://premium.wpmudev.org/blog/how-to-get-perfect-blog-images-every-time-with-auto-scale-and-crop-for-wordpress/

http://wordpress.stackexchange.com/questions/124009/why-wordpress-automatic-cropping-all-my-images

Boris Kamp
Boris Kamp
16,660 Points

Thanks for your reply. However, I found the perfect plugin called "Advanced Custom Fields: Image Crop Add-on" Work great and forces users and my to crop to a given format.