One of Textpattern’s great features is the ability to use a different ‘form’ (the template that specifies how posts are marked up) that each post uses. With this in mind, all you need to do is create a different article form called ‘hReview’ and specify that any time you do a review on a Textpattern blog.
I’ll come to the actual markup of the form in a moment, but first I just want to show you how I’ve used the Content > Write tab to write the review.
In this example, all I added were 2 custom fields (via Admin > Preferences > Advanced), ‘URL’ and ‘Rating’, but you may want to add more for fields such ‘Item Type’.
Then I entered the review as follows:
TXP Field name
Microformat Class
TXP Tag
Title
Item
<txp:title />
Excerpt
Summary
<txp:excerpt />
Body
Description
<txp:body />
Article Image*
Photo
<txp:article image class="photo" />
Rating (custom field) **
Rating
<txp:custom_field name="Rating" />
URL (custom field)
URL
<txp:custom_field name="URL" />
*The Textpattern ID of the image
**Entered as a number from 1-5
I then chose ‘hReview’ from the ‘Override form’ dropdown before publishing. However, you can’t choose that until you create the form, so let’s get down to the nitty gritty! Create a new form called ‘hReview’, choose ‘article’ from the type dropdown, and add the following code:
A lot of this is self-explanatory. The review description is output wherever you put <txp:body />, the item name is output wherever you put <txp:title />. There are a few places where it’s probably worth talking through what’s going on.
Date
The txp tag @23.01.07 has an attribute “format” which allows you to customise the date using PHP’s strftime strings:
Doing this uses the published time information and displays in ‘human readable’ form:
< txp:posted format="%B %e, %Y" / >
as well as ISO for the title attribute:
<txp:posted format="%Y%m%d" />">
Handy if you also want to use Textpattern to display events in hCalendar format (which I’ll cover in another post).
Rating
Whatever number is entered into the Rating field is output in the title attribute as well as the text:
<p>Rating: <span title="<txp:custom_field name="Rating" />" class="rating"> <txp:custom_field name="Rating" /></span> out of 5</p>
There are other possibilities here, such as: class="rating star<txp:custom_field name="Rating" />" and then using image replacement to style the span with the resulting class name (star1, star2 etc.). The hReview creator suggests using HTML entities to display a star rating, for which we’d need to use the conditional tag <txp:if_custom_field>, e.g:
This is what I used on the first review, but as Mr Oxton pointed out, this isn’t very ‘human readable’ to things like screenreaders, so I intend to implement the image replacement/class method above.
It’s a wee bit of sweat to set it up, but you have, you’ve got a form that can be called up anytime you want a review on your site to be marked up as a hReview!
Back when Texpattern was still gestating, many plugins were written to fill holes in its templating options, but its come a long way since then. Every day I’m finding new tags that allow me to keep plugins down to a minimum.
If you haven’t already, you really need to bookmark these pages: Alphabetical Tag Listing and Attributes Cross Reference on the Textpattern wiki documention, called “TextBook”. This an amazing resource, especially if you adopted Textpattern back in the days when it had no documentation. There are lots of gems in here, so I thought I’d dig some out, in case they’re new to you as well.
Conditional Comments
I think the area where the 4.0-4.02 releases really shone were in the wealth of conditional tags. Here’s an example:
There are also conditional tags to test for categories, comments, whether comments are open, whether you’re viewing the last article and more. Check out all the tags that start with txp:if_ on the list. The section conditionals are very handy, as you can specify either a single section, or a range (make sure that you don’t have any spaces inbetween the section names, just commas). Here’s one from my templates:
I use this one to output the correct submenu in each section. If you want to specify the homepage (or ‘default’ page as its known), leave the attribute blank like so:
Also Very Useful™, are the custom field conditionals. In my portfolio section, some of the entries are websites and have a URL associated with the information. This is done using a custom field (set up in preferences > advanced preferences) and used in the article form like this:
This creates a link to the site around the main portfolio image.
Finally, to complete the usefulness, the devs have added a <txp:else /> conditional, to help keep code down. Here’s an example:
<p>
<txp:if_excerpt>
<txp:excerpt />
<txp:else />
Sorry, I couldn't be bothered to write an excerpt...
</txp:if_excerpt>
</p>
Permalinks & Single Tag mode
Until recently I was using the zem_link plugin to allow custom class names and title attributes on permalinks. It was one of the things that I didn’t like about TXP compared to Moveable Type – it outputted the XHTML for you. However, I found this on the description page for the permalink tag:
By default permlink returns only a very basic link, which doesn’t allow for customizing the link title, or adding a CSS class, etc. Using the tag in its Single Tag capacity opens up a lot more possibilities. For example, to have the permanent link have an HTML title attribute of the article’s title, and also apply a class to it named “orange”:
Thats what I’ve been wanting! I had no idea that the tag could be used that way.
Offset
Another feature I missed from Moveable Type days was the ability to output a list of articles, offset by a specified number first. This is now part of the article tag attribute options:
I use this on my journal homepage, showing the last 3 posts in full, and then the 5 posts thereafter as just links. The list of previous articles can now exclude the last 3, as these are shown in full. For individual article pages however, we need to show all the articles, so of course I use conditional tags :
Which neatly wraps it all up! One of the reasons I love Textpattern over other options so much, is its templating tags. The xml style makes so much sense, and easy to grasp.
In Textpattern notes parts 2, and 4 I explained how to hack TXP’s comments system to acheive certain effects. A lot has changed since then (especially with v4.0), and I need to update the methods. I’m now running TXP with no hacks whatsoever, and that’s a very good feeling™.
So lets run through those old hacks:
Step 1,4 & 5 – Changing the preview method, and integrating live Textile previews
I didn’t like having to preview the comment on a separate page (although this is a good spam-saving measure). I wanted to give users a live preview and allow them to submit their comment straight away.
These steps are now all combined within one plugin: nhn_livecommentpreview
It’s worth pointing out, that even with this safety feature removed, I only get comment spam at the rate of 1 every couple of months.
Step 2 – changing the comments to display as <div>’s rather than <li>’s
Simple. Go to Admin > Preferences, and under the ‘Comments’ section. click no to “Present comments as a numbered list?”. You’re now free to wrap your comment markup in whatever takes your fancy.
Step 3 – alternating background colours and sequential numbering
These steps can still be done with php, but for an easier life, I use ajw_comment_num (Allows for outputting current comment number) and ajw_comment_alt 0.3 (Alternates output based on even- or odd-numbered comments) by Andrew Waer
Step 6 – Adding an article link to the notification email
Now in TXP as of 4.01!
See how much easier it all is? Thanks to all the TXP and plugin developers for making my life so much easier.
With the next Textpattern notes, I’m going to look at some of the new tag goodness, especially the new conditional tags…
That last post got me thinking. My ideal text editor for OS X is out there, but all the elements I want are in different apps! If I could somehow melt these bits together (like melting 4 chunky kit-kats together and pretending they’re the old style kit-kats), these are the ingredients I would use.
SubEthaEdit’s collaboration ability, split-view, web preview (just prefer it to Textmate’s), code navigation and general cocoa feel. Textmate allows you to navigate the code, but its a separate window. skEdit puts its navigation menu in the toolbar (where it should be), but SubEthaEdit’s implementation includes icons that find easier to scan.
skEdit’s code hinting, colour blender and project management. Its code hinting makes writing CSS and HTML so quick and painless, and its the only one that allows you to create a list of projects to open. In Textmate, I’ve got around this by keeping a folder of aliases to ’.tmproj’ files in my dock for quick and easy project opening.
Textmate’s project drawer, code-folding, bundle editor and CSS & HTML validator. skEdit has snippets, but Textmate takes this much further with its bundle editor. Unfortunately, Textmate doesn’t use a standard cocoa textfield, so services items such as lipServiceX’s Generate Lorem Ipsum aren’t accessible.
With the exception of a built-in Textile filter (which can be added in Textmate, as Drew shows), this would do me nicely thankyou!
Please, don’t start talking Vim or Emacs to me. It always happens when I mention text editors, and It’ll just fall on deaf ears. Hopefully from reading the list above, you’ll get the impression that I’m just not a vim kind of guy! ;o)
One of the most frequent questions I get asked about my Textpattern setup is how I do change content per article on the journal homepage. The majority of the time I have excerpts of each article with a link to read the full article, but sometimes I have very short articles that are shown in their entirety, and these just have the link for ‘Permalink’.
Its a feature of TXP that a lot of users I’ve come across don’t use. Next time you’re in your ‘write’ tab, look on the left under ‘advanced options’. That drop down called ‘override form’ will allow you to alter the display of the content per article.
Here’s how I use it:
I have a default article form for displaying posts on the journal front page. This outputs a title, link to full article and the excerpt. Here it is in cut-down form:
<h2><txp:permlink><txp:title /></txp:permlink> <txp:posted /></h2>
<txp:if_article_list>
<p><txp:permlink>Read the full entry</txp:permlink>
<txp:excerpt />
</txp:if_article_list>
(The conditional comments <txp:if_article_list> mean these only show up on the homepage)
I also have another form, which uses similar markup, except that I use the whole body of the article, not just the excerpt. The link text changes to reflect this, so ‘Read full entry’ becomes ‘Permalink’. Here’s the cut-down version of that form:
Then when I have just a small article to post, I just choose the relevant form from the ‘Overide form’ list. This overrides whatever you’ve set in your page template, not just if you’ve left it to use the ‘default’ article form. This isn’t really stretching its possibilities, and I’d love to know what, if any, ways you use this feature.
When I last explained how to hack Firefox to get Safari style tabs, there was a missing element – close buttons on each tab. There is an extension to do this called Tab X, but it only seems to work on the Mac when using certain themes, not including the default mac theme. Fortunately, a nice fella called Chad has now created a mac version, which you can install directly from here, and it works a treat.
There are just a few fixes that need to applied after this. I couldn’t get the preference to hide the tab-bar close button to work. No problem, this just gets added to the userChrome.css file:
/* Tab X mods <strong>/
/</strong> ------------------------------------------------------- <strong>/
.tabs-closebutton-box { /</strong> hides the tab bar close button */
display: none !important;
}
Also, when used with the Safari tab styling, the position of the close button is a little too high, but this sorts it out:
Finally, a separate problem I’d come across was with site favicons. Sometimes I’d get a favicon 16px high but 32px wide – presumably when the 32×32px resource was included in the favicon. This sorts that out:
One of my bones of contention with Textpattern is that it still doesn’t support XML-RPC, allowing the use of a desktop weblog editor (although Dean has promised this for a while). However, thanks to Chris Mcleod, you can now get it up and working with Ecto and MarsEdit. I’ve had problems getting Textile previews to work in these apps, and wanted to share here the solutions in case anyone else has been in the same boat.
MarsEdit
Thanks to Brent Simmons and Brad Choate, who spent time finding a way to trick MarsEdit into thinking its using Markdown, but it is in fact using Textile. What follows are Brent’s instructions:
Quit MarsEdit if it’s running.
Go to the TextFilters folder at ~/Library/Application Support/MarsEdit/TextFilters/
In the plugin folder—in extlib/Text/—you’ll find a file named Textile.pm. Put a copy of it in your /Library/Perl/ folder. (You may need to set execute permissions for Textile.pm. I did, though I’m not sure it’s necessary.)
In the plugin folder—plugins/—you’ll find a file named textile2.pl. Copy it into ~/Library/Application Support/MarsEdit/TextFilters/Markdown/.
Download and unzip this Markdown.pl file and drop into that same Markdown folder.
Make sure Markdown.pl and textile2.pl have execute permission.
Open Terminal and tell MarsEdit to always use Markdown for previews: defaults write com.ranchero.MarsEdit previewWithMarkdownAlways YES
Done! Its a little roundabout, but once setup, you can forget about it. Thanks Brent!
Ecto
With Ecto, the process is a lot more straightforward. When you add your Textpattern blog to Ecto, choose ‘Movable Type’ as the ‘system’, and then when you write posts in HTML mode, the Textile option becomes available in the options drawer, under ‘Formatting’ tab, in the ‘Format’ drop down menu. Now select ‘Make Default’ to make it the last time you need to do that.
As for which I will use for writing my blog posts, I’m not sure. I’m just enjoying in the fact that I can use both at the moment.
What these won’t do
Obviously there are a number of custom Textpattern options that neither of these apps will cater for. So far I’ve been using MarsEdit for the last 3 posts, and the only thing I have to do is go into my textpattern admin and turn on comments for each entry. Ecto doesn’t have this problem however, so I’m now giving that a spin. Maybe once Textpattern 1 final is released and gains populularity, there will be more support for Textpattern options in future versions of these apps.
OK, time for some survey results. The scores are fairly accurate – give or take the odd distraction from Little Britain. Thanks to everyone for particpating!
App for comps:
( yeah, yeah, yeah, you all use paper and pencil first! ;o) )
Photoshop
44
Fireworks
37
Illustrator
10
Freehand
3
Gimp
3
Xara X
2
With 1 vote, Powerpoint , Quark Express 1 and MS Paint 1 (nice one John!)
With one vote were: TideText, HyperEdit, Syn, CSSEdit, EditPad Lite, SlickEdit, TSW Web Coder, Arachnophilia, Ultraedit, Notetab, Quanta, Omniweb, Code-Genie, Phase5, GoLive, KATE.
BTW: I’ve lots of suggestions for future surveys. I’m loathe to do them, as it would just get too tiresome, and these were the 2 subjects I wanted to know about. I feel I have to earn the right to do another lazy post, er, I mean survey.
Update – For various reasons I’ve decided to keep going with my Textpattern version, but the information is here if you need it. Word of warning though – make sure you know what you’re doing with the cache.
I’ve just moved my sidenotes links from the inbuilt textpattern system to de.licio.us, a service I’ve been using more and more over the last couple of months. There was nothing wrong with the Textpattern method, its just that using de.licio.us makes these links a little easier to find again. Now I post my sidenotes using Cocoalicious, a beautfully simple cocoa interface to the de.licio.us api. If the site I want to post is in Safari, I just select ‘New post from Safari’ in Cocoalicious, and it pre-populates the fields. Each tag in de.licio.us can have its own RSS feed, so all that was left was how to integrate the links on my journal pages.
This was solved by an article by Richard Eriksson, and here are the steps I took:
Started adding links with the tag ‘notes’, making sure that I added a wee description at the same time.
Uploaded the Magpie RSS Parser to my server, adding a sub-folder called ‘cache’. By default, Magpie will cache the rss feed (if you’ve setup a cache folder) for an hour, so the de.licio.us server doesn’t get hit at every page load.
Uploaded a new php file with Richard Erikssons’ code. All I had to add was the correct username (in this case, adding /notes/ on after that), and ensuring the path to the Magpie parser was right.
include the php file into journal pages. job done.
Finishing off the hacks to the comments.php file in Textpattern (see also TXP notes 3)textpattern-notes-part-3 is the introduction of a small feature from MovableType that I miss. When receiving email notifications of comments, they always had the relevant entry URL in them. You see the comment and want to reply, so just click the link to go straight there.
Here’s how to do this in TXP. In publish/comment.php find this line near the end (should be line 374 if you haven’t already hacked it):
<pre>
$out = "Dear $RealName,\r\n\r\nA comment on your post on your post \"$Title\" was recorded.
</pre>
Change it to this: <pre>
$out = "A comment on your post \"$Title\" (http://www.sitename.com/blog/$parentid/ ) was recorded.
</pre>
Just change the URL to suit your site, and the parentid will add the relevant id into the URL. Incidentally, if you’re upgrading textpattern to the latest RC, and you’ve installed these hacks, then you just need to change 1 line of code in order to keep your customised version.
***
Integrating Textpattern with Photostack was another goal. I wanted to keep all my ‘include files’ (footer, navigation etc.) as forms within Textpattern, as this makes life so much easier. However, I also want to insert these in pages outside of Textpattern. To do this, open up the index.php file in Photostack, and change the small chunk of php to read:
<pre><?php
// include Textpattern first
include '/full/path/to/textpattern/config.php';
include $txpcfg['txpath'].'/publish.php';
ob_start('parse');
// Then pull in the photostack.php program.
include("photostack.php");
// Load photostack.
load('config.php');
?>
</pre>
And then all your Textpattern tags, such as <txp:output_form="header"> will parsed. This also works for static pages.
Finally, I’ve only recently discovered what ‘override form’ in content>write>advanced options can be used for. I now have 2 forms for using with entries, a default one which only displays an excerpt on the main journal page (for long entries), and another which displays the full entry (for very short entries). I can then choose to override the default when posting or editing an entry for instance, when the entry is short. If the option to override form isn’t visible (under ‘Advanced Options’), the you may need to open up textpattern/lib/admin-config.php and change the ‘allow_form_override’ to equal 1.
The massive trend of centering content horizontally brings with it a small problem. When moving from pages with short to long content, a nasty shift happens in Opera, Mozilla and Safari as the window makes room for the scrollbars. The only way to avoid this is to force scrollbars to appear all the time.
Here are a few solutions, and as you would expect, they each have their own pros and cons:
html>body { height: 800px; }
For: Simple, and works in most situations. This is the one I tend to use. The First-child selector hides the rule from IE windows that always adds a vertical scrollbar gutter anyway. Against: Doesn’t work on large resolution monitors. Also, where it does add scrollbars constantly, there may be no content to see. Possibly confusing for users.
html>body { overflow:scroll; }
For: This does a better job at being less confusing. In Safari, this just adds scrollbar gutters, in others it adds scrollbars, but with a very small overflow length. Therefore, doesn’t confuse users with scrollbars for no content. Against: It looks damn ugly as it adds horizontal scrollbars as well as vertical.
This technique was found at the Web Standards Awards. I haven’t tried this one out yet, but on the face of it, it looks like an over-complication.
Update
Thanks to Patrick Lauke who came up with this genius solution:
html { height: 100%; margin-bottom: 1px; }
This adds a tiny amount of vertical scroll (1px no less), so users won’t think that there is content that they’re missing. This will also work on any resolution screen. I’ve tested this in Safari, Omniweb 5, Firefox on OS X, and it works like a dream! The only browser I could find that had a problem with it was (guess!) IE 5 Mac.
I’ve only recently discovered the power of Mozilla’s ‘user content’ files that reside in the profile directory. I’d created a user.js file to add preferences for things like pipelining, but I’d never looked into the others – ‘userChrome.css’ (for tweaking the interface), and ‘userContent.css’ (for tweaking the web page display).
Here are the tweaks and customisation that I’ve done to my copy of Firefox to give you an idea. First of all, make life easy for yourself and install Chris Neale’s ChromEdit extension. This allows you to edit the user files from within Firefox. Once you’ve restarted, ‘Edit User Files’ will appear under the Tools menu.
userChrome.css
Firefox is a an XUL application which means that the display of the interface is controlled by the same CSS we all know and love. The only real hard part is finding the name for each element – something that DOM Inspector tool is good at revealing.
Copy and paste this first example into userChrome.css, and the changes will take effect when Firefox is restarted.
download {
border-bottom: 0px !important;
}
This removes the dashed line beneath each item in the Download Manager. By giving the rule priority – !important; – we can make sure that this overrides rules in the default theme. This one prevents the ‘throbber’ (spinny thing on the OS X toolbar) from displaying, something thats hard to get rid of:
#throbber-box {
display: none !important;
}
This also makes it easy to make small interface tweaks without having to create a special theme. In order to know what rules to overide, you might find it easier to find the classic.jar file inside Firefox>Contents>MacOS>Chrome and unzip it. This is where all the pinstripe theme CSS is kept.
Here, I’ve changed the appearance of the tabs slightly with new images to make the corners less rounded.
Place the images into your Firefox profile directory:
(users> you> Library> Application Support> Firefox> Profiles> yourprofilenumber> chrome>).
userContent.css
With this file, we’re going to try and improve Firefox OS X’s form widgets. If you’re unfamiliar with the term ‘widgets’, it refers to the various form elements – input, textarea, select etc. These aren’t native in the OS X version, and they may never be, but here are some rules that you can drop into the userContent.css file to improve the form buttons a little:
Unfortunately, the aliasing on a Mac is a bit ropey, so keeping the border quite light helps to hide this a little bit. Its something that I’m sure someone can take further, but at least its an improvement on the older PC style widgets. (Anyone know of a way of applying a background image to an ?!).
I’ve also had a go at form fields, but there is less you can do with these. If you use these rules then at least they don’t have that harsh appearance:
Its been a sort of Holy Grail for me (well maybe a Holy Teacup) to find a solution the IE Whitespace bug. If you’re not familiar with this, then you probably haven’t applied display:block to links within an unordered list. Adding this CSS property creates a solid ‘button’ out of what would’ve been a humble inline link, one that can be sized and prettied up as you like. The trouble is, IE windows adds another line height between all these links – unless you remove every bit of whitespace from the HTML.
So, in effect, there is already a fix to this, but it’s not a convenient one. Editing a menu that’s all on one line isn’t my idea of an easy life. Each time I would have to take the file into BBEdit, reformat the code to be ‘Gentle Hierarchal”, make my edits, and then reformat as ‘compact’.
I’d tried various fixes, one that added a negative top margin (overruled for decent browsers by using a first-child selector) worked in 5 & 6, but not 5.5. Then I started dreaming up some php that would strip the whitespace at the server side, but that was too much for my small head.
Now, excuse me if I’m late to the party, and everyone has already discovered the solution to this, but its actually rather simple. Here’s a cut down example:
ul a {
display: block;
float: left;
clear: left;
}
Suddenly, IE 5+ does what it should, and the ones that got it right in the first place just put up with it without a fuss apart from Mozilla. If you find that the menu items are all over the place, add something like this:
li>a {
float: none;
}
The first-child selector means that IE won’t see this rule, but everyone else will.
Those of you who are registered users of Saft will now have the latest preview version with the new sidebar feature. The plugin nature of the sidebar (each panel can be a web page, perl script or shell script) has got me wondering about what useful little widget I could put in there.
Here’s my first idea. After hacking the excellent Feedonfeeds news aggregator script, I’ve made a little OS X style RSS sidebar. Feedonfeeds is a php/MySQL solution that you can install on your site, rather than using a desktop client. From here I can click the unread number to view the latest feeds, the grey number to see all the recent entries, and the blog name to go straight to the site. The first 2 open in a simplified format – very like the RSS Reader/Sage extension for Firefox, and the upcoming Safari RSS reader.
All the menus are faked with CSS, but it helps it look like its part of the browser, rather than a separate web page:
(It makes it so much easier when you’re writing CSS for just one browser!)
The advantage of a browser based, non-local solution is that its always up to date. I can access it from anywhere, and pick up where I left off. Downsides? Just one so far – It isn’t as good as NetNewsWire at detecting feeds. Where the XML has errors it just gives up. I’m giving it a trial for a while, I’m not sure yet whether it would replace NNW. After all, NNW 2 is going to be introducing a sync feature – great if you use more than one machine.
If this looks like the kind of thing you’d like to use, let me know. If people are interested, I’ll clear it with the creator before uploading the additonal files to create the sidebar.
Next, I think I might have a crack at creating a plugin similar to the Web Developer Extension for Mozilla and Firefox.
Please note the information in this entry is now superceded
For the second of my notes on Textpattern conversion, I’m going to cover just one subject : hacking the txp comment system.
Purpose of this hack:
Change the recorded comments to display as <div>’s rather than <li>’s, with alternating background colours and sequential numbering. Change the comment form to allow live previews to be used.
What you need to know first:
Upgrading Textpattern is a simple process, you simply upload all the new files (apart from the config.php file) and load _update.php in your browser to make sure all your database tables are updated. Its so quick. What I’m doing here is hacking the /textpattern/publish/comments.php file – a lot. This means that when you update, you’ll have your work cut out for you.
Still want to do it? Make a backup of that comments.php first, and then read on.
Background:
Textpattern, handles commenting a little differently to systems like Movable Type. A lot of the work is carried out behind the scenes, away from the page templates and forms, making personalisation harder. The comment form is laid out in presentation>forms>comment form, the display of comments is found in presentation>forms>comments. Then, as long as you have the <txp:comments_invite /> tag inside your article form (presentation>forms>default), Textpattern will add these elements together, along with the preview and remember details functions.
Step 1 – Change the existing preview method.
Dean Allen designed txp’s preview-first/submit-last routine to avoid spam flooding. This hack removes that safety net, and allows comments to be submitted directly, but I think this is less annoying for users. If we want to implement live comment previews, we have no choice – it has to go.
Step 2 – changing the comments to display as <div>’s rather than <li>’s
I wanted to do this in order to have more control over my CSS. The ordered lists add comment numbers without any fancy coding, but restrict what markup can go inside the comment, and how much can be changed with CSS. Changing it to <div>’s gives that flexibility.
Still in /textpattern/publish/comments.php find the following code (around line 34):
f ($darr) {
$out.= '<ol>'.n;
$out.= formatComments($darr);
$out.= n.'</ol>';
}
There are 2 php values in here, which we’ll use in the next step:
Step 3 – alternating background colours and sequntial numbering
Obviously, I can’t use the MTFlipFlop plug-in here, so I had to find a different solution. There’s also no tag in txp to output a comment number (because it used the ordered lists – which I removed!).
Once you’ve set up your 2 CSS classes for the alternating rows (I’ve used ‘odd’ and ‘even’), find the end of the php function – function formatComments($darr) (around line 75) and insert this code:
// set up div class and numbering
$class=odd;
$cno=1;
These are our 2 values, $class for inserting the div class, and $cno for the sequential comment number. Then, returning to the line where we changed the <li> to a <div>:
If users have already been on your site, chances are that a cookie has been set, allowing their details can be inserted automatically. By hard coding the name input, we have to do a bit more jiggery-pokery to get this working again. When we changed the <input> tag we added value="<?php echo $aname; ?>". This will output the cookie value into the text field, but we also need to grab the cookie values. To do that, place this somewhere above the form (I put this at the very top of my page template):
<?php
$aname = $_COOKIE['txp_name'];
?>
(Thanks to Justin for that bit). Then, still on that page template, you just need to add the preview div at the bottom, after the <txp:article /> tag:
The conditional tags stop the preview being displayed on the homepage where there are a number of articles, restricting it to a single entry page.
Step 5 – Textile preview
If you want to really finish things off, how about implementing Textile parsing in the preview? Jeff Minards javascript solution does exactly that, based on code by Stuart Langridge. Its genius!
You’re done at last. Have a drink, you deserve it!
As and when I get time, I’m going to post some more information about this site’s conversion over to Textpattern. I’m going to evangelise it until I’m blue in the face.
There were quite a few little tweaks I had to make, but here are just a few notes to be getting on with…
Clean URLs for the news feeds
Create your folder structure (such as /feeds/rss/) and place the following code in an index.php file in that last directory:
Just replace ‘rss’ for ‘atom’ if you need that feed too. I’ve also specified that the feed should come from my journal section, but you if you just run Textpattern as a blog you leave this out. Thanks to Drew McLellan of Allinthehead for this one.
Shortstats
In order to get Texpattern and Shaun Inman’s Shortstats working in harmony, I placed the shortstat include at the bottom of each of the section text files in the root. For example, in the ‘article’ file you would have :
<?php
include "./textpattern/config.php";
$s = "article";
include $txpcfg["txpath"]."/publish.php";
textpattern();
include($_SERVER["DOCUMENT_ROOT"]."/shortstat/inc.stats.php")
?>
Mixing hard coded and txp driven pages
In the about section, I needed to do something clever for the ‘about hicksdesign’ page, wheareas the colophon and the contact pages would essentially be just articles.
Using the If_category plug-in by Matthew Moss, I set up the ‘about’ section page to show the hard coded content if the category=hicksdesign, and just a plain article for the others:
Lets say you knew someone who could use Flash. They could use use the timeline, animate/tween etc, but really wanted to get to grips with the actionscript side. What book/site/tutorial CD would you suggest they look at? “ActionScript for Flash MX: The Definitive Guide” by Colin Moock looked like a good bet, but please leave thoughts if you have them.
Sorry, its a cheeky use of a blog, but you’re all such nice, helpful people…
Hope you all had a good Christmas! In response to the most queries I’ve ever received about the site (_both_ of Hicksdesign’s readers asked about this one!), here’s an explanation of the live comment previews I’ve started using.
While looking for a solution to MovableType’s cgi-only comment preview pages (cgi means no php includes) I discovered an alternative – live comment previews. An article at Scriptygoddess, explained how javascript can be used to write form information to a <div>, refreshing everytime a key is pressed. It’s pretty basic, no line breaks of html previews, just the raw text, but the <div> could reuse the same CSS as your comments. Leading on from this, there was an enhanced version posted at Glimpse of a Girl which allowed line breaks to be shown.
There are 2 pieces of form information that I needed previewing – the author’s name and the comment body. As author names won’t need line breaks, I’ve used the simpler version for former, and the enhanced version for the latter. Here’s the complete set, with the <id> changed to suit Movable Type’s defaults of ‘text’ and ‘author’.
// live comment preview - comment body
function ReloadTextDiv()
{
var NewText = document.getElementById("text").value;
splitText = NewText.split(/\n/);
var DivElement = document.getElementById("TextDisplay");
var i = 0;
DivElement.innerHTML = '';
for(i = 0; i < splitText.length; i++) {
if(splitText[i].length > 0 ) {
DivElement.innerHTML += splitText[i] + "<br />";
}
}
}
// live comment preview - author
function ReloadNameDiv()
{
var NewText = document.getElementById("author").value;
var DivElement = document.getElementById("NameDisplay");
DivElement.innerHTML = NewText;
}
Then the onkeyup events were added to the relevant form elements:
This just left 2 things. First, as the script relies on the ‘onkeyup’ event, it won’t preview the author name when the ‘remember personal info’ cookie and javascript autofills the form. To get around this, I reused a piece of the Movable Type code to make sure that the name is autofilled in the preview as well:
Finally, it needed the latest date to be added. You can do this with Javascript too, but I’ve used a simple php code. If the format I’ve used doesn’t fit with yours, all you need to do is change the ‘d.m.y’ part. There is a full list of all the formats at php.net.
Posted on <?php $today = date("d.m.y");
print "$today"; ?>
I’ve found the PHP stylesheet switcher from ALA immensely useful, as it also opens up an easy way to provide different content, depending on the style chosen.
For example, to make sure that the navigation is displayed ‘flat’ in the diet version of hicksdesign (by removing the javascript), I’ve used the following php snippet:
If ‘plain’ has been chosen by the user, it inserts the link to an external javascript file containing no menu scripts. If the user has chosen the default, or not chosen at all, it inserts the link to the version that has. (This won’t work in Mozilla if the user changes style using the browser menu). Using the css property display:none will just hide it from view, but this means you can decide what content goes into the HTML before it actually gets to the user.
One of the most frequent questions I get asked about my Textpattern setup is how I do change content per article on the journal homepage. The majority of the time I have excerpts of each article with a link to read the full article, but sometimes I have very short articles that are shown in their entirety, and these just have the link for ‘Permalink’. 
The Icon Handbook is now available! 
Twitter
Flickr
Last.fm
Huffduffer