stillmovingdesign journal

Custom article styling in textpattern

2009-12-17T04:30:00+10:00

I was over at Chris Coyier’s CSS Tricks watching a tutorial on how to style individual articles. He references Jason Santa-Maria’s site as a great example of this.

He also showed off a neat WordPress plugin that let’s you override any base CSS style information to create a different look for a specific article. I had a textpattern screen open in front of me at the time and thought, that’s easy to do.

As Chris explains in his tutorial we want to be able to create a new style for a particular article. So we need to override any base styles that get loaded. So how do we do that? With a custom field of course.

Create a custom field called “style-override”, make it a text-area:

NB: I’m using Gerhard Lazu’s glz_custom_fields plugin in this first example. It’s worth every cent and more. It’ll be used here to create a text area custom field which will give us space to write some code although, ultimately, not entirely necessary for this technique to work.

Head on over to the Write tab and you should see a text-area somewhere underneath the Excerpt field:

So we can enter some CSS styling now:

body {
background-color: red;
}

…but it would be ignored. Textpattern doesn’t know what to do with it.

We know we only want this code to be applied on an individual article basis and that, if we’re good coders, any references to CSS should go in the head of our html.

The code:

If we’re looking at this as an individual article use the CSS from custom field “style-override”.

Whoa there…

But as Chris rightly points out, what if you want to reuse all those styles you’ve lovingly crafted for another post. It doesn’t make sense to copy/paste all that CSS into another article’s custom field. We can reference another CSS file from within textpattern (or externally if you wish. rvm_css is great for this).

Create a new CSS file called “something-specific-to-your-article”.

In the custom field simply add the name of your new CSS file:

The head our code should now look like this:





" />

The key line here is:

" />

Enjoy folks!

Extending textpattern’s code edit windows

2009-11-25T07:10:01+10:00

Love editing code in textpattern? Wish you had more room to write your code?

Go find your default texpattern 4.2.0 .css file located in: /textpattern/theme/classic/textpattern.css

Copy the CSS below and paste it at the end and hit save.

#page-page tr td.column:nth-of-type(2), #page-form #edit tr td:nth-of-type(2), #page-css #edit tr td:nth-of-type(2) {
	width: 80%;
}
textarea#html.code, textarea#form.code, textarea#css.code {
	width: 100%;
}

If you have another txp admin theme enabled it may not work. But you get the idea of what the above code is doing.

Google and the meta tag description dance

2009-09-24T05:34:01+10:00

So we have it from the horse’s mouth that Google doesn’t really use the meta keywords tag in its page rankings. Ok then.

This got me thinking about producing content-specific meta descriptions which are more useful. I’m going to use Tracktime Asia website to illustrate.

In textpattern I use the following approach (along with the great rah_metas textpattern plugin) to output meta description code on a per article basis. BUT what if you’re using sticky articles as ‘static pages’ or viewing an article list? The plugin won’t work in those situations.

One way is to test to see if we’re looking at an article list or not (eg like a News page listing several articles).





 Tracktime Asia, Code: stillmovingdesign"/>

If we’re looking at an article list we output the form called “meta” which contains the code below (simplified for the sake of this example):


 - Tracktime Asia: Corporate Entertainment, Product Launches, Slide Control and Driver Training at Shanghai and Zhuhai." />

You can see that in the code above we’re outputting the Section title too. You could get really fancy here and test for specific sections and output more descriptive information. Like:

Some REALLY descriptive text about the About section!

If we’re not looking at an article list but rather an individual article we want to get specific with the meta description which is where the rah_metas plugin is useful.

...
 Tracktime Asia, Code: stillmovingdesign"/>

In textpattern each article has a custom field called “meta_description” available to it. It outputs whatever is in that custom field. Alternatively, if that custom field is empty it’ll use the default description or – if you ask it to – either the body or excerpt field. It’s really worth a visit to the plugin page and the associated textpattern forum.

I know SEO is a bit of a ‘dark art’ in some ways. The point of all this is to give Google a reason to crawl your site and so it can differentiate between your content. Having a unique description per page might just help it along a little.

