Feature
Post

Category
Code

Enhance Search Results with Thumbnails

Take a look at most search results pages and what do you typically see: Each result has a title, a short excerpt, some metadata, and maybe a thumbnail image. The default search results from a Movable Type blog, though, will show the Body of each result. To me, this introduces some problems. First, each post could be quite long — much longer than one wants to read on a results page. And each result may or may not show any images, depending on whether the images are in the Body or the Extended section of the entry.

Fortunately, we can fix these problems, and at the same time learn a new way to pass variables to included modules.

In our Entry Summary template module, we want to modify the template where it outputs the entry body to match this:

<div class="asset-body">
	<mt:if name="show_thumbnail">
		<mt:entryassets type="image" limit="1">
			<img src="<mt:AssetThumbnailURL width="75" square="1" />" alt="<mt:assetlabel>" class="thumbnail" />
		</mt:entryassets>
		<$mt:EntryExcerpt$> 
	<mt:else>
		<mt:entrybody>
	</mt:if>
</div>

This is pretty simple: We test the show_thumbnail variable, and if it’s not empty we find the first asset in this post and display it as a thumbnail. Notice that when we display a thumbnail, we output the entry excerpt rather than the entry body. By default, the excerpt strips out HTML, so we don’t take a chance of the image displaying twice.

Our Search Results system template only needs a small change:

<$MTInclude module="Entry Summary" hide_counts="1" show_thumbnail="1"$>

The <MTInclude> tag passes any attributes it doesn’t recognize as variables in the included module. There are two benefits to this method. First, it’s a little shorter than typing a full <mt:setvar> tag for each variable. And, the variable is local — it’s only available inside that included module (and any modules it calls). You don’t have to worry about conflicts with other variables of the same name in the Search Results template.

With a little CSS, our search results can look something like this:

Screenshot of search results

Screenshot of search results

It’s a small addition to your search results, but it can help your visitors quickly scan the returned results and find content they are interested in.

Feature
Post

Category
Publishing

Things To Consider When Using WordPress as a CMS

WordPress is first and foremost a blogging platform, but that doesn’t mean that it can’t be used for other things as well. In fact, the development of WordPress have been such that I wouldn’t be surprised to see a non-blog focused fork soon, because the necessary functionality for most web sites on the admin side of things are already there. I know, because I’ve installed and used WordPress as a content management system (CMS) for several clients the last year or so, and have had no complains yet.

“You’re crazy! Get Joomla/Drupal/Textpattern/something else instead!”

I would consider doing that, actually, if it wasn’t a fact that I know WordPress, can bend it to my will, and know that any necessary functionality I’d like to add is a mere plugin away. The fact that I’m using WordPress as a CMS for clients doesn’t mean that I don’t think that the other options out there, including TextPattern which intrigues me, are poor choices. I just know WordPress, and I know it is easy to use (as opposed to, say, Joomla) for not so familiar clients. Add a solid support for “static” content, being the WordPress Pages, and more newsy update flows controlled by the Posts, and you’ve got your needs pretty much covered for most websites online today.

Things to Consider when Choosing WordPress as a CMS

There are especially 3 things you need to consider before committing to WordPress as a CMS, and starting to plan it, as far as I can tell.

  1. Is the functionality needed covered by the WordPress core functions, and/or with the addition of (not too many) plugins? This is usually managing information pages (using Pages), and publishing news/press releases (using Posts). If I need to add a lot of custom stuff, including the custom fields, then perhaps it gets too complicated for the client.
  2. Is there a good translation of WordPress available, so that your client can get the backend in their own language? Why should my Swedish customers not have their CMS in Swedish? There is no reason, of course, and it is easy enough to install a language pack.
  3. Will my client be able to upgrade WordPress themselves, or do I need to make plans for this as well? This is true for most platforms out there, but nevertheless you’ll need to have an upgrade strategy.

The real issues present themselves when you’ve chosen WordPress as the CMS for your client project. That’s when you’ll have to think a bit outside the box, or not really, but at least peek over the blog focus edge at least.

Designing for Web Sites Powered by WordPress

