The Composing Stick

Hash Tag Beta 2.5 Now With Scheduled Post Support

2009-07-17T22:23:23Z

I have now added support for scheduled publishing in my HashTag plugin. It is currently a beta and can be downloaded from this link HashTag Beta 2.5.

Some of the changes:

The HashTag options have been moved to a drop down list rather than a radio button to save space.
No longer requires XML::Atom
Includes option to treat entry tags as HashTags
Can tweet scheduled posts. NOTE This will use the plugin default settings (at the time the entry gets published) for tweeting, this can not currently be set on a per post basis.

5 Tips for getting help with Movable Type

2009-04-08T21:15:36Z

Last year I wrote a post about getting help with Movable Type. Slightly tongue in cheek, but made a few valid points. Things have moved on now, so here is the updated Tips for getting help with Movable Type.

1. Go to the right place.

Purchased a license? Go to http://www.movabletype.com and log in under the account you purchased your license under and click on Open a new ticket.
MTOS or a free version? Go to the community forums http://forums.movabletype.com and see if anyone has had a similar problem. If not post a question. You can also run a comprehensive search across Movable Type resources by using mtsearch.
Problem with a Plugin? Try contacting the plugin author. If that does not work try the community.

2. Be clear about the issue in your topic title.

Topic titles are your hook, be clear about your problem; Sidebar is being pushed below content is more informative than HELP!!!!!

3. Details.

The more details you can give at the outset the less back and forth later. Try to include

The version and distribution e.g. MTOS 4.2, Pro 4.01
A link to the site (if relevant).
Sample code (if relevant). You will need to encode your code to make sure that it displays correctly. Use a site like http://centricle.com/tools/html-entities/ to do this.
Steps to reproduce the problem.

4. Be Polite.

The majority of people that help on the community forums are users, just like you. They help in their spare time. If the problem is particularly complex then you may have to wait for someone to set up a similar configuration to test. It is a sad fact that people are less inclined to help people that spend the majority of their post mad mouthing the product or threatening to move to a rival.

5. Give back to the community

If you found the help useful, pay it forward by helping out another user when you can. OK, maybe this isn't a real tip as such but it is valid. If you have another suggestion for tip 5 let me know by adding a comment.

Layout Issues Using Version 3 Templates with Version 4 Stylesheets

2009-01-03T16:46:20Z

A problem that comes up every so often on the Movable Type forums is the mixing of recently upgraded system, old Movable Type version 3.x templates and Movable Type version 4 stylesheets. In layman terms "The layout is buggered" or "The syles don't show".

A reason for this is that a number of the divs (html code that allows use to define parts of a page) had their names changed from a functional name such as banner to a semantic name such as header, so your site looks as if it has lost its style. At this point you have three choices:

Start from scratch using new templates and new stylesheets.
Rename all the styles in the stylesheets.
Rename all the divs in your templates.

Each option has it's pros and cons. If you start from scratch you will have to redo any additional customisation you have made. If you rename the styles in the stylesheet upgrades may overwrite them, my preferred option is to rename the divs in the template. the following is a non exhaustive list of name changes

banner -> header
banner-inner -> header-inner
banner-header -> header-name
banner-description -> header-description
pagebody -> content
pagebody-inner -> content-inner

Also the names of the various layouts have been shorten, see my previous post Changing Number of Columns on a Page

How to Make a Clickable Header in Movable Type - Part Two

2009-01-02T21:37:08Z

Recently I posted two solutions on how to make a clickable header in Movable Type. I have to admit both were quick and dirty methods rather than elegant solutions, a fact raised by Plasticmind on the Movable Type IRC channel. So to make amends here is part two.

What I should have done is show how to use CSS image replacement techniques to create a clickable header. There are a number of image replacement techniques out there, mezzoblue has full list of all of them, what we are going to look at is listed as the Phark Revisited method or the Plasticmind method.

To make things clear I create a blog and applied the unstyled style, leaving me with the following look.

As you can see everything is very plain text, now I want a nice font to use form my heading, so I have created an image file called header.png that is 940 x 191 pixels. I have saved this in a directory called resources off of the blog root.

I am going to add a style to the end of styles.css to include an image (header.png) in any links in the header section of the template. To do this I add the following code:

#header-name a{
    display: block;
    background: #fff url("<$mt:blogurl$>/resources/header.png") no-repeat left top;
    width: 100%;
    height: 191px;
}