On a related note here’s the code I use to generate the browser titles for Tracktime Asia.

Tracktime Asia <txp:if_section name="">| Home <txp:else /> | <txp:section title="1" /></txp:if_section><txp:if_individual_article> - <txp:title /></txp:if_individual_article>

It’s a similar approach.

Update:

You can use the same method to produce the canonical link element in your header. This works in a individual article or ‘sticky’ article section arrangement. It most likely won’t work with categories.




" />

Linky-poos:

Google article

Building Tracktime Asia with textpattern

2009-09-18T05:43:00+10:00

A series of three videos giving a rundown of how the new Tracktime Asia website is put together with textpattern.

See them here or over on Vimeo. If you have any questions post them here. Enjoy.

Part One

Part Two

Part Three

Creating an RSS builder in ExpressionEngine

2009-05-17T11:21:00+10:00

A recent project called for the ability to dynamically create RSS feeds based on user-selectable categories. ExpressionEngine lets you use the ‘category’ keyword to zero in on a particular category (or categories) when creating an RSS feed. In this project we wanted the end user to be able to select from a number of categories to create a custom RSS feed.

Note: This is a simple solution and not particularly beautiful but works well enough (except for Safari). Spaces inserted into the code block below to allow for proper display.

Demo page: http://www.smd.net.au/site/rssbuilder

There are two templates. The first calls up our categories for a particular weblog – in this case it’s our Journal section.


 Journal entries:
 
 {exp:weblog:categories weblog="journal" style="linear" dynamic="off" category_group="2" category="not 18"}
 {category_name}

 {/exp:weblog:categories}

The second template is where our results get pushed. This is where the ugly stuff happens. (Explanation is below the code).


 < h1 >RSS Builder Results
 < ?php
 function curPageURL() {
 $pageURL = 'http';
 $pageURL .= "://";
 if ($_SERVER["SERVER_PORT"] != "80") {
 $pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
 } else {
 $pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
 }
 return $pageURL;
 }
 ? >
 Click below for your custom RSS feed:
 {exp:replace find="http://www.smd.net.au/site/rssbuilder_result/|?cat=|&cat=" replace="http://www.smd.net.au/site/journal_rss/|category/||" multiple="yes"}
 <?php echo curPageURL();?>
 {/exp:replace}

The block of PHP gets the current URL from the browser and is echoed with:


 < ?php echo curPageURL();? >

This is wrapped up in the only third-party plugin you’ll need here, Lodewijk Schutte’s Find & Replace.

This takes the browser URL and replaces it with our RSS url and adds the category keyword. Anything with “?cat” and “&cat;” it replaces with the “|” piping character. Because this is the character used in the plugin we need to use the unicode version of |.

So now our link goes from looking like this:


  http ://www.smd.net.au/site/rssbuilder_result/?cat=7&cat=10

to this link which can be copied into an RSS reader:


  http ://www.smd.net.au/site/journal_rss/category/7|10

Behind New Film Media

2009-03-05T02:39:00+10:00

A new addition to the portfolio is film producer Ben Adams’ New Film Media website. It’s hard not acknowledge Ben’s talents as a producer given some of the work on his site.

It’s a website that I really wanted to do in textpattern, but with the deadline being so tight, unfortunately, I had to put it together as a static site. Rather than use Dreamweaver templates, or even worse, straight HTML, I decided to weave a bit of PHP magic.

So what’s the benefit of using PHP in this case? There are a lot of pages that do essentially the same task – show a video clip. Although there’s a page for each video clip, it’d get uglier to have a page with any repetitive code in it. If you can cut down the repetition and have each page as generic as possible, it will make changing the design easier down the track.

Let’s break down the TVCS page:

Our variables
Header code
Section we’re in
Navigation
Video clip
Credits
Email to a friend
TVC thumbails
Footer code

This is where most of the ‘tricky’ stuff happens. For each page I’m setting a bunch a variables to handle some naming tasks.