In general, using WordPress as the CMS just means that you’ll design a theme as you would for a WordPress powered blog. Most of the things you need to keep in mind is what should be powering what on the site. For example, a company presentation should of course be a Page in WordPress, that way the company can edit it easily as well. With the 2.5 and 2.6 versions, the WYSIWYG editor is actually quite good as well, so there is no harm in this at all. Basically, you’ll use Pages for static content, just as you would on a blog, with the difference that Pages are your core content on the site, rather than posts, which is the core of any blog. This means that you’ll have to consider the Page hierarchy and presentation, possibly providing Page templates to control the layout a bit.

The front page of the website is another thing. These days, you can set a Page as the front page by visiting the WordPress settings (as opposed to the hacks of yonder). This is probably necessary for most traditional websites, so you’ll want to do a Page template for this particular front page Page as well, and make sure that the minimal (if any) editing that can be made from the WordPress backend should be used with caution. Breaking a front page isn’t a good thing, you know, and chances are there’s more than just text and a few images to manage, so keep the advanced stuff out of the editable part, putting them in the Page template instead.

Finally, there’s the updates, usually being company news or press releases or something similar. This content can easily be managed by using the Posts in WordPress, assigning a category for news, press releases, or whatever. This way you can have a page on the site (incidentally a Page in WordPress as well) that displays the content, and then link people to the category, possibly controlling it a bit by tweaking the category template. You could even bypass the page listing the content mentioned above, and just link the categories from the menu.

The Fiction page's sub menu

The Fiction page's sub menu

Speaking of the menu, chances are you can forget about using the WordPress functions to display Pages or categories, since that would and could mean that your client can break the design by accidentally creating un-necessary Pages or categories. I usually just put these links in the theme, and if they want to add a main category they’ll just have to contact me to do an edit. I do, however, try to make sure that adding sub-pages (i.e. Pages belonging to other Pages) will result in decent linkage on the mother Page, much like I’ve done on my fiction page over at tdhedengren.com.

Another thing you need to think about is what user priviligies your client will need to have. Sure, someone at “their side” needs to have admin priviligies, but that is probably not the general one needed. You need to consider this as well, as it is probably you that will be setting it up, and you don’t want the client to break the settings accidentally.

Checklist for Creating Web Sites with WordPress as the CMS

These are the things I tend to think about before choosing and designing a website where WordPress will be used as the CMS. There’s probably other things as well, things I just haven’t take into account since my clients haven’t had that kind of need yet. Feel free to add yours in the comments, sharing is caring after all.

  • Is there even a need for a CMS for the client?
  • Is WordPress the correct CMS? Will it fit the needs? Is the translations available for the WordPress backend good enough? How will it be upgraded?
  • Will I need to extend WordPress using plugins? Are any hacks to the core necessary, because if they are, how will I make sure that these won’t break when the core is upgraded?
  • What types of content will there be, and what should be deemed static (i.e. use Pages), and what is flowing updates (i.e. Posts)? How will I present this, and what is the main type of content?
  • How will the permalink structure be? Should it really say “category”, why not “view” or “updates” or something else?
  • Will the menu be static (i.e. coded into the theme) or controlled by WordPress (i.e. listing using WordPress tags for Pages and categories)? How could this go wrong in the future?
  • What hierarchy will the Pages have? This is important for the URL, since it should be coherent with the menu hierarchy after all.
  • How will I present sub-pages (i.e. Pages having a mother Page)? Should there be any at all?
  • Do I need Page templates for various sections? How will these work with sub-pages?
  • What categories will I use? Should the client be allowed to create new categories?
  • How will I present Posts content?
  • Do I need category templates for the various categories?

What is your experience with WordPress as a CMS, and have you anything to add to the list? Share in the comments.

Feature
Post

Category
Headline

Headline: The Designer’s List of Ad Formats

Feature
Post

Category
Design Focus

Friday Focus 07/25/08: Illustrated Designs

Dive into the colorful and detailed world of illustrated web design this week on Friday Focus.

Designs of the Week

Vermont Coffee Works

I like that this is a 3-column layout that gives off more of a brochure vibe than an online shopping cart. I also like that this site could have been done fully in Flash, but the creators chose to use it moderately.

GreenBranding.net

This web design company has a signature elegant look to its illustrations, showing you don’t always have to look cartoony when employing this design technique.

English Riviera International Comedy Film Festival 2008

Now here’s a site that literally rides on the comedy of cartoony illustrations. Again, Flash is used only in the header to add even more quirk to the site. And at the bottom we see another fixed footer using translucent waves (from the French Riviera?).

