Posts by Michelle Jones on Learning Movable Type

Share This Post in Movable Type 4

2008-01-20T03:58:50Z

This isn't really a tutorial since I'm just advising you to install a plugin and giving you some reference html to make it look a tiny bit nicer than it does by default. However I still think this might be useful information for at least a few people so here we go:

Social bookmarking sites like Digg, del.icio.us, StumbleUpon and countless others are very popular with blogs and websites. Becoming popular on one of those sites attracts serious traffic and let's face it, most blogs and websites are always looking to boost traffic. So making it easier for people to "add to del.icio.us or "digg this" seems to be a good idea. By making it easier I mean we'll be adding links for several of the most popular social bookmarking tools to all existing and future entries for a given blog.

To accomplish this we're going to use the Promote This! plugin by Byrne Reese. Download and install the plugin per the directions. Once you've installed the plugin it's time to insert code into the Entry Detail template module. The Promote This! site gives the example of the code for adding a "digg this" link. If you follow that format you'll get a nice text link that works just fine. But if you want to jazz it up a tiny bit you can add the logos for each of the social bookmarking services you want represented.

]]> To get those handy little icons for each service you need to grab either the favicons or other logo button provided by the services. In the code below I'm hotlinking to all the images. I don't recommend you do this, it's just to show you the addresses of all the icons so you can grab them yourself and upload them to your own space.

This code will give you quicklinks to the sites that I've chosen to use/link to. Promote This! supports several other sites so feel free to add and subtract links as you like.

Share this post: digg del.icio.us ">reddit Newsvine Google Bookmark FaceBook Stumble Upon

I've chosen to have links at the end of blog posts, before comments so I've placed the code, in the Entry Detail template module, between
<$MTInclude module="Categories"$>
and <$MTInclude module="Tags"$>

Add Scrollbars to Image Popup Windows in Movable Type 4

2007-11-23T03:48:48Z

I post a lot of thumbnail images on Consuming Louisville that link to very large full size images. By default Movable Type doesn't add scrollbars or allow resizing for the popup windows created for images. That's a problem because those large images of mine get cut off with no way to expand the window or scroll to see the rest of the image. So of course I needed to turn on scrollbars and turn on window resizing for image popups.

Like with changing the default image upload location I wish that there was a simple way, within the Movable Type application, to do this but there isn't one as far as I know. Instead we have to do a little monkeying around with the Movable Type application code. But, again like with changing the default image upload location, the is actually quite simple and only requires editing a single line of a single file.

]]> The file to edit is called Image.pm. Assuming you have your Movable Type files in your cgi-bin the path to this file looks something like cgi-bin/mt/lib/MT/Asset/Image.pm.

1. Download Image.pm (I highly recommend you save a backup copy of it before you edit it)

2. Open Image.pm and look for the following:
q|%s|,

3. Change
scrollbars=no,resizable=no

to scrollbars=yes,resizable=yes

So your final code should look like:
q|%s|,

4. Save and upload Image.pm

Now, the next time you have Movable Type create a popup window for the full size version of an image that popup window will have scrollbars and viewers will be able to resize it.

Make Flickr's Blog This Feature Work with Movable Type 4.0

2007-11-08T21:00:19Z

This tutorial is cross posted at On a path media

Actually this applies to any version of Movable Type since 3.2 and to all kinds of external apps for posting to your Movable Type blog. I just suspect that the Blog This feature from Flickr is probably the most popular external blogging tool out there and it's really frustrating when you can't get it to work.

I should mention this post was inspired by my friend Cecily who recently wrote about posting from TextMate to a Movable Type blog. Her post reminded me about how the web services password can cause problems when setting up a Movable Type blog to work with Flickr's Blog This feature.

When you go to setup your Movable Type blog with Flickr you'll be asked for your password. Many folks put in their password only to be told its incorrect. They check and double check and absolutely certain they're putting the right password in only to still be rejected. The problem is that Flickr doesn't want your main blog password (the one you use to login to your blog with). What Flickr wants is your web services password.

If you don't know what your web services password is that probably means you haven't set one up yet. System Overview -> Users -> Your User Identity

]]> flickrblog.png

If you don't know what your web services password is that probably means you haven't set one up yet. System Overview -> Users -> Your User Identity
webservices.png

If you haven't set up a web services password the field will blank. If you have but can't remember what it is just click the reveal link and it will be shown. Now tell Flickr what your shiny new or newly revealed web services password is and you'll most likely be good to go.

Alternating Comment Styles with Movable Type 4

2007-10-22T18:29:22Z

A list of comments, particularly a long list, that doesn’t include any style differentiation can get a little hard to read.

