In this post I will try to explain, how I have made a fallback, making it sort of OK for my users to forget about the thumbnail.

A little history

Once upon a time, before version 2.9, WordPress did not support post thumbnails. But there were work arounds. One of the best, I ever found, was from a website called wp-fun.co.uk. Sadly, the site is gone today, but I managed to dig up the old post ‘Easy Peasy Images Suggestion Roundup’ by Andrew Rickmann on Archive.org.

Andrew wrote a nice little PHP class to include in your functions file, which gets the first thumbnail image attachment from WordPress posts. Luckily, I also managed to dig that one up on Archive.org. Go grab it here: post_imagephp.txt (remember to rename .txt to .php, before including it in your functions.php file).

“So why are You telling me about antiques like this?”, You ask. Because we can use it with advantage in our fallback for people, who forget to click the little ‘set as post thumbnail’ link.

That way, a thumbnail will still be displayed with the post, as long as the editor has just attached an image. If there are no images attached at all, we can always display a default thumbnail.

The fallback

Let’s take a peek at the code. Put the following where you would normally use the_post_thumbnail().

<?php
// First of all, check if there are any image attachments at all.
$imgargs = array(
'order' => 'ASC',
'post_type' => 'attachment',
'post_parent' => $post->ID,
'post_mime_type' => 'image',
'post_status' => null,
'numberposts' => -1,
);
$attachments = get_posts($imgargs);
// Next, check if there is a manually chosen thumbnail.
if ( has_post_thumbnail() ) {
the_post_thumbnail('thumbnail');
}
// If there are no manually chosen thumbnails, check if there is an image attachment.
elseif ( $attachments ) {
// If there is an image attachment, call Andrew Rickmanns the_image function to get the thumbnail
the_image('thumbnail','attachment-thumbnail wp-post-image',false,false,true);
} else {
// If there are no attachments at all, display a default thumbnail.
?><img class="attachment-thumbnail wp-post-image" alt="" src="<?php bloginfo('stylesheet_directory'); ?>/the/path/to/your/image.jpg" />
<?php }?>

Requirements:

Remember to include this file, renamed to .php, in your functions.php: post_imagephp.txt

Icon fonts are vector based graphics and are able to scale indefinitely without losing quality, as opposed to the more well known and common pixel based icons. But icon fonts are also tied to characters and this is where the challenges come in, when we want them displayed correctly without making too much trouble in screen readers or screen scrapers.

I have been collecting a few resources on the topic.

Using Icon Fonts
Besides being a service, that offers a nice collection of scalable icons, Pictos also has a great article on the pros and cons of icon fonts and how to use them.

Icon Fonts are Awesome
Chris Coyier of CSS-tricks.com has put together a nifty example, where he demonstrates how easy it is to scale, colorize and shape the shadow of icon fonts with plain and simple CSS.

How to make your own icon webfont
Over at Webdesigner Depot, Heydon Pickering has written a tutorial on what makes a good icon and how to turn it into a webfont.

Icon Fonts
Finally, if you are not yet ready to make your own icon font, Font Squirrel has a small collection of free icon fonts, also available as @font-face kits. Go grab ‘em and try them out.

I recently launched Krimimessen.dk where I have used a small polyfill script written by Scott Jehl, respond.js, to make the site’s responsiveness work in older versions of Internet Explorer.

But then one of my colleagues made me aware of a bug that seemed to trigger when clicking on links in Internet Explorer 8. Not in everybody’s Internet Explorer 8, oh no. Only in Internet Explorer 8 on certain machines. Well, who said it should be easy to test for bugs?

Instead of going to the desired destination, the browser went to a URL with this pattern:
res://ieframe.dll/acr_error.htm#the-url-without-http

I have done a little searching on the issue, and generally people say the problem goes away if you delete the browser cache or disable browser extensions. However, that solves no problem, because I can’t ask my users to delete their cache.

Then I stumbled upon someone in the Drupal.org forum who had had the same issue and one of the proposed fixes was to move respond.js to the footer.

And there you go. It seemed to work. At least the bug disappeared.