I know, this site has been featured every which way you look months ago, but now Silverback has launched and aside from the parallax effect when you horizontally resize your browser window, you get to scroll down for more jungle-y goodness—love the furry border at the footer!

Social Media Weekly

DesignGetting Moody: A Look at Inspiration and Style in Early Design Techniques
Tom Osborne from Viget Labs shows you how to cultivate inspiration with the help of a mood board.

ProgrammingTop 10 Concepts That Every Software Engineer Should Know
Go back to basics and check off this list of what you should be studying or brushing up on as a software engineer, or just a curious geek in general.

Feature
Post

Category
Code

Make Your Blog More Evergreen with Movable Type

A recent post on ProBlogger discussed the pros and cons of dates on blog posts. The gist of it is recent dates can make posts appear fresh, but a post with an older date might appear stale, even if the information is still relevant.

One option discussed in the article was removing dates from older posts. This seemed like an interesting idea to me, so I set out to see how it could be done with Movable Type. It’s fairly easy, although it does require either a plugin or some PHP code.

Let’s start with the plugin version. We’ll need to install DateTags. This is an older plugin that’s not entirely compatible with MT4. In particular, there’s a problem with the <MTNextNEntries> tag. We don’t need that tag for this, so for our purposes it will work fine.

After you install the plugin, open your Entry Metadata template module and add this code to the top:

<mt:ifarchivetype type="individual">
	<mt:setvarblock name="daysdiff"><mt:deltadays date="[MTEntryDate format='%m/%d/%Y']" target="[MTDate format='%m/%d/%Y']"></mt:setvarblock>
	<mt:if name="daysdiff" gt="180">
		<mt:setvar name="displaydate" value="0">
	<mt:else>
		<mt:setvar name="displaydate" value="1">
	</mt:if>
<mt:else>
	<mt:setvar name="displaydate" value="1">
</mt:ifarchivetype>

Simple, right? Let’s go through it, though, and see what’s going on.

<mt:ifarchivetype type="individual">

MT uses the Entry Metadata template module in a lot of different templates, but I only want to control the appearance of dates on individual entry archives. You can skip this check if you want the change to be site-wide.

<mt:setvarblock name="daysdiff"><mt:deltadays date="[MTEntryDate format='%m/%d/%Y']" target="[MTDate format='%m/%d/%Y']"></mt:setvarblock>

This is the real meat of it. We use the <mt:deltadays> tag from DateTags to find the difference between the entry date and the current date. We then store that value in the daysdiff variable.

<mt:if name="daysdiff" gt="180">
	<mt:setvar name="displaydate" value="0">
<mt:else>
	<mt:setvar name="displaydate" value="1">
</mt:if>

Now we check daysdiff to see the age of our entry. I’m checking if it’s about 6 months (180 days) old, but you can use whatever length you want. We then set another variable, displaydate, based on that age.

A bit further down in our template, we use displaydate to determine, well, whether we display the date:

<MTIfNonEmpty tag="EntryAuthorDisplayName">
	By <address class="vcard author"><$MTEntryAuthorLink show_hcard="1"$></address>
    <mt:if name="displaydate">
    	on <abbr class="published" title="<$MTEntryDate format_name="iso8601"$>"><$MTEntryDate format="%x %X"$>
    </mt:if>
<MTElse>
        <mt:if name="displaydate">
        	<abbr class="published" title="<$MTEntryDate format_name="iso8601"$>"><$MTEntryDate format="%x %X"$></abbr>
        </mt:if>
</MTIfNonEmpty>

If you’re using the “About This Page” widget, you’ll want to do the same thing there. Remember, variables declared in one part of a template (or in an included template module) are available to any code that follows, so we don’t have to recalculate the date difference in the widget, just check displaydate.

Using this method, you should get into the habit of regularly republishing your entire blog. That way, older posts will get updated as they “mature.”

PHP Alternative

If for some reason you can’t or don’t want to use the DateTags plugin you can still accomplish this by publishing your entry archives as PHP files. Just use this bit of PHP code to calculate your date difference:

<?php
	$date_diff = round( abs(strtotime(date('y-m-d'))-strtotime('<MTEntryDate format='%m/%d/%Y'>')) / 86400, 0 );
?>

Then use PHP instead of MT to test whether or not to display the date. The nice thing about this option is you don’t have to worry about republishing regularly to make this work — PHP will handle that automatically.