The results is this

The problem, as you can see, is that the unstyled name of the blog and the description are still visible, what we are going to do is shift these off the page. Shifting is better than changing the colour as it gives us more flexibility when swapping out images. We don't have to fiddle with matching the font colour or worrying about parts of the image being blocked out. Our style changes slightly to add a negative text indent and to hide the description.

#header-name a{
    display: block;
    background: #fff url("<$mt:blogurl$>/resources/header.png") no-repeat left top;
    text-indent: -9999px;
    width: 100%;
    height: 191px;
}

#header-description {
    text-indent: -9999px;
}

The -9999px shifts the text far off screen so that we don't see it. The final result is

a clickable image header and no fiddling with the templates, just a few lines of css.

New Plugin Project

2008-12-07T17:56:35Z

This weekend I have been mainly working on a new plugin for MT. It has officially reached 'Ugly Alpha' stage which means it is good enough for me to try out in my own environment but I am embarrassed about the quality of the underlying code to post a link. More next week.

Getting Help with Movable Type

2008-11-22T23:31:38Z

No matter what the product or service, at some point in time your are going to be staring at a strange error message, a dead television screen or a punctured inflatable novelty toy. Face it, at some point in your life you are going to need to get help or support.

If you have paid support all you need to do is login at www.movabletype.com and click on the Open a New Ticket link. In my experience the support offered has been timely and accurate.

Without paid support you have two options:

Bitch and Whine on your blog, twitter and any number of social media sites. This is a bit like complaining in a coffee shop about the poor performance of you cellphone in the vain hope someone from the manufacturer is in earshot sipping a cappuccino and fixes it there and then. It probably won't help, but it might make you feel a bit better.
Go to the community for help.

There are two sites you can visit to get help from the community, forums.movabletype.org and forums.sixapart.com.

A few suggestions about posting

Post Titles. You should try and summarise your problem in the post title. HELP!!!! doesn't say anything about your problem. Sidebar is pushed to the bottom of entries, gives us more of an idea and maybe someone quickly scanning the forum post titles will see it and know the answer.
The Details. You should include the version of Movable Type and any other useful information, for example; If you are having problem with your layouts a link to your site is needed. If you are getting 500 errors then the output of mt-check would be useful or knowing that it does not run.

If your question is complicated then you may need to wait while someone may need to replicate the problem or test a solution.

Changing Number of Columns on a Page

2008-11-16T19:51:19Z

Movable Type has a number of standard column layouts accessible through the styles menu. This can also be accessed through templates so that you can change layout depending on the content.

What you need to do is set the page_layout at the start of the page like so:

<MTSetVar name="page_layout" value="layout-wt">

the value can be any of the following:

layout-wtt <-- Wide, Thin, Thin
layout-twt <-- Thin, Wide, Thin
layout-wt <-- Wide, Thin
layout-tw <-- Thin, Wide
layout-wm <-- Wide, Medium
layout-mw <-- Medium, Wide

By placing the code in a conditional statement and using private tags you can change the layout of pages or entries just by setting a tag.

Creating a Clickable Header in Movable Type

2008-10-25T14:40:02Z

A question that comes up every so often on the Movable Type message boards is how to create a clickable banner that links back to the blog homepage. The answer depends very much on how the banner has been added to the page. One way is an img link in the HTML, this can be wrapped in an anchor tag the same way as any other link. Below is a sample Banner Header template that does just that.

<div id="header">
<div id="header-inner">
<div id="header-content">
<mt:Ignore><!-- Use h1 and h2 html tags on the main index of the blog as the title, use divs on all other pages where there are page titles. --></mt:Ignore>
<a href="<$mt:BlogURL$>" accesskey="1"><img src="<$mt:BlogURL$>header.jpg" alt="<$mt:BlogName encode_html='1'" height="150" width="900"/></a>
<mt:If name="main_index">
<h1 id="header-name"><a href="<$mt:BlogURL$>" accesskey="1"><$mt:BlogName encode_html="1"$></a></h1>
<h2 id="header-description"><$mt:BlogDescription$></h2>
<mt:Else>
<div id="header-name"><a href="<$mt:BlogURL$>" accesskey="1"><$mt:BlogName encode_html="1"$></a></div>
<div id="header-description"><$mt:BlogDescription$></div>
</mt:If>
</div>
</div>
</div>

