You could simply remove that field from the comment form. But I like to keep it as I can easily spot incoming spam simply by looking at that URL while going over the comments in the site admin. Some people will actually take the time to write some false comment in hopes of getting approved and then sneak in a URL to Viagra or something like that. So keeping the website field helps me pick out those fake comments.

But I don’t want the URL to show up in the comment, only on the admin side. So to do that you simply edit 1 file in the wp-includes directory.

1. Look for the file called “comment-template.php”
2. Locate the bit of code that looks like this: (highlighted in yellow)

Now change that to look like this: (I recommend simply commenting out the parts that you’ve removed in case you want to put it back - outlined in red)

That’s it. Now when a user adds a website it won’t show up in the comment, but it will show up in your admin.

Chef Tammy Wong is a local food celebrity here in Minneapolis. Aside from running her restaurant Rainbow, she gives cooking demonstrations, hosts events and is commissioned to prepare private meals for all sorts of well known folk.

Some time ago she came to me looking for signage for her demonstrations. We decided it was time to make an icon, for this icon. And so what you see above it what we came up with. It’s a good representation of her personality and fun loving spirit.

You can see it in action on her website. Take a look and you’ll probably stumble upon some great recipes.

If you happen to be in Minneapolis you should visit her restaurant, Rainbow.

Here’s a new logo/doodle that I developed for a snow plowing company in Minneapolis. Don’t ask where the name came from. They’ll be spreading their signs and cards around in the next couple of weeks.

Pictured above are the logo and the business card front/back.

A fellow webling asked me how I got the default excerpts to display images on my site. So after explaining it, I thought maybe someone else out there might be looking to do the same thing. Here’s how to do it:

Most CMS systems or blogs have an automatic setting to shorten your posts down to a character/word limit in order to show them as an excerpt. These systems usually strip out any html tags within the post. There is actually a good reason for this.

BE CAREFUL
You don’t want any tag(s) to be orphaned as the excerpt is trimmed down. You will end up with formatting errors in your page(s) if you have an unclosed <div> or <a> tag, or an <img> tag that gets chopped in half. This is because it actually counts the bits of code in the tag as words - taking away from the character/word limit.

But, keeping the above in mind, what if you want an image to show up for each excerpt, as I have on this site? Well, here’s one way to accomplish this. You will have to do some CSS styling to get the image to look/work the way you want it. We can go over that after we get the image to show up.

There are most likely plug-ins that will get you the same effect, but I found this approach to be the simplest solution.

Wordpress:

Find the file on your server here: wp-includes>formatting.php

Then locate this bit of code:

function wp_trim_excerpt($text) {
	if ( '' == $text ) {
		$text = get_the_content('');

		$text = strip_shortcodes( $text );

		$text = apply_filters('the_content', $text);
		$text = str_replace(']]>', ']]>', $text);
		$text = strip_tags($text);
		$excerpt_length = apply_filters('excerpt_length', 55);
		$words = explode(' ', $text, $excerpt_length + 1);
		if (count($words) > $excerpt_length) {
			array_pop($words);
			array_push($words, '[...]');
			$text = implode(' ', $words);
		}
	}
	return $text;
}

The next step tells the function which html tags ARE allowed within the excerpt. We ONLY want to allow the <img> tag.

You allow it to show images by changing it to this:

function wp_trim_excerpt($text) {
	if ( '' == $text ) {
		$text = get_the_content('');

		$text = strip_shortcodes( $text );

		$text = apply_filters('the_content', $text);
		$text = str_replace(']]>', ']]>', $text);
		$text = strip_tags($text,'<img>');
		$excerpt_length = apply_filters('excerpt_length', 55);
		$words = explode(' ', $text, $excerpt_length + 1);
		if (count($words) > $excerpt_length) {
			array_pop($words);
			array_push($words, '[...]');
			$text = implode(' ', $words);
		}
	}
	return $text;
}

That’s it. If you have an image tag that begins and ends within the first 55 words, it will show up in your excerpt. You can change the number of words by changing the number “55″ above.

This only works if the image is at the beginning of your post.