And there are other uses for this technique as well, like changing CSS files based on the age of the entry. You could set up a series of styles that cause your entries to “age” over time.

How do you highlight (or hide) the age of your posts? Let us know in the comments.

Feature
Post

Category
Strategy

New Ad Formats for Blogs Sneaking Out

When monetizing a blog most people tend to put up a bunch of 125×125 pixel ads, something of an unofficial standard. I believe this is Michael Arrington’s doing, the relaunched version of TechCrunch (which we’re seeing an updated iteration of today) introduced this in a wider scale, at least to me, and bloggers happily jumped on the bandwagon.

The concept is sound, 125×125 pixel ads aren’t obtrusive, they’re small, lightweight, but still gets the message out there.

Problem is, when putting 8 or even 10 of these in a two column layout you’ll get a cluttered block that looks worse than a set of larger ads would.

The New Format?

But maybe there’s a new format in town to gain ground. The GigaOm network runs 300×100 pixel ads in their sidebars, which looks clean compared to the 125×125 pixel ones found on TechCrunch.

sidebaradsgigaomtechcrunch.jpg

While I think 300×100 pixels is a pretty decent size, design-wise, I believe it is better to look at what default sizes are being offered and sold by ad networks. The closest one is the not so common 250×120 pixels, the half square ad (being 250×250 pixel, or sometimes 250×240 pixels, hence the “half” part). This is an ad that works well in sidebars as well, without being to obtrusive.

Incidentally, both these ad formats (300×100 pixels and 250×120 pixels) offer the advertiser a total of 30,000 pixels to work with.

The Future of Blog Ads

With blogs being more like traditional websites, we’ll see more traditional ad formats. That’s the good thing with the 125×125 pixel ads, there are several mainstream ad networks (such as Google Adsense) that will offer this size, whereas 300×100 pixels is something of an in-house creation from Giga Omni Media. I do think that 300×100 pixels is a better aspect than 250×120 pixels, but when running the latter I’ve been able to get media agencies to push out ads on my site, rather than having to have the one odd ad spot breaking my design.

Big shot blogs are already running traditional ad sizes, just look at the Gawker (Lifehacker, Gizmodo and more) and Weblogs Inc. (Engadget, TUAW and more) blogs out there. This is because they reach a mainstream audience (as opposed to the TechCrunch ones, for instance), and that mainstream advertisers used to the traditional ad formats.

Both the TechCrunch and the GigaOm network are running traditional ad spots as well, with the leaderboard ad (728×90 pixels, “the new banner” size) being the most common ground here. They are also running squares, like the 300×250 pixel ad found in GigaOm’s sidebar, and the 160×600 pixel skyscraper ad on TechCrunch.

What’s Your Poison?

Think about this when you design the ad spots for your next blog.

  • Is your crowd mainstream? If yes, look to traditional ad format.
  • Is your crowd very much web 2.0 new media-ish? Then you won’t go wrong with either, and might even get away with a custom size if your readership is enough to get the advertisers to do custom ads just for you.
  • Is your crowd the same as the blogosphere itself? Then stick to your 125×125 pixel ads for now, but be at the ready!

What ad sizes do you prefer, and why?

Feature
Post

Category
Design Focus

Friday Focus 07/18/08: Elegant, Exquisite, Extreme Details

Elegant, exquisite, and extreme details on these sites that are sure to please. Welcome to this week’s Friday Focus!

Designs of the Week

http://designdisease.com/

This creation is just a delight to look at. Everywhere you look there are design elements that carry the underwater theme brilliantly. More importantly, those elements break the mold of straight borders and rectangular image frames and buttons.

This business website is simply well-done. I love that the company logo is inlaid into the rotating photos below the header, when typically it’s found at the top of the site. It adds interest to how the photos are framed and presented.

Music. Color. Type. Those are the three elements that make up this recently redesigned website. Every page gives a completely different visual and musical experience.

Social Media Weekly

DesignHow to (and not to) work with a designer
Will Harris shares his experience on working with a designer. A good read for both designers and clients.

Design50 Absolutely Killer Flash Templates
FlashDen shares the top 50 Flash templates that are ready for you to use, perhaps even modify. If you don’t want to buy these products, then at least take a look at them for inspiration!

ProgrammingCheat Sheets for Front-end Web Developers
Twenty-three cheat sheets for HTML, CSS, JavaScript (mooTools and jQuery), all printer ready.