A lot of the default templates that come with Movable Type use CSS to place a header image on the page. If this is the case you will need to use a little piece of JavaScript to achive the same effect. Below is a modified Banner Header template.

 <div id="header" onClick="window.location='<$mt:BlogURL$>'">
 <div id="header-inner">
 <div id="header-content">
 <mt:Ignore><!-- Use h1 and h2 html tags on the main index of the blog as the title, use divs on all other pages where there are page titles. --></mt:Ignore>
 <mt:If name="main_index">
 <h1 id="header-name"><a href="<$mt:BlogURL$>" accesskey="1"><$mt:BlogName encode_html="1"$></a></h1>
 <h2 id="header-description"><$mt:BlogDescription$></h2>
 <mt:Else>
 <div id="header-name"><a href="<$mt:BlogURL$>" accesskey="1"><$mt:BlogName encode_html="1"$></a></div>
 <div id="header-description"><$mt:BlogDescription$></div>
 </mt:If>
 </div>
 </div>
 </div>

All we have done is add an onClick event to the header. Users that click in the header will then trigger the JavaScript which mimics clicking on a link.

So You Want To Write A Movable Type Plugin?

2008-10-18T13:21:36Z

One of the great things about Movable Type is it's flexibility. Behind the scenes is a powerful system that can be used to expand the functionality offered, plugins. Six Apart have run some training courses on Hacking Movable Type, the presentations for this two day course have now been put up on slide share and are a useful resource for those wishing to understand the how to write a Movable Type plugin. I will be using these as part of a series of posts on creating some simple plugins, these will provide a friendly front end to features that can otherwise achieved through template code.

Hacking Movable Type Training - Day 1

View SlideShare presentation or Upload your own. (tags: movable type)

Hacking Movable Type Training - Day 2

View SlideShare presentation or Upload your own. (tags: movable type)

Learning to Share

2008-09-21T18:43:06Z

Today I have added functionality to this site and to Darren Kenny Paralympic Cyclist that makes it easier for visitors to share the love and add links on facebook, email to friend or just plain blog about it.

A little research showed that there were two main sites offering tools to enable this; AddThis and ShareThis. Both have JavaScript that can be added to a page to include a sharing button, both allow some customisation and both can provide user stats. In the end I went with ShareThis for one simple reason, this site was up.

The original plan was to test one tool on each site, leave them running for a month or so and compare results. I had registered with both sites earlier in the week as I had wanted to look at the JavaScript and the options available. When I went to AddThis there was no indication on the home page that they were performing maintenance, nothing in the blog and they hadn't emailed me. You just get a simple unstyled page telling you to come back later when you go to your account.

To add the button was easy

Register on ShareThis
Get button code
Create a Module template called ShareThis
Copy code into template and save
Go to the Entry template and include the ShareThis module where you need it

<$mt:include module="ShareThis"$>
Do the same with the Entry Summary template
Rebuild site

What has been happening

2008-09-10T20:15:36Z

The last week or so I have spent time on upgrading by brother's site to run on Movable Type 4.2. The previous site was still running 3.6 with heavily customised web templates that made me put off upgrading until the last minute, literally.

The first thing I did was upgrade the back-end, that was easy. The difficult part was that my customised templates did not have any comment code in and I wanted to add commenting ready for the start of the Paralympics games, I was left with no choice but to style the existing templates to match the old style as closely as possible. In the end the new templates went live during the Paralympic opening ceremony. So I give you version 1 of the new style for Darren Kenny, Paralympic Cyclist. There are a few tweaks to do with the styles before I will be happy.

Upgrading the site has given me a lot of material to write up, so before the end of September I will being a series of articles on customising the MTOS classic blog templates, so stay tuned.

Almost Recent Entries

2008-08-28T20:43:43Z

There are some things about blogging that just doesn't make sense, take recent entries as an example. On the front page you have maybe your last 10 posts, next to that you have a recent entries widget showing your last 10 posts, what is the point? Shouldn't it be a teaser to additional content?

The code below is a replacement for the recent entries widget code, Included on the front page it will show the previous 10 entries following the last entry on your index page. While on your archive pages it functions as a 'normal' recent entry widget.

<mt:If name="main_index">
<mt:SetVarBlock name="entryOffset"><mt:EntriesCount></mt:SetVarBlock>
<mt:else>
<mt:SetVarBlock name="entryOffset">auto</mt:SetVarBlock>
</mt:If>
<mt:If tag="BlogEntryCount">
    <mt:Entries lastn="10" offset="$entryOffset">
        <mt:EntriesHeader>