Using two alternating comment styles will give your readers’ eyes a break and your blog a little more style. Happily, Movable Type 4 provides a relatively simple way to do this.

]]> There are really only two steps to implementing alternate comment styles. The first is actually creating the two different styles. You can of course call these styles anything you like but since the styles are going to alternate between even and odd comments I like to call the styles, well, even and odd. Define these styles however you like and place them in your stylesheet. Here’s an example:

.even { background-color:#FFF; padding:8px; margin-bottom:5px; }

.odd { background-color:#F4F4F4; padding:8px; margin-bottom:5px; border:2px dotted #999; }

Simple enough right? Good. The next step is where the alternating magic within Movable Type happens. I’m going to give you the code to make that magic work and then I’ll go into a bit of detail about what that code is doing. You can choose to either simply paste the code straight into your template and move on or you can dive into the why and how it works.

The following code can replace all of the code in your Comment Detail template module or you can paste the necessary new parts in.









 id="comment-<$MTCommentID$>">

    

        

            <$MTCommentAuthorLink default_name="Anonymous" show_email="0"$> <$MTCommentAuthorIdentity$> 

said:

        


        

            <$MTCommentBody$>

        


        

            <$MTCommentDate format="%x %X"$>

Pasted it in? Good. Seeing alternating styles between comments? Excellent. Why? It’s all thanks to Template Loop Meta Variables and if/else statements.

The Movable Type documentation explains Template Loop Meta Variables thusly:

Movable Type exposes a number of different template tags called container tags that loop over a set of objects. This allows designers to display for example the last 10 entries on a blog, or to display each of the comments associated with an entry.
As Movable Type iterates or loops over a list of objects in this fashion it maintains a number of meta variables for you, allowing you to test if the current item is an odd or even item in the list for example.

Got that? Maybe, maybe not. For our purposes the easiest way to understand this is to say that when anything Movable Type outputs takes the general form of a list where one item follows another (blog entries, comments, trackbacks, etc.) Movable Type keeps track of which items are oddly numbered (1, 3, 5) in that list and which are evenly (2, 4, 6) numbered. Until you implement alternating comment styles or some other modification there is no difference between odd and even comments on your blog’s output. That doesn’t mean Movable Type doesn’t know which is which though. By knowing that difference Movable Type is able to conditionally apply different styles based on an if/else statement. That statement is:

That code says “if a comment isn’t odd then it’s even. If it is an odd comment apply the odd style class, if it is an even comment then apply the even style class.”

You might be wondering, since the above code snippet doesn’t actually contain the word “comments” and it comes before any of the comment tags in the template we’ve put it in, how does Movable Type know for certain, that it’s odd and even numbered comments we want to keep track of. and not something else. In this case remember that the Comment Detail template module is pulled into the Comment template module as an include. So even though our code snippet is coming at the beginning of the Comment Detail template it’s really in the middle of all the tag soup for comments. So it’s clear to Movable Type that our if/else is referring to comments specifically.

This tutorial was inspired by a conversation about the Gizmos for MT plugin at Appnel Solutions.

As always if I've made any mistakes or if you have any questions please let me know.

This tutorial is cross posted at On a path media. Later this week at On a path media we'll look at how to style comments from a blog entry's author differently than other comments.

Putting MT:MultiBlog to Work

2007-10-09T18:03:48Z

Last week on my personal blog I discussed how to put the MT:OtherBlog tag to use and compared that tag with using PHP includes to create the same functionality.

In the comments of that post J. Brotherlove reminded me of one serious advantage PHP includes have over using MT:OtherBlog: automatic updating. If I’m pulling content from Blog 1 with a PHP include into Blog 2 whenever Blog 1 is updated the pulled content is automatically updated on Blog 2. This isn’t the case when using MT:OtherBlog. When I update Blog 1 the pulled content on Blog 2 will not be updated until Blog 2 is rebuilt (either indexes or the entire blog depending on how you’ve got it set up). So after round 1 the score card finds MT:OtherBlog winning in the ease of use category but PHP includes winning in terms of actual useful functionality. So, a tie.

]]> But then (again in the comments of my post on MT:OtherBlog) David Raynes dropped some incredibly helpful knowledge that turned PHP includes and MT:OtherBlog both into also-rans. Turns out David originally developed the MT:OtherBlog functionality as a plugin for an older version of Movable Type. With Movable Type 4.0 this functionality was packaged into the application as MT:MultiBlog. While on the surface MT:MultiBlog and MT:OtherBlog do the same thing (namely allow you to easily pull content from one blog into another blog) the former has a serious advantage.

