Outboard Memory – Query Thumbnails & Crop Images CSS Trick

Two little tricks that came up this week . . .

Random Posts Must Have Featured Image Set

Sometimes you want to query a random set of posts but only return those with featured images . . . you can using ‘meta_key’ => ‘_thumbnail_id’ like so . . .

<?php 
	          	$args = array( 
	          		'post_type' => 'project', 
	          		'posts_per_page' => 3, 
	          		'orderby' => 'rand', 
	          		'meta_key' => '_thumbnail_id',
	          		);
	          	$the_query = new WP_Query( $args );

Handy. At least for me.

object-fit: cover;

Now that I’ve got featured images, I usually have a variety of aspect ratios making uniform layouts a pain.

Often I’d have set those images as background images to deal with different aspect ratios and do a cover. Something like this. I was never a big fan of this method as I don’t like creating inline css and that’s the only way I could think to do it with dynamically created content in php or javascript. If just felt awkward.

Enter object-fit and if you already knew of it I don’t know why you didn’t tell me. You can see the difference it makes in the two examples embedded below. Not earth shattering but really handy for stuff I do all the time.

See the Pen GvNdjv by Tom (@twwoodward) on CodePen.

8 thoughts on “Outboard Memory – Query Thumbnails & Crop Images CSS Trick

  1. This is gold; I’ve always flailed with getting equivalent sized thumbnails and crops with overflow:hidden and absolute positioning inside relative positioned containers. This is much cleaner.

    Are they all then more or less center cropped?

        1. XD <3 you Tom!

          It was because I saw one of Alan's tweets earlier in the day and then saw this post. So, making this connection in reverse of what normally happens for me. Just be glad your blog is accessible enough that people feel comfortable holding conversations in your web-brain-space. 🙂

      1. Hey. Tom made his blog eat my comment. Pffft.

        No Keegan, nothing that fancy on VC site. I have some custom CSS to change the blog header image, but the randomness as just using the WP customizer option to pull from multiple images.

        http://cogdogblog.com/2015/10/refining-the-virtually-connecting-site/

        I was talking about duct tape CSS I did on the DS106 Assignment Bank theme, like
        http://udg.theagoraonline.net/bank/

        I will have to give them a Woodward upgrade

        1. Alright cool cool.

          I was just curious cause I saw this post and your tweet about VC on the same day and wouldn’t put it past you to play with then implement in a few days. 😉

Comments are closed.