$Section: This gets used in the body tag to control the CSS for the navigation li element. The CSS below changes the background position of the image when that element is found under the body id of ‘tvcs’.

$thisPage: Gets passed into the video.php file to tell it what the Quicktime poster frame and video filename is called.

If it’s not obvious, there’s ONE video.php file covering 16 videos. If the client decides that he want to change the video format from Quicktime to Flash at some point, we only to change that one video file and boom, it’s done.

$Title: This gets passed over to email_on.php and the credits_table.php.

$Producer & $Director: Passed to credits_table.php

Email on:

The client wanted to have a mechanism whereby a clip link could be emailed to someone. This uses a mailto: link along with the variables we used previously and and additional piece of PHP.

echo curPageURL();: We’re specifying a link in the email and this inserts the current URL into the body of the email. This has some drawbacks. The viewers email client needs to be set as the default in their browser. The format can also vary depending on what email client you use.

GMail:

Thunderbird:

The ugly bit

That’s about the gist of it. Once I had one page working, it was simply a case of creating a page for each clip. Not the most ideal situation but it was certainly made faster by changing a few key variables at the top of the page. Better this than sifting through an entire page and changing links to filenames. Not being a ‘complete’ php man either, I’m sure there are a dozen better ways to handle this kind of site.

The Big Book series of travel planners

2007-05-02T23:25:00+10:00

A while back, in collaboration with shopfrontdesign, two designers produced nearly 800 designed pages for a series of travel planners called the Big Books. A lot of time has past since producing these publications and now would be a good time to kick back and talk about some of the technology used to produce them.

InDesign all the way

When InDesign came along a few years ago I was a seasoned QuarkXPress (or Quirk) user. Versions 1 and 2 of ID were a bit slow, crashed a fair bit, and were generally difficult to use. But the potential was really there to give Qxp a run for it’s money. Then the Adobe Creative Suite came out with InDesign, Photoshop, Illustrator and Acrobat Pro for less than half of what Quark cost. At last the ridiculously priced, bug-laden and un-progressive Quark had a real competitor. And what a competitor.

The feature list and capabilities of InDesign is long as it’s extensibility. But it was after using an early demo of 65-bit’s EasyCatalog that sold me on using it together with InDesign for the Big Book publications.

EasyCatalog (EC)

EasyCatalog is a plugin that works within InDesign. If this product didn’t exist then the layout of 500 complex text and image advertisements would have taken months instead of weeks and taken many more layout artists to complete.

This is what one looks like.

Now imagine setting 500 of these manually with the information only available to you via emails or a spreadsheet. With all those snippets of information you’d then create each ad by:

copy/paste each bit of info into the layout;
be able to find it and make changes in an instant across four publications;
send a finished PDF to each advertiser for approval;
track each one through the production cycle.

A more dynamic solution had to be found. Enter EasyCatalog. The concept behind EC is that it enables you a great degree of automation when setting repetitive data. It’s centered around having a template container for that data to flow into. The this case there are template fields for each part of the advertisement – text and images.

Another strength to EC is its ability to access a database like MySQL using a simple query. This query returns a spreadsheet-like grid of information right into the EC panel within InDesign. From there it’s a simple case of choosing an ad template to use (there were different ones depending on the size of the ad paid for) and then dragging the entry into the layout.

The basic column ad production process.

Updates

At the draft stage, changes to each ad was a real possibility. EC handles this situation extremely well. By re-running the query it visually highlights any data that has been changed. It’s then possible to simply update either every amended entry with new data or do it selectively. I can’t tell you the amount of time saved doing changes this way.

This is just the tip of the iceberg with what EasyCatalog can do and it’s well worth the price of admission in the time and carpal tunnel it saves you.

Foreign characters in sIFR

2007-02-15T00:22:00+10:00

If you have a situation where you need to use foreign characters with sIFR in your web pages, here’s a tip to get them to display properly. (This assumes that the font/s you want to use actually have these characters. Check in with your Character Map in Windows or the Character Palette for OSX.)

Edit the Flash file that comes with sIFR: double click then click again to select the text box. In the Properties panel click on ‘Character…” and change the selection to ‘All characters’. Export your swf.