The MT:MultiBlog tag gets its functionality from the MT:MultiBlog plugin and that plugin has rebuild triggering options. Whereas when using MT:OtherBlog I would have to manually rebuild Blog 2 to force it to pull the most recent content from Blog 1 when using MT:MultiBlog I can set a rebuild trigger to automatically rebuild.

Let me use my personal blog On a path and content from Correspondence Notes as a real world example. I want the content I’m pulling from Correspondence Notes into the footer of On a path to always be up to date. Using MT:MultiBlog I have two steps to making that happen. First step is getting the code in order:

<$MTEntryTitle$> <$MTEntryExcerpt$>

This is of course almost identical to the code used in the MT:OtherBlog example. David rightly points out that this code could be condensed but I prefer writing it out like I have here. Just a personal preference so feel free to do it however you like.

The second step is to configure a rebuild trigger using the MT:MultiBlog plugin. Go to plugin configurations for Blog 2.

Select MT:MultiBlog 2.0, click settings and then Create Rebuild Trigger. Choose the blog that will be triggering the rebuild (in my example it’s Correspondence Notes) and configure it. I chose to rebuild the On a path indexes whenever a Correspondence Notes entry is saved.

Now the Correspondence Notes content in the On a path footer will always be rebuilt when a new entry is saved at Correspondence Notes and thus the On a path footer will always have the most up to date content. Sweet.

This a slightly modified version of an article that originally appeared at On a path

Working with Movable Type 4.0 Templates: Sidebar

2007-10-05T18:19:47Z

This tutorial is cross posted on my personal blog On a path.

The new templates and template structure in Movable Type 4 streamline and simplify the process of making site wide changes to your blog. Well that’s what they do once you actually understand the templates and template structure. But understanding how the templates work together and digesting the tag soup that swims in each of those templates? Not exactly simple. So at the suggestion of a friend I thought I’d create a series of basic tutorials that help explain the templates and template structure. The tutorials will begin at a relatively basic entry level.

Instead of just breaking down templates line by line I thought it would be easier and more practical to look at templates in the context of actually doing something. You don’t really need to understand every single line of code if you know where and how to make the changes to accomplish what you want. For this first tutorial we’ll be making changes to the sidebar. Specifically we’re going to remove a widget we don’t want and add Google AdSense ads in the sidebar, after the archive content, on every page of a blog.
]]> Template Shelf plugin. If you’re going to spend any time at all editing your templates this plugin will make your life much easier. For this tutorial we’re only going to be editing one template. But it’s not unlikely that you’ll be needing to hop back and forth between multiple templates and modules in the future and this plugin makes that much, much simpler.

I’ve set up a brand new blog to serve as an example of the work done in this tutorial. I selected the minimalist light blue style and a two column (wide-thin) layout from Stylecatcher in Movable Type. Since we’ve got a two column layout the template we’re going to be modifying is the Sidebar - 2 Column Layout. This template is actually a template module. What’s a module? The best analogy I can think of is that a template module is like a backpack. You’ve got a whole bunch of stuff (all the code for the sidebar) you need to get somewhere (in the sidebar of all the pages on your blog) and it’s much easier to put all of that stuff in a backpack (a template module) and then unpack it when you get to where you’re going.

So instead of having to put all your sidebar code into every template (main index, individual archive pages, monthly archives, etc) you just reference the particular module that contains the code like so <$MTInclude module="Sidebar - 2 Column Layout"$>.

Out of the gate this is what the sidebar looks like.
The first thing I want to do, is remove the text that says “Tag Cloud.” Tag clouds can be fun but I’m not using tags on the tutorial example blog so there is no reason to have it there.

To remove the Tag Cloud we need to find the following section of code in the Sidebar - 2 Column Layout template module (line 169 if you’ve got syntax highlighting turned on):

Let’s look some of the important code in this section before we remove it.

and Everything that falls between these two template tags is governed by a rule that basically says “if a template is the main index template then this information will be displayed on that template’s published page. If a template is not the main index template then this information will not be displayed on that template’s published page(s).” In other words “the information within these tags is only going to be displayed on the main index page and not any of the archive pages.”

Wrap your head around the if/then idea here. It’s going to be really important later.

The first tag in this pair says “we’re dealing with the tag cloud widget here.” Th second tag (which comes just before if you’re confused) says “we’re done dealing with the tag cloud widget now.”

Combine those four tags together with all the code included between them and you’ve got a Tag Cloud that appears on your blog’s main index page and nowhere else.

I don’t want a Tag Cloud to appear on the main page or anywhere else so I’m totally deleting all of this code. If you think you might want to implement the tag cloud later on you can just comment out this section instead.
Tag Cloud gone we can now move on to adding the code for AdSense into the sidebar. To do this next step you’ll have of course needed to setup an AdSense account and grabbed the code they give you to put ads on your site. It will look something like this