<div class="widget-recent-entries widget-archives widget">
    <h3 class="widget-header">Recent Entries</h3>
    <div class="widget-content">
        <ul class="widget-list">
        </mt:EntriesHeader>
            <li class="widget-list-item">
                <h4><a href="<$mt:EntryPermalink$>"><$mt:EntryTitle$></a></h4>
                <p><mt:EntryBody words="25" convert_breaks="0" />...</p>
            </li>
        <mt:EntriesFooter>
        </ul>
    </div>
</div>
        </mt:EntriesFooter>
    </mt:Entries>
</mt:If>

Templating Tricks: Movable Type to Rich Text

2008-08-27T19:32:34Z

A few years ago Six Apart's Anil Dash posted this article about using Movable Type to generate a Word document of your blog or part of it. It uses WordML to generate a Microsoft Word 2003 formatted documents. This is fine and dandy if you have Word, but what if you don't?

As Anil's post shows, it is very easy for Movable Type to generate any document type that you know the specification, so lets give it a go with another ubiquitous file format; Rich Text Format, the full specification can be downloaded from Microsoft

Below is a simple template which outputs a Rich Text Formatted file showing the last 5 entries from your blog.

{\rtf
{\b <MTBlogName>}
\par
<MTEntries lastn="1">
Author: <MTEntryAuthorNickname encode_xml="1">
\par
Modified: <MTEntryModifiedDate utc="1" format="%Y-%m-%dT%H:%M:%SZ">
\par
</MTEntries>
\par
\par    
<MTEntries lastn="5">
{\b <MTEntryTitle>}
\par
<MTEntryBody  convert_breaks="0" remove_html="1">
\par
\par
</MTEntries>
}

you need to create a new custom index template and paste the above code in. Set the output file to recent.rtf. When this template is published it generates a rich text format file at your blog root that contains the last 5 entries in your blog.

This technique can be used for a number of different formats; OOXML, LaTex or OpenDocument for example. It can also be expanded to include a list of recent comments or limit the report to specific tags, categories or keywords.

Creating a Buzz with Yahoo Buzz

2008-08-26T19:24:28Z

Recently Yahoo have introduced Yahoo Buzz, a social news site, similar to Digg. Yahoo determines the most popular search topics and then, we showcase the most popular stories within those topics, based on activities like voting and emailing stories to friends.

If you want people to be able to vote, you need to add a button to your page, Yahoo has a list of button code, but to make the system really fly you can add extra post information that will get submitted. This is easy to do in Movable Type, first we need to create a new module template called Yahoo Buzz and past the following code into it.

<script type="text/javascript">
yahooBuzzArticleHeadline = "<mt:EntryTitle>";
yahooBuzzArticleSummary = "<mt:EntryBody words="15">";
yahooBuzzArticleCategory = "<mt:EntryCategory>";
<mt:EntryIfTagged tag="@text">
    yahooBuzzArticleType = "text";
</mt:EntryIfTagged>
<mt:EntryIfTagged tag="@image">
    yahooBuzzArticleType = "image";
</mt:EntryIfTagged>
<mt:EntryIfTagged tag="@video">
    yahooBuzzArticleType = "video";
</mt:EntryIfTagged>
    yahooBuzzArticleId = window.location.href;
</script>

<script type="text/javascript"
    src="http://d.yimg.com/ds/badge2.js"
    badgetype="large-votes">      
</script>

save this and then open the entry template, scroll down until you find

 </mt:EntryIfTagged>

and after that add

 <mt:Include module="Yahoo Buzz">

rebuild your site and each entry should now have a Buzz button at the end, just before any comments.

You set the category as you would normally do in Movable Type and you set the Article Type through the use of private tags (@text, @image, @video).

This is a first draft template and a little rough as stories can only have one category. Ways to improve / change this would be to have custom fields to store Category and Article Type.

Site Upgraded

2008-08-25T21:18:18Z

As regular visitors may notice, the site has changed slightly. After upgrading to Movable Type 4.21 I took the opportunity to try out the Mid-Century template set by Jim Ramsey . Over the next month I will give it a few tweaks to personalise the design.

The upgrade went smoothly, just ftp'd the files over the top of the existing installation. I also upgraded www.darrenkenny.co.uk, you won't see any changes to the design at the moment, but again that will be happening soon.