But according to the Respond usage instructions, the script ought to be loaded as quickly after the CSS file as possible to avoid glimpses of “unresponsiveness” in ie.

So now I wonder if this is a bug in ie8 bug can be fixed within respond.js? Or is it something else, that triggers the bug? Or am I just using respond.js wrong?

Until now. Because Nick La from Web Designer Wall has a nice little trick up his sleeve, which involves wrapping the image in an HTML element and making an overlay for styling with a CSS pseudo-selector.

Go check out Nick’s tutorial here

The reason? The math is so much easier to do, when transforming the grid from pixels to percent in responsive web design.

It is such a simple and obvious approach, I’m almost embarrased, I haven’t thought of it before.

Elliot Jay Stocks: A better Photoshop grid for responsive web design

I have just launched a re-design of Krimimessen.dk. Krimimessen is the biggest festival about crime literature and criminal fiction in Denmark. A festival which is arranged by Horsens Public Library, where I work. The site is designed so it resizes to fit the screen it is being viewed on, also known as responsive web design.

This is the first responsive site, I have created. It is built in WordPress on a base of the awesome HTML5 Boilerplate framework, which makes it easier to build a modern web site from scratch.

I learned a lot from reading Ethan Marcotte’s “Responsive Web Design” prior to this project. Marcotte’s “target ÷ context = result” technique, a way to calculate dimensions from pixels into percent, was an invaluable tool in the process. In fact, and very unusual indeed, it wasn’t even necessary to test a lot in Internet Explorer.

But recently I started using Skitch. It’s a great little app for stuff like taking screen shots, sketching ideas and sharing the whole lot. It easily solves the problem of managing screen shots. Just open Skitch, drag the screen snap tool across the part of the screen, you want to save, upload and tag it. And there you go, a blog with screen shots, easily managed with notes and tags for findability.

Check out my Skitch blog here.

The Flexible Widgets plugin lets you display a widget on any category or page you wish. When setting up the widget, you are able to select the categories and/or pages where you want to display the widget. If none are selected, the widget will be displayed globally on your site, exactly like a default WordPress widget.

The plugin comes in handy if you need your sidebar content to change contextually from page to page in relation to your main content. It is especially useful if you want to use WordPress as a CMS.

Flexible Widgets will replace the default WordPress widgets.

Sreenshot

Selecting categories and pages in each widget’s back end.

Installation

1. Upload the flexible-widgets folder to the /wp-content/plugins/ directory
2. Activate the plugin through the ‘Plugins’ menu in WordPress

or search for “Flexible Widgets” in the “Add new” section of the plugins menu in your WordPress admin interface and hit “Install now”.

Change log

0.3

• Fixes an issue: Optionally display widgets on the home page, whether it is set up to be a static page or the blog posts page.

0.2

• Tiny update to get the plugin and author URIs right.
• Update on the installation info.

0.1

• Brand new plugin. Still playing with the bubble wrap.

Known issues

May conflict with themes or plugins which include custom widgets.

Please see the plugin support forum.

Additional information

The Flexible Widgets plugin consists of a bunch of ideas and lines of code, I wrote for the WordPress theme in use at the website of Horsens Public Library.

This is my first plugin for WordPress. I am sure, there is room for improvement. The code is far from perfect as my programming skills are somewhat limited. But I do think the idea is quite good, so if you can write lean code and are desperately in need of a small side project, you should be very welcome to help me out.

If you have any questions or comments, feel free to leave a reply.

Jeg fandt det ved at skrive listen over mulige variable i query_vars ud med følgende stump kode:
<?php print_r($wp_query->query_vars); ?>

… og fandt, at den variabel, jeg havde brug for, hed tag_id.

Særdeles anvendeligt, når man har brug for overblik over tilgængelige variable.

Et lille eksempel:

Smæk dette link ind i head sektionen i dit HTML dokument.

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

Så er du klar til at bruge Lobster i din css som enhver anden font.

Det skulle efter sigende fungere helt tilbage til IE6. Skulle man endelig være negativ, kunne man sige at udvalget af skrifttyper stadig er ret begrænset, men mon ikke, der med tiden bliver lavet om på det?

Via Nettuts.