Head over to Tony Franks’ website and pick which character you need to display e.g. an o’umlaut Ö ö which is: Ö and ö.

Then edit your html file inserting the codes for the characters where you need them to be. If all goes well you should see your foreign characters.

Blender fluids to LightWave: a workflow

2006-08-05T23:16:00+10:00

With the release of blender 3d 2.4 there are some interesting fluid simulation tools. I really know very little about either blender or fluids but I wondered how to go about getting the similation results into Lightwave for rendering or integration into a current scene. Why? RealFlow is US$1200 and blender is free. I’m not saying blender is any competition but for some for simple stuff it could probably do the job.

Check out the SpinQuad forum for more details (registration is required). Hooray for the other folk on there that have taken this workflow and used it to create some great work.

(Posted here for posterity)

In the current release of blender 2.4 there are some interesting fluid simulation tools. I really know very little about either blender or fluids but I wondered how to go about getting the similation results into Lightwave for rendering or integration into a current scene. Why? RealFlow is US$1200 and blender is free. I’m not saying blender is any competition but for some for simple stuff it could probably do the job.

So for anyone at all interested here is (in a very basic way) how I went about it.

1. Whip up your simulation in blender 2.4 (RC1 is the current release at time of writing this.). Tutorial here: http://mediawiki.blender.org/index.p…uid_Simulation

2. Export your simulation to multiple .OBJ files. You’ll need to duplicate and modify an existing export script. A big thanks to elysiun forum guru cambo for this. See here: http://www.elysiun.com/forum/viewtopic.php?t=56824

3. Run your script which will export however many frames in your animation there are.

4. Convert all your OBJ files to LWO. You might also want to rotate your OBJ files -90 degrees. A great Modeler LScript (Batch Edit 2 (MD) can handle this: http://www.interialabs.de/lw/lscript/index.html

5. Create a object replacement list in the following format eg:

#LW Object Replacement List
0
T:\fluids\sim2\anim_obj_0000.lwo
1
T:\fluids\sim2\anim_obj_0001.lwo

There are a few utils that can do the basic listing.
Using a DOS prompt: dir *.lwo /on >dir.txt
Directory Lister: http://freeware.prv.pl/
To get the numbering sequence you could use a spreadsheet.

6. Run LW Layout and load the first object. You might want to parent it to a null so you can move the whole simulation around. Go to Object / Properties / Object Replacement. Select object list and go find the list you created previously.

*There’s a ridiculous LW bug in that when you scrub through the scene the objects in your list won’t appear. It’s only when you create a preview that you’ll see things happening. Hence, FPRIME IS OF NO USE HERE.

It then occured to me that to edit the surface settings for, in my case, 250 objects would be quite boring. Having loaded the first object, get the surface settings right then save a .srf file. Get a util from NextLimit called Surface Replacer here: http://www.nextlimit.com/phpBB2/view…rface+replacer

This util lets your apply a surface to multiple objects. But it will not correctly overwrite your .lwo files so it’s best to send the output to a temporary directory and copy them back over your source files.

Go back to layout and Make Preview. You should see your murky creation come to life.

That’s about it. Have fun.

Are you local? (XAMMP, OSX & MAMP)

2006-07-23T21:14:00+10:00

(Note: The following is a basic guide. It worked for us but please don’t hold us responsible if it doesn’t work for you. There are many pc configs and/or issues that might prevent you getting the same results. Please be aware that there are security considerations when tinkering with Apache, especially if you’re system is open to the internet.)

For the developer-challenged designer out there, here are few steps to help you setup a local Apache, MySQL & PHP environment to brew your websites on. Even if you only develop in HTML this will be of use.

Why?

Simple. You can have a fully working version of a website before you even think about using your FTP client to transfer files to a live (or client approval) site.

Setting up all these programs can sound a little daunting so here’s what we use and it’s all free.

XAMPP. It’s a ‘packaged’ collection of the above apps and easy to install. We’ve found that matching the version numbers to your live hosting setup is the way to go to avoid any compatibility problems. Back ‘issues’ can be found here. There are other LAMP-style packages out there too. The Uniform Server is another popular one.

Once you have all that installed then great. But you’re most likely working on more than one website at a time and you need to be able to tell Apache – via your web browser – that when you type http://dev.mysite.com that it looks for those files in a specific directory.

This page tells you what you need to do: Setting Up A Virtual Host in Apache.
Your days of local multi-website-developing are now upon you.

Tips

Why the ‘dev’ and not ‘www’?

It helps to reference your local websites (in both the Windows hosts file and in the Apache Virtualhost listing) logically. Eg: dev.website.com makes for easy differentiation between your local and live site. When you’ve uploaded your site to your webserver, simple replace the ‘dev’ reference with ‘www’.

Update (Feb 2nd 2007)

OSX with MAMP

(MAMP Pro has now been released. This is an add-on to the free MAMP download that will let you configure virtualhosts a lot easier. Additionally it lets you open your system to clients by using a a dynamic dns service.)

We recently got ourselves a Mac for website testing purposes. After some looking around on the net for opinions on OSX and it’s native web serving abilities, we thought it might be a good technical exercise and see how easy it would be in getting an internal OSX webserver happening.

The first thing we did was download MAMP (which is similar to XAMMP mentioned here previously). Out of the box they’re similar setups (Apache, MySQL and PHP).

Next we setup some virtualhosts so that we could have as many sites in development as we wanted. (We could go into excrutiating detail and delve into the nuances of the Terminal window but we just don’t know anything about it. We’re designers and not programmers :) )

