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.

Comments on this post

  1. Alan Levine (@cogdog) said on August 4, 2017 at 11:08 am

    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?

    • Tom Woodward said on August 4, 2017 at 11:16 am

      That’s been my experience so far. Really, really useful for me.

    • Keegan said on August 7, 2017 at 2:42 pm

      Alan, is this what you’re using to do the random image on http://virtuallyconnecting.org? Pretty slick by the way.

      • Tom Woodward said on August 7, 2017 at 5:55 pm

        What!? Alan is now getting comments on my blog! How is this fair?

        • Keegan said on August 7, 2017 at 6:38 pm

          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. 🙂

      • Alan Levine (@cogdog) said on August 7, 2017 at 6:18 pm

        Heck no, not anything that geeky. That’s just using the header image feature in the WP customizer. Add multiple ones and use the button at the bottom. There’s like 20+ in the mix.

        What I was talking about was keeping the icons uniform on the assignment bank sites, e.g. http://udg.theagoraonline.net/bank/

      • Alan Levine (@cogdog) said on August 7, 2017 at 6:22 pm

        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

        • Keegan said on August 7, 2017 at 6:42 pm

          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. 😉

Leave a Reply

Trackbacks and Pingbacks on this post

No trackbacks.

TrackBack URL