Feature
Post

Category
Code

Keep a Featured Post at the Top of Your MT Blog

Whenever I blog something good — a long tutorial that I’m really proud of, for example — I’m often tempted not to blog for a while. I want that great article to stay at the top of my home page for as long as possible. It’s not just about vanity, though. This can be useful when you make an announcement and want to be sure people see it. Plus, featuring your best work in a prominent position can help keep new visitors exploring your site. And if these “featured posts” usually have photos, they can improve the first impression someone gets from your home page.

For this tutorial we’re using our default Movable Type index template. The code below would replace the <MTEntries> block at the top of the template:

<mt:entries lastn="1" tag="featured">
    <div class="headliner">
        <h2>Featured Post:</h2>
        <mt:entryassets type="image" limit="1">
            <img src="<mt:AssetThumbnailURL width="450" square="1" />" alt="<mt:assetlabel>" />
        </mt:entryassets>
        <p><a href="<mt:entrypermalink>"><mt:entrytitle></a></p>
        <mt:setvarblock name="featured_entry"><mt:entryid></mt:setvarblock>
    </div>
</mt:entries>

<MTEntries>
    <mt:unless tag="entryid" eq="$featured_entry">
        <$MTEntryTrackbackData$>
        <$MTInclude module="Entry Summary"$>
    </mt:unless>
</MTEntries>

Now, instead of one <MTEntries> block, we have two. The first one finds our most recent featured post and displays it. The second is our default list of entries for the home page, with a check to make sure we don’t repeat the featured post.

Let’s take a closer look at how we’re doing that. We’ll start with our search for a featured entry:

<mt:entries lastn="1" tag="featured">

This will bring back our most recent entry that was tagged with the word “featured.” If that entry has an image attached, we want to display it:

<mt:entryassets type="image" limit="1">
    <img src="<mt:AssetThumbnailURL width="450" square="1" />" alt="<mt:assetlabel>" />
</mt:entryassets>

Our <mt:entryassets> block will only bring back the first image it finds in the entry. The <mt:AssetThumbnailURL> tag will generate a thumbnail for us, if one that size hasn’t already been created.

We then output a link to the entry, and end the block by storing the ID of the featured entry in a variable:

        <mt:setvarblock name="featured_entry"><mt:entryid></mt:setvarblock>

We then check that variable when we output the rest of our entries, to make sure we don’t display the featured post again:

<MTEntries>
    <mt:unless tag="entryid" eq="$featured_entry">

Maybe it would look something like this:

Featured Entry on home page

For this to work, you will need to tag an entry with the word “featured” — ideally it will have an image embedded in it. Now republish your main index, and add some styling to the content of div.headliner to set it apart from your regular posts. Now, whatever you consider your latest and greatest post can always have an eye-catching position at the top of your blog.

Feature
Post

Category
Code

Transfering Data with Other Servers Using cURL

In this day and age, there are many ways to transfer data between servers. One of the fastest, most popular, and easiest method is using the cURL library with the ability to work in many protocols, including HTTP, HTTPS, FTP, WebDAV, and more. In order to use this in PHP, you need to install the libcurl package. You must also enable libcurl once it is installed by uncommenting the line in your php.ini configuration file.

To verify that we have cURL installed and enabled, create a new file called phpinfo.php with the following code in it:

<?php
phpinfo();
?>

Now go into your web browser and open up http://localhost/phpinfo.php or wherever you placed it. Once you are there, just do a search for the cURL module. If it isn’t there, you must be using an older version of libcurl or not enabled it.

For your first script, we will be getting an RSS file from digg. In order to do this, we first need to initiate cURL, set some of our options (including URL), dispatch it, then close it.

<?php
$url = 'http://digg.com/rss/index.xml';
$ch = curl_init(); // Initialize the cURL handler

curl_setopt($ch, CURLOPT_URL, $url); // Set the URL
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); // Return data, instead of displaying it
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1) // Follow any redirects, just in case

$rss = curl_exec($ch); // Get the data
curl_close($ch); // Close cURL handler
?>

In the above code, we use the PHP constant CURLOPT_RETURNTRANSFER, because if we don’t the function curl_exec($ch) will automatically echo the data onto the page. We make sure to enable it so that the data instead goes into the $rss variable so that you may work with it. Another constant we used was CURLOPT_FOLLOWLOCATION, because if one day digg.com decides to change the location of this feed, and has put a redirect in place of it, cURL will transfer itself to this new URL.