There’s a system utility called NetInfoManager in the Utilities folder. If you look in the ‘machines’ item you’ll see in the pane next to it an entry called ‘localhost’. Click on it and hit ‘duplicate’. Double-click in the bottom pane on the ‘name’ entry and rename it to whatever your local site is called eg dev.yoursite.com. Repeat this step for any other sites you may have.

Then over to MAMP. We want to tell Apache that we going to be working on more than one site. Enter Virtualhosts. Go to the MAMP directory: Applications/MAMP/conf/apache/ and open a text file called ‘httpd.conf’. Scroll right to the bottom and you’ll see a lonely line: ‘#NameVirtualHost’. Change it to: ‘NameVirtualHost *’ and underneath add the entry to enable your Virtualhost.


DocumentRoot "Applications/MAMP/htdocs/dev.yoursite.com"
ServerName dev.yoursite.com

In your htdocs directory create a folder called ‘dev.yoursite.com’, add your html or php files and then head over to your favourite browser (which should be Firefox and if it aint it should be) where you can now enter: ‘http://dev.yoursite.com:8888’. (The 8888 is a port number and is supposed to be more secure.)

So there you have it. Easy as.

But what if I’m on a mixed network of Macs and PC’s. How do I see the site/s?

Once again it depends on your setup. What worked for us was having a router that has Port Forwarding. We set it up to look for any http request on a particular IP address. Internally the Mac could be on 192.168.1.50.

Next we edited our Windows ‘hosts’ file (located in your Windows directory then system32\drives\etc\) and added the following entry:

192.168.1.50       dev.yoursite.com

Now if you go to Firefox again and type: http://dev.yoursite.com:8888 you should see your site being served of your Mac.

Note: We had some firewall issues and had to tinker about a little to get it to work properly from our PC. All good firewalls have port blocking.

If you want to keep all your htdocs in one place, like a file server, you can tell MAMP to look elsewhere for them. Go back into the Apache httpd.conf file and search for ‘DocumentRoot’. There will be a line called: DocumentRoot ‘/Applications/MAMP/htdocs’. Change it to where ever your files are located. Change your VirtualHost settings to reflect this change also.

Working locally with VMWare Fusion

So what if you want to access your MAMP setup from within VMWare Fusion (or Parallels)? Simple.

Edit your Windows hosts file (located in your Windows directory then system32\drives\etc\) and add the IP of your Mac followed by the site name. E.g.:

192.168.1.50       dev.yoursite.com