I want the ads to appear, on every page of my tutorial blog, after the monthly archives list and before “Subscribe to this blog’s feed.”

On or about line 242 (depending on whether you deleted or commented out the Tag Cloud code) you should find the code block that begins

. Like the previous code in this format this is saying “hey we’re dealing with the syndicate widget now.”

Since we want our ads to be directly about the syndication widget (the syndication widget is where the phrase “Subscribe to this blog’s feed” is coming from) we want to paste in the code Google gave of us here.

Voila! Now you’ve got ads on all the pages of your blog in the sidebar between the list of monthly archives and “Subscribe to this blog’s feed.”
Or do you? You’ve got the ads on every page sure enough. Those ads always appear above “Subscribe to this blog’s feed” just like we want but on some pages, say an individual archive page for example, there is no list of monthly archives. And this is where things get a wee bit tricky.

By default Movable Type thinks you probably want slightly different content in the sidebars of each of the main sections of your blog. For example on your main page it thinks you want a search box, a list of recent entries, a list of categories, a list of monthly archives, the syndication widget and finally the powered by Movable Type graphic. On your individual archive pages it thinks you want a search box, meta data about the individual entry, a link to to the main index page, a link to the main archive page, the syndication widget and finally the powered by Movable Type graphic. All the other sections (monthly archives, main archives, etc) have, by default, some variation of either of these two versions of sidebar content.

Remember how I said if/then was going to be important later? Later is now.

Movable Type is right, I want the search box at the top of the sidebar on every page of my blog so I’m not going to touch the search box code at all. Search box related code takes up the first 40 lines of the Sidebar - 2 Column Layout template so let’s skip to line 41.

Line 41 is . Just like when we saw MTIf before this is signifying the beginning of an if/then statement. This particular if/then statement is saying “the following content is a module called about context. If a template calls for the module called “about context” then display the following information. Simple enough right? Wrong.

Wrong because the about context module has several other if/then statements wrapped up in it and some if/then/else statements as well.

An example:

The English translation: if a page is built from the entry template then display “About this Entry” if the page is built from the archive template then display “About this Archive” and if the page is built from the archive index template then display “About Archives.” In this case “About this Entry”, “About this Archive” and “About Archives” are all headers for the section that immediately follow the search box in the sidebars of pages built from the templates. On individual entry pages the section is called “About this Entry” and so on.

As my high school band director liked to ask “is that clear as mud?” That part actually should be relatively easy to follow. It’s the next section, starting at line 55 and going all the way through 116 that is a bit more complex. This section contains another round of if/then/else statements that determines what content to display in the about section the sidebar depending on which template was used to build a page.

But for our current project I don’t want to change the “About” section content that Movable Type is creating by default. I want the about info MT is spitting out by default for the various pages to stay the same. All I’m concerned about right now is getting the Monthly Archives list to appear on every page so I can have my ads between the Monthly Archive list and “Subscribe to this blog’s feed.” There are two steps to making the monthly archive list appear on every page.

The first step is to address the if statement that line 188 contains. It says
. From past experience we know this is saying “if a template calls for the module called monthly archives then display this information.” By understanding that I know I’ve got two ways for making the monthly archives list appear on every page, an easy way and a hard way. The hard way is to go through every single index template and add in a call for the monthly archive modules. The easy way is to remove the if statement. Meaning, there’s no if about it, I want this content on every single page so I’m removing and the accompanying (line 205) from the template. Now the content that was surrounded by those two lines will now appear everywhere, not just on pages calling for the monthly archives module.

On Correspondence Notes I wanted the right sidebar content to just contain AdSense ads and not the about content Movable Type puts there by default. Since I wanted this on every page, like we wanted our monthly archive list on the tutorial blog, I put this technique of removing if statements to work there as well. With all the if statements removed the code gets really simple. So mentally bookmark the idea of removing if statements when you don’t need to change the content depending on which template a page is built from.

As an example here is what the code for the right sidebar of Correspondence Notes it looks like this:

The second part of getting our Monthly Archives list in order is editing the header. If you leave the code as is (line 193: ) your monthly archive list will be right in most places but not on your individual entry pages. Instead of saying “Monthly Archives” and then listing your monthly archives it will say “Entry Archives” and then list your monthly archives. Everywhere else will look just peachy but to make the individual entry pages come inline we need to replace <$MTArchiveLabel$> with the actual word “Monthly. ” So the new line 193 should look like this:

