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

Simple Interview Formatting Using Pseudo Elements

I had a quick question today about formatting an interview. That led to some quick experimentation in Code Pen and some simple uses of pseudo class selectors.1 When I first looked at the transcript I started to assign a class to each paragraph. That would work but was tedious. Given we were switching speakers at every paragraph I could be clever/lazy. nth-of-type will let me select odd and even elements. You can also be far fancier (every 5th etc.) but even/odd was all I needed. Given how pleasant that was, I figured I’d try a few more. This CSS lets me grab the first letter (and the colon) of the paragraphs and make them a bit like a drop cap.2 I wondered if I could use the selectors in combination to alternately style the first letters drop caps. Turns out you can. Anyway a fun 10 minutes or so that might be of interest to other wanderers out there. See the Pen demo for clare – fancy version by Tom (@twwoodward) on CodePen. 1 Disregard my neapolitan-ice-cream-inspired color scheme. 2 I had to look up the word for ‘big letters in medieval manuscripts’ and didn’t actually read/follow the tips for drop caps at the URL linked here . . .

Simple Text Analysis POC

See the Pen text analysis color viz – step 1 by Tom (@twwoodward) on CodePen. Assuming you have sentences, phrases, or words you’d like to categorize . . . you could do something like this to create a visualization. This one is using CSS but it could be done in any basic word processing software. Setting levels of opacity would allow for multiple-overlapping categorizations. See the Pen text analysis color viz – step 2 by Tom (@twwoodward) on CodePen. Playing with font size and the rotation of the paragraph also opens up some doors . . . as does doing different rotations at the sentence level depending on the categorization of the sentence. You could get even more granular with stuff like that using data attributes and CSS. See the Pen text analysis color viz – step 4 by Tom (@twwoodward) on CodePen. A Bit Odder See the Pen text analysis color viz – step 5 by Tom (@twwoodward) on CodePen.

Instagram-ish WordPress Filter Shortcode Plugin

That beautiful link-bait title and a picture of a dead leaf! That’s why I’m a social media guru. With that self-promotion out of the way . . . I found this CSS library from Una.1 It lets you apply instagram-like filters to image via CSS. Also got to have a nice interaction with Una via Twitter to clarify the license. @twoodwar :+1: its MIT so go ahead — Una Kravets (@Una) December 6, 2016 It fit a need that a professor was expressing for one of our WordPress installs so I wrapped it in a plugin/shortcode combination. The structure goes like so . . . [ cssgram img=”https://c2.staticflickr.com/6/5745/31413304786_48ab865a34_c.jpg” filter=”_1977″ ] Plain Image A Few Filtered Examples _1977 Inkwell Xpro2 1 Check out her site if you’re into developer stuff at all.


Beer Bubbles CSS

Another random conversation led to this experiment . . . it’s animated CSS which is pretty cool but I can’t take any credit for it. I found this example on Codepen and then mainly gutted it to make what you see below (also a minor experiment with flexbox). See the Pen CSS Animated Beer Pour (Forked from CSS Beaker Pen) by Tom (@twwoodward) on CodePen.

An Inventory of My Thoughts

I’m no Myron Helfgott, but I’ve made a few minor changes to my life which have been at least semi-interesting. It’s not about productivity. It’s more about eliminating distractions that have wormed their way into my head. These reflexive actions are scary because they eat into the way you think or in some cases if you think at all. Nothing magical here but it’s often worth looking at how things1 are impacting your life. The drive to work is now silent. No radio. No podcasts. I just let my brain wander. It’s fun. The ride home is much noisier. On my phone I turned off all the notifications for email, Twitter, and Flickr. The only one that remains is for texts. It has surprised me how much happier I am not to see that envelope with the red badge letting me know how many emails I’ve yet to read. I can still do whatever I need should something important arise but I’ve cut the visual cue out of the equation. That has cut down on reflexive checking. Flickr and Twitter were never that busy but neither was important enough to require an instant alert. This has been done by many people, many times but I’m leaving my email program closed 95% of the day. It’s been depressing to see how […]


The Web is Plastic

Twitter really needs to seriously rethink the *mandatory* & unalterable displaying of images in one's timeline on http://t.co/kklAvPC4K8 — Digital Maverick (@digitalmaverick) July 20, 2014 I saw the post above this morning and thought to myself that this is a problem I can solve. You can still bend and shape it to your desires, even if it’s not technically yours. There are lots of ways to deal with this issue but I figured I would look at removing the image preview entirely using CSS. Turns out there is a Chrome Stylebot extension that lets you set custom CSS styles for particular sites and it is dead simple to use even if you don’t know CSS. Embedded below is an under one minute example of how to use Stylebot to deal with the image preview issue.

Electable? – Freedom Through Randomization

Try the POC here. Talking to Britt and John “Aughie” Aughenbaugh (who will be teaching an intro to government course online this summer), Aughie mentioned a conversation he had with some students about whether Chris Christie could be a legitimate contender for president after all the recent bridge drama. That led to some talk of other historical political drama and how things were slightly different back then. It led to some wondering about how previous presidential candidates/winners might fare in today’s 24 hour news cycle (AKA the CNN Effect). The rough idea was to build a randomizer that would present three randomized US presidents with three randomized traits/characteristics. Students would be able to argue whether a person with those traits would be electable. Clearly, I like randomization but it’s more than just the chaotic serendipitous aspect. I think it adds an element that makes it “safer” for students. It is random after all, there can’t be a specific answer the instructor wants because the question can’t be totally predicted. Plus, it takes work off the instructor and adds variety to the responses since everyone gets different prompts. I had this meeting Wednesday and wanted to get a semi-decent looking proof of concept built fairly quickly. I knew I wanted images of the presidents and figured I could re-use some of […]

Diigo Summary Posts CSS Modification

I haven’t found a better way to do the weekly summary posts than Diigo, so I spent five minutes messing with the CSS to make it look a little more like what I’d like. You can do this in WordPress from the WP Admin sidebar under Appearance>Edit CSS. .diigo-linkroll li { list-style-type: none; } .diigo-link a { background: #e6e6e6; font-size: 1.25em; padding: 2px; display: block; } .diigo-tags { display: none; } The first piece (.diigo-linkroll li) gets rid of the unordered list structure. The second portion (.diigo-link a) makes slightly larger text and puts a gray background behind the links- which essentially function like headers for the different articles referenced. The final piece (.diigo-tags) just makes the auto-included tags invisible. I may need to rethink this but it does clean up the post which looked far too messy for my tastes. You can see the side by side comparison below.