Isaac's cool blogI like cats. he/him
That last post sure looks pretty silly after the huge pile of snow that just fell on us. We ended up with about 20 inches with deeper drifts in places. We dug out our sidewalk and cars yesterday, but the street still hasn’t been cleared. Thanks to our fearless neighbors it’s all packed down though, slippery but passable.
Our little shared joke in the DC area in the winter is that whenever it snows the littlest bit the world is coming to an end. This season’s first earth-destroying event arrived a week or so ago, bringing us a nice layer of slushy snow that stuck around for a day or two.
We got a turkey a whole week before Thanksgiving for some reason, so I brined and roasted it as practice for doing it again at a friend’s house next week. It turns out even a 15 pound turkey has quite a bit of meat on it, so I’ve been making turkey dishes all week.
Turkey soup is really easy to make if you can manage to make some turkey stock after carving the bird. To make stock, just simmer the carcass in water a while. You can add things like peppercorns, allspice, onion, celery, carrot, etc. if you want to and are not completely burned out on cooking. I cool the stock a while then strain it into something for the fridge. You can remove the fat from the top the next day.
For the soup, soften some vegetables like onions, celery, cabbage, and so on in butter over medium-low heat. Add some chunks of turkey and some stock and simmer a little while. I serve it with grated cheese and homemade Worcestershire sauce.
Paul asked how to change the border around images. I’m not sure whether he wanted to know for flickpress or Photopress, but it doesn’t really matter. Photopress adds a custom CSS class to images it inserts, but most likely you’d want to change the appearance of all images in your posts, no matter which tool inserted them.
You’ll need to edit your theme’s style file, which you should be able to do as an admin at Appearance -> Editor. It should bring up the Stylesheet, but if not it’ll be in the list on the right side. You need to add something like this:
a img {
padding: 2px;
border: 2px solid #ccc;
}
a:hover img {
padding: 2px;
border: 2px solid #c33;
}
The “hover” part will make the border change on mouseover – if you don’t want that then leave it out. The “padding” part adds a gap between the image and the border. This only adds borders for linked images. If you want borders for all images, whether they’re linked or not, do something like this:
img {
padding: 2px;
border: 2px solid #ccc;
}
You probably just want this to affect images in posts, not the images in your header or sidebar. It depends on your theme, but most themes wrap each post in a “div” element with the class “post” – this will restrict the change to images in that class:
.post img {
padding: 2px;
border: 2px solid #ccc;
}
If in doubt, view the source of your site to see what you might be able to use – there’s often a “div” with the id “content” that wraps the whole content area.
If you want a specific preview image for your YouTube video, you’re pretty much out of luck. When you upload a video, YouTube chooses 3 frames from your video based on an algorithm that might or might not be random. There are tips around for trying to game their algorithm, but that might be a little unethical and it’s unreliable since they’ve changed the algorithm over time. I think at youtube.com they’re welcome to do whatever they want, but when I’m displaying an embedded video on my own site I should be able to present the video with my choice of preview image – they’re my users and if I want to Rickroll them I should be able to!
So, I found this idea for placing an image over an embedded video, but it failed with a JavaScript error. This answer at stackoverflow got the code working correctly.
The method uses two “div” containers, one containing the replacement preview image and one containing the video embed code. The video is hidden using inline CSS and a bit of JavaScript toggles the image hidden and the video visible when the image is clicked. The image should be the same size of the video and should probably have some sort of “play” symbol so users know to click it. Here’s the code for the containers:
<div onclick="thevid=document.getElementById('thevideo'); thevid.style.display='block'; this.style.display='none'"><img src="vidthumb.jpg" style="cursor:pointer" /></div><div id="thevideo" style="display:none">
(put the YouTube embed stuff here)
</div>
A nice addition would be some way to give users with JavaScript disabled a plain link to the video at YouTube.