Sure you can get data from a page, but you can also send as well! Lets say you want to search for videos on YouTube, you may do so as follows:

<?php
$search = 'libcurl';
$url = 'http://youtube.com/results';
$ch = curl_init(); // Initialize the cURL handler

curl_setopt($ch, CURLOPT_URL, $url); // Set the URL
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1) // Follow any redirects, just in case
curl_setopt($ch, CURLOPT_POST, 1); // set POST method (to send our search)
curl_setopt($ch, CURLOPT_POSTFIELDS, 'search_query=' . $search); // What we will be searching for

curl_exec($ch); // Display page
curl_close($ch); // Close cURL handler
?>

If you have already tested the code out, you may have noticed that you see YouTube. This is because I have removed the CURLOPT_RETURNTRANSFER constant just for fun, but you can ofcourse just reinclude it and make sure that curl_exec($ch) is returning the data into a variable. CURLOPT_POST switches cURL’s setting from getting, to sending, while CURLOPT_POSTFIELDS sets the data you want to send. In this case search_query=libcurl

If you go to web sites that have protected directories and your browser requires a username and password, you can also use cURL for that!

<?php
$url = 'http://mysite.com/protected';
$ch = curl_init(); // Initialize the cURL handler

curl_setopt($ch, CURLOPT_URL, $url); // Set the URL
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1) // Follow any redirects, just in case
curl_setopt($ch, CURLOPT_USERPWD, "username:password"); // Your username and password

curl_exec($ch); // Display page
curl_close($ch); // Close cURL handler
?>

This is basically for something called HTTP Authentication where you need an authorized username and password to continue. The PHP cURL constant CURLOPT_USERPWD lets you define the username and password with a colon in between. Everything else is pretty much normal.

Of course you can also use HTTPS (HTTP Secure) and FTP connections and more. You can find more tutorials on PHP here on Devlounge and please comment with your thoughts on the article.

Feature
Post

Category
Design Focus

Friday Focus 07/11/08: Blue-Gray

Happy free 7-11 Slurpy day! Happy iPhone 3G day! Let’s celebrate with some sleek websites this week. They’re mostly blue, gray, blue-gray—that seemingly drab section of the spectrum actually manages to turn up excellent designs, so don’t shun it just yet! Oh, and we have a ton of examples this time, so brace yourself!

Designs of the Week

Loewy Design

I love the subtle navigation and portfolio item effects here. A few years ago this page would probably be constructed in pure Flash, but it’s amazing what you can do with simple JavaScript these days.

DivVoted

This fixed-footer layout technique is reminiscent of StrawPoll, which is also a voting site that uses Twitter. But there’s a twist: you can hide the island if it’s getting in your browsing way.

Emmis Interactive

I guess you’d say that this website has typical “Web 2.0″ elements in it: gradients, reflections, rounded corners…everything except for the candy colors of all those crazy webapps. This is a reminder that despite their overuse and misuse, a good-looking website can still emerge using those tried and tested techniques. The tip here is to avoid the bright hues in the structural elements, but keep them in the “accessories” like the icons.

Pennsylvnia Federation of College Republicans

Another muted design here—not just the blues, but the reds. Though I think the gray background is a little too dark and close to the color of the text, which could be a contrast issue with some people. I particularly like the navigation tabs, including how they described each section so you have an idea of where you’re going.

Headplay FPV

Now this is a very strong design, even though its colors are practically monochromatic. It’s all in the details and the right amount of contrast, while maintaining this boyish feel.

bexEsler

I love the use of (faux) transparency here. Normally I wouldn’t be too thrilled about the black to light gray gradient because it’s so abrupt, but in here, it’s a great lighting technique. Again, another almost-monochromatic design that still looks interesting.

Feature
Post

Category
Code

Creating a Photo Gallery Using jQuery and the MT Asset Manager

Movable Type Asset Manager

One of the big new features that came in Movable Type 4 was the Asset Manager — a central location for maintaining the files you upload to your blog. Asset Manager gives you an admin for uploading, tagging, labeling, and deleting your files. It also comes with a rich set of template tags for publishing your assets. Combined with a bit of JavaScript, the Asset Manager can easily produce a beautiful photo gallery.

There’s any number of JS or Flash photo galleries you can use. For this example, I’ve chosen Galleria, a jQuery-based photo gallery. It degrades well in the absence of JavaScript or CSS, allows linking to individual files, and looks beautiful out of the box.

To get started, download Galleria (it includes jQuery) and upload the CSS file, the jquery.min.js file and the jquery.galleria.js file to your server. Create a new index template, name it whatever you want, and populate it with this template code. You’ll likely have to modify the CSS <link> and the <script> tags to point to where you uploaded your files, and of course change the titles and text to whatever you want.

This template is based on the example that comes with Galleria. If you’re comfortable with JS and want to customize the look and behavior of your gallery, I recommend you read the Galleria options documentation, then take a look at the JS code in the template. There’s almost no end to the ways you could modify the transitions, thumbnail appearance, and other details.

Towards the end of this template is where the Asset Manager does it’s work. Let’s look at those lines:

<div class="demo">
<div id="main_image"></div>
<ul class="gallery_demo_unstyled">
<mt:Assets lastn="20" type="image" tag="historical">
<li<mt:if name="__first__"> class="active"</mt:if>>   
      <img src="<mt:AssetURL>"
           alt="<mt:AssetLabel escape="html">"
           title="<mt:AssetLabel escape="html">" />
   </li>
</mt:Assets>
</ul>
<p class="nav"><a href="#" onclick="$.galleria.prev(); return false;">&laquo; previous</a> | <a href="#" onclick="$.galleria.next(); return false;">next &raquo;</a></p>
</div>

The classes and ids we use here are for the benefit of Galleria. You can change those, as long as you also change them in the script code earlier in the template. The code is pretty simple: create an unordered list, then loop through our assets:

<mt:Assets lastn="20" type="image" tag="historical">

This is where we start our assets loop. We’re saying we want up to the last 20 assets of type “image” that have the “historical” tag. Of course, you’ll want to change that to whatever tag you’ve used for your photos. Or you can leave it off to get all images in your asset manager. Other assets attributes allow us to filter based on author or file extension, or sort by various settings.

Each iteration of the loop creates a list item:

<li<mt:if name="__first__"> class="active"</mt:if>>

Here, we’re using a loop meta variable__first__ — to add a class to the first list item we output. That will make the photo show up as the main photo when someone first visits the page.

Then we output our <img> tag:

<img src="<mt:AssetURL>" alt="<mt:AssetLabel escape="html">" title="<mt:AssetLabel escape="html">" />

And that’s it. Put in an output path for your template, then save and publish it. If the template is finding the CSS and JS files, you should get a gallery like this one.

As I mentioned before, you can use MT’s Asset Manager with any number of existing photo galleries, or you could create your own from scratch. There are many asset-related template tags that give you access to all your files’ data. MT can also generate thumbnails on the fly and cache them for future use.

Have you created your own photo gallery with the MT Asset Manager? Tell us about it in the comments.

Feature
Post

Category
Design Focus

Friday Focus 07/05/08: Bursts of Color and Collapsible Content

Welcome to the first Friday Focus for the month of July. This week: strong bursts of color and collapsible content. Curious combination? Read on!

Designs of the Week

Goodworks Media

This is probably the “most different” from the rest of the designs here. But it’s a good thing. It’s 100% fluid, makes good use of to show the striking background, and is very colorful.

Pareja

A blog implementation of the collapsible content technique. Simple and effective design that pops.

Joel Delane

I personally am not a fan of what he did to the background, it’s a little too busy and competes with the portfolio images, but it’s a nice design nonetheless.

Fernando Kruger

It’s not colorful, but dark, monochromatic color schemes can be as rich as the rainbow too. The collapsing headers distinctly remind me of the legendary portfolio of Marius Roosendaal, but this design is unique in its own right.

Social Media Weekly

Design99 Free Canvas, Paper, Paint, and Metal Textures
People say grunge is the new “Web 2.0 look”. Whether or not you agree, it takes a lot more work to put together a nice textured design, but this page can help you out.

DesignStyle Switchers Contest Results
Smashing Magazine held a contest that had designers coming up with creative presentations of website style switchers. Tons of inspiration here.

ProgrammingImproved Flash indexing
Google starts indexing Flash content. It’s what web designers have been waiting for…or is it?

ProgrammingTop 10 Fatal URL Design Mistakes
If there is one part of a website that you should make sure works properly, it’s the URL. Some SEO advice for ideal URL design.