Whoo. That wasn’t too bad was it? It’s a shame we aren’t quite done yet. Take a look at the screenshot below from category archive page. It’s got the Monthly Archives list alright but then it’s got the listing of the monthly entries for the particular category we’re currently looking at. Who needs that? Not us. Looking at the code directly beneath the monthly archives list in the template (starting with line 206) we can see that Movable Type thinks we might want to list not only a category’s monthly archives but also monthly archives by author. Again I say who needs that? And again I answer myself with not us.
To get rid of these unwanted archive lists I’m cutting out everything in the template that falls between the end of the monthly archive listing code block and the beginning of my Google AdSense code. Again, you can comment these out if you think you might want to use them later. I never will so they’re getting cut.

Now we’re done. For real. Go ahead, look around all the pages of the tutorials blog. AdSense ads on every page between the Monthly Archive listing and the syndication widget and not a Tag Cloud to be found. Feel free to download the edited version of the Sidebar - 2 Column Layout template from this tutorial. Remember that I deleted whole sections of code instead of commenting them out.

If you’re new to Movable Type templates and template tags editing them may still seem a bit overwhelming but give it time and some practice, you’ll get the hang of it. Hopefully this tutorial will help clear some things up and make things a bit easier on you. I hope to write more of these project based tutorials. To that end I’m asking for requests/taking suggestions on what projects to write tutorials for next. PHP includes? Adding Flickr badges? CSS modifications? Etc. Please leave a comment or write me at the address in this page’s footer.

Naturally if I've made any mistakes or if you have additional questions please let me know.

How To Change the Default Image Upload Location in Movable Type 4.0

2007-10-01T18:52:19Z

Nearly every article for my site Correspondence Notes contains at least one image. I use Movable Type's built in upload feature to upload images and add them to entries. The process is fine except for one step. By default Movable Type will upload images to your Site Root. That's great except I like my images to go into a subdirectory I like to call...images. I can of course, with the file upload utility, tell Movable Type to put the images into the images subdirectory. The problem is that the utility will not remember this preference. Every time I upload an image I have to tell Movable Type again to put the new image in the images directory instead of the Site Root. Though it only takes a few key strokes to type "images" into the subdirectory field it's a silly time waster since I want every single image I upload to go into that folder.

Since there isn't an option within the Movable Type user interface to make the file upload utility remember that I want my images to always go into the images subdirectory I decided to go straight to the source and make it happen.

]]> Please remember that if these steps break your copy of Movable Type I'm not the least bit responsible.

Configuring the upload utility to upload to the same subdirectory by default is actually quite simple. It only requires editing a single line of a single .tmpl file. However, if monkeying with an application's source code makes you really nervous I've heard there is a great plugin for improving Movable Type's file upload utility that only costs $10.

The file to edit is called asset_upload.tmpl. Assuming you have your Movable Type files in your cgi-bin the path to this file looks something like cgi-bin/mt/tmpl/cms/dialog/asset_upload.tmpl.

1. Download asset_upload.tmpl (I highly recommend you save a backup copy of it before you edit it)

2. Open asset_upload.tmpl and look for the following: / " />

3. Change
value=""
to
value="images"
where "images" is whatever subdirectory name you want your images uploaded to by default.

So your final code should look like this
/

4. Save and upload asset_upload.tmpl

5. Upload an image

You'll notice that the subdirectory field is still completely editable. So while Movable Type will, by default, now upload my images to the images subdirectory, should I want to upload a particular image to a different directory all I have to do is type a different name into the subdirectory text box.

Posts by Michelle Jones on Learning Movable Type

Share This Post in Movable Type 4

Add Scrollbars to Image Popup Windows in Movable Type 4

Make Flickr's Blog This Feature Work with Movable Type 4.0

Alternating Comment Styles with Movable Type 4

Putting MT:MultiBlog to Work

Working with Movable Type 4.0 Templates: Sidebar

Tag Cloud

About this Entry

About this Archive

About Archives

Welcome

<$MTArchiveLabel$> Archives

Monthly Archives

How To Change the Default Image Upload Location in Movable Type 4.0

Posts by Michelle Jones on Learning Movable Type

Share This Post in Movable Type 4

Add Scrollbars to Image Popup Windows in Movable Type 4

Make Flickr's Blog This Feature Work with Movable Type 4.0

Alternating Comment Styles with Movable Type 4

Putting MT:MultiBlog to Work

Working with Movable Type 4.0 Templates: Sidebar

Tag Cloud

About this EntryAbout this ArchiveAbout Archives

Welcome

<$MTArchiveLabel$> Archives

Monthly Archives

How To Change the Default Image Upload Location in Movable Type 4.0

About this Entry

About this Archive

About Archives