WordPress Custom Fields, plus Compass/Sass tip: CSS inline images

WordPress Custom Fields, plus Compass/Sass tip: CSS inline images

Set out to learn something…and I did. Now its your turn

I wanted to create images that I could use for each post showing that it belonged to a certain type of category. You look at the image, and without reading the title, you would say “Oh, this post relates to WordPress.” Same with jQuery, Blogging in general, or whatever category I come up with. Something my readers would come to recognize over time. I also wanted to be able to do it without having to stick it in manually in the post like I do with the other images I stick in articles. If you are on the home page you will already see this. That is the one I came up with for articles relating to WordPress.

Now, I can’t take credit for what I am about to show you. I learned how to do this fromJustin Tadlock’s blog, but I wanted to spread the love. This was the best tutorial I found on the subject.

Just 10 Easy Steps!

Here is my quick and dirty paraphrasing of it. Meaning, do EXACTLY AS IT SAYS BELOW.


1) Create awesome post.
2) Scroll down in post editor, under Custom Fields, create a Key named “Thumbnail.”
3) The Value should be the url to the image: (Example: wp-content/themes/yourThemeName/images/imageName.jpg)

NOTE: It took me a while to understand where it was pulling the images from – images folder in your theme. I was trying to get it to load from somewhere outside the theme. I’m sure you can, but this was easier.

4) Click Add Custom Field. Ya! Part 1 is done.
5) Add another, by clicking Enter New. This time make the Key be Thumbnail Class
6) Make the Value thumbnail-class
7) Open the template you want the image to show on (index.php, single.php, category.php, archive.php, etc.)
8- Find this code:

if(have_posts()) : while(have_posts()) : the_post();

Post the following code directly AFTER it:

$thumb = get_post_meta($post->ID, 'Thumbnail', $single = true);
$thumb_class = get_post_meta($post->ID, 'Thumbnail Class', $single = true);
$thumb_alt = get_post_meta($post->ID, 'Thumbnail Alt', $single = true);

9) Find this code:

<?php the_content();  ?>
//OR THIS CODE, EITHER ONE
<?php the_excerpt();  ?>

And add this code BEFORE it:

<?php // if there's a thumbnail
if($thumb !== '') { ?>
	<img src="<?php echo $thumb; ?>"
	class="<?php if($thumb_class !== '') { echo $thumb_class; } else { echo "left"; } ?>"
	alt="<?php if($thumb_alt !== '') { echo $thumb_alt; } else { echo the_title(); } ?>"
	/>
<?php } // end if statement
// if there's not a thumbnail
else { echo ''; } ?>

NOTE ADDED 7/30/10: If you read this post previously, I wrote a note here originally that was pretty much me being stupid.

10) Open your CSS file and add this class:

.thumbnail-class {
	float: left;
	width: 100px;
	height: 100px;
	margin: 0 15px 0 0;
	}

Done. Of course, you still have to create the images though. Note the size of the image is actually controlled through the CSS. Meaning, even if the image you created is 300 by 300, whatever you put in the css is what it will display at. You can also call the class, and Key names whatever you wish, just be sure to change them in the php code as well.

For a more detailed explanation, you will want to read the article I linked to above. I searched for quite a while before I found his tutorial and it rocks. I just had to read more to accomplish it. He also gives hints on what else you can do with it. Very good read though.

Compass’ inline image function

I am not recommending you do this, I am just showing you how. Let’s say you have a bunch of sprites, they are all small, and you don’t want the extra http requests on your website. Pretty understandable, which is why I use minify on my main site for the css and javascript files. Compass has a built in function that lets you actually embed an image into the CSS file. “Holy HELL! That’s insane!” That is what your head is screaming at the screen, right? That is what I said too when I saw it. I wish I could remember where, but I forgot to paste the url in my Evernote…just the code.

In your .sass file (yes Sass…I highly recommend it),you make a style like so:

.mySprite
  background-image: inline-image("images/mySprite.png") /* ! */
  height: 35px
  width: 35px

Compass then embeds the image into the CSS file. You can obviously think ahead on why this could be bad if you do this a lot. You are adding weight to the actual CSS file. Which of course this is why you would only do it with some small file size sprites. I can see this being good for small sites, but probably not anything of substantial size. Just use your head before you actually use this.

NOTE ABOUT THIS TRICK: IE6 and 7 do NOT support this. You will have to include the style the normal way for those browsers, if you are supporting them.

Last thoughts

Hope you learned something! I know I did today, which is what I strive for every day. If you are using Custom Fields for WordPress, I would love to know about how you are using them, and the code for doing it! Share the love people!

Coupon Code: webmachine

jQuery junkBox

.after();
This method inserts the specified content after each matched element. Below adds a paragraph tag with text after any element with the class ‘myClass’ on it.

$('.myClass').after('<p>Even more content to read!</p>');

Tags: , ,

Leave a Reply