CMSMS - CMS Made Simple

There is a plug in for CMSMS called “Blogs Made Simple.” It’s pretty flexible in its layout and styling. It also has an auto excerpts setting. (My only hang up with this system is its lack of search support.)

Find this file on your server: modules>Blogs>action.showblog.php

 $onerow->morelink=$this->CreateLink($id, 'showentry', $returnid, $moretext,
				   array('entryid'=>$dbentry["id"]), '', false, false, '', false, $prettyurl);

    $onerow->shorttext=strip_tags($this->TruncateText($entry["text"],$shortlength))." ".$onerow->morelink;
    $onerow->truncatedtext=strip_tags($this->TruncateText($entry["text"],$shortlength));
    $onerow->text =$entry["text"];
    $time=$entry["createtime"];

Change it to this:

 $onerow->morelink=$this->CreateLink($id, 'showentry', $returnid, $moretext,
				   array('entryid'=>$dbentry["id"]), '', false, false, '', false, $prettyurl);

    $onerow->shorttext=strip_tags($this->TruncateText($entry["text"],$shortlength),'<img>')." ".$onerow->morelink;
    $onerow->truncatedtext=strip_tags($this->TruncateText($entry["text"],$shortlength),'<img>');
    $onerow->text =$entry["text"];
    $time=$entry["createtime"];

That’s it. You can change the number of words in the module admin area.

This only works if the image is at the beginning of your post.

Now What?

There are 2 different scenarios I use for this site.

1. I want to use the same image for the post and excerpt. It is most likely larger than the ideal size of the excerpt.

If you have a large image that will need to be scaled down to fit within your display of excerpts, you’ll need some CSS to scale it accordingly.

2. I want to have a unique image show up for the excerpt and NOT for the post.

Most systems have a separate template for the main page and single post pages. If you wrap the display of your posts in a <div> with a different id for each, you can style the image differently for each page type. My home page has a <div> with the id of “mainCol”. The actual story page has the same <div> with the id of “mainColLvl2.” This is enough for me to be able to either scale the image for one or the other, or make it visible or hidden.

I wrap the image in a <p> tag while writing the post. Remember, the <p> tag will be stripped away for the excerpt. If I only want the image to show on the excerpt, I add the class “blogExcerptImg.” My CSS says that anything with that class is not displayed on secondary pages.

HTML

<p class="blogExcerptImg">
     <img src="pathtoyourimage" />
</p>

CSS

mainColLvl2 .blogExcerptImg{
     display:none;
}

I have CSS for the main page that tells the image to be a width of 200px, and a height of “auto.” This keeps the image to the width I want, and also scales it proportionally for its height. The html is simplified below to show the ids that wrap it.

HTML

<div id="mainCol">
     <div class="entry">
          <img src="yourimagepath" />

CSS
This gives the image its border, scales it to 200px, aligns it to the left of my text, etc.

#mainCol .entry img {
	border:1px solid #333333;
	display:inline !important;
	float:left;
	height:auto;
	margin-right:10px;
	padding:1px;
	width:200px;
}

India is full of amazing colors and textures. Almost every surface you see offers its own canvas. I constantly cursed myself when I would venture out without the camera. But I managed to collect a few good samples. I have put a them up in my media gallery for you to enjoy.

It’s a useful design techniques to make Photoshop brushes from textures like these to create interesting effects in your work.

Feel free to use them for any non-commercial purpose.

Click here to go to the Media Gallery.

We recently took a work/tourism trip to India. And although I could ramble on and on about it, let me simply say that it was very cool. The only way to describe the experience is to have been there. But, we took a lot of photos, in fact too many. You can take a look at an assortment from our time with some friends here.

I’ve been there before and will most likely go back many times if I can. I’m not a spaced out hippie or anything, so I won’t tell you that I “found” myself, had some kind of yoga experience or any other cliche “westerner goes east” type spiritual enlightenment. But I did learn a lot about the people, culture and places. And I enjoyed all 3.

C-moto is designing and developing an eco-tourism site for the city of Varanasi. We went on tours, took photos and talked to locals along the way. The tours help provide context to the city for tourists as they maneuver through the alleys, along paths full of temples, bizzars and cultural diversity. There’s nothing like having a guide that really knows the ins and outs of a place.

We’re hoping to have the site up in the next couple of months.

Here are some works I created a couple of years ago. Ink, powder and pencil on canvas. Each one named “Things with Wings++” (coders might get that ++ bit).

You can view them in the Media Gallery here.

How many years ago did IE 6 come out now? Oh, I don’t even know. Web years are like dog years. So let’s say 56 years ago. That’s what is seems like. So no wonder it feels strange to continue to code for IE 6 - 56 years after it came out.

I don’t ask my local motorcycle shop why they aren’t compatible with my 1962 Lambretta. Oh I could try to tell them that my Lambretta is more secure or that it just “works for me”. But they won’t care. They’ll laugh and look on nostalgically as I putter out of site. Leaving huge puffs of white smoke that signal my hip exhibition of love for the retro life. O.K. I admit that an old scooter is much more useful than an old browser, but you get my point.

So fear not ye old time web scooters, er, well… more like Larks. I shall still support your ancient religion of IE 6. It might no look exactly the same. But how will you even know? That would mean that you are viewing the site on 2 different browsers, one old and unwise to the ways of the modern CSS, and one new and capable of these aesthetic formations. Why would you do that? Use a modern browser and an old one? Well, you wouldn’t. Neither would most anyone else, save for those of us that toil in this trade.

Here’s what we can do:

Serve you a unique set of CSS that will make the site look acceptable. It won’t have all the good looks of the modern browsers, but you won’t know. How could you?

And it will look like this:

<!--[if lt IE 7]>

<link href="style/ie6isGreat.css" rel="stylesheet" type="text/css" />

<![endif]-->

Then we’ll hide all the PNG files and unsupported CSS from you and replace them with GIFs or something. Yes we could use some javascript to force you to see those PNGs. But, like I said, I’m not sure it’s worth it.

So please understand, if your vehicle is 56 years old, the road might not look the same but I’ll make sure that it will eventually get you to the same place.

Here’s a CSS only way to add an overlay caption on top of an image. There are of course javascript alternatives that require less HTML markup. These use the “title” tag as the caption. This post is simply an alternative for those who don’t want to mess around with javascript.

The transparency may not work in IE 6.

First the structure:

<div class="ImgCaptMain">
     <img border="0" alt="Some Image" src="images/current_chadcarr.jpg"/><br />
     <div class="ImgCaptDescBox">
         <div class="ImgCaptDescBg">
               <div class="ImgCaptDesc">
           	New York - Late 2008.
               </div>
         </div>
    </div></div>

Create a tree of 4 <div> tags. (<div> inside of a <div> inside of a <div> inside of a <div>)

1. The first <div> doesn’t really have to do much other than give itself a position of relative.
2. Then you place your <img> tag.
3. The second <div> tag will contain the caption description and the transparent background

Here is the CSS:

.ImgCaptMain{
	/* only need a width if it's not inheriting one
 	width:; */
	position:relative;
}

.ImgCaptDescBox{
	position:absolute;
	bottom:0;
	left:0;
	/* since it's positioned absolutely it will need a width, but not height,
       that would fill the entire box covering the image */
	width:100%;
}

.ImgCaptDescBg{
	background:#333333;
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}

.ImgCaptDesc{
	padding:5px;
	color:#fff;
	font-weight:normal;
	font-size:.785em;
	text-align:left;
}

The code above set’s the caption at the bottom as in figures A and B above. If you want the caption at the top of your image as in figures C and D, just change 1 simple piece of CSS. In the ImgCaptDescBox class, change bottom:0; to top:0; like below:

.ImgCaptDescBox{
	position:absolute;
	bottom:0;
	top:0;
	left:0;
	width:100%;
}

That’s it.

Here’s a working example:

New York - Late 2008.

You could also add the “float:” property to the “ImgCaptMain” <div> if you want to align the image with text or other elements.