Imagery

It's been a while since the last update, but I have been busy.  Here's the first of the new features uploaded today:

Automatic Server-Side Image Scaling and Thumbnails (ASSIST!)

Shrink to 200 pixels wide - side-by-side with a browser-scaled image for comparison:
[thumbnail=/images/Benten.jpg size=200x]

Shrink to 200 pixels tall:
[thumbnail=/images/Benten.jpg size=x200]


Fit inside a box 100 pixels square, keeping proportions:
[thumbnail=/images/Benten.jpg size=100x100]



Resize to 100 pixels square, regardless of proportions:
[thumbnail=/images/Benten.jpg resize=100x100]


Accessing this directly from HTML:

<img src="/images/Benten.jpg?size=200x" border="0" />

This is intended to make it easy to produce image galleries and photo albums where you need to produce images in multiple resolutions.  Also, it will be used for user avatars: Since mee.nu users have complete control over their site layouts, there won't be a single fixed size for avatars, and resizing in the browser produces ugly images.

The advantages (apart from the improved quality) is that it makes it very easy to keep the image proportions, and it produces smaller files for fast loading times.  (And less strain on your bandwidth.)  Doing high-quality image processing is fairly CPU intensive, but we already have 16 CPUs at our disposal, so that is not anticipated to be a problem.

One hitch: This doesn't currently work for animated GIFs.  Neither does the image processing function in the file module; the GIF library I'm using is lacking in several respects.  This will be resolved in the next month or so.

Posted by: Pixy Misa at 01:56 PM | Comments (2) | Add Comment
Post contains 231 words, total size 3 kb.

Quote Me On That

Pullquotes

The pullquote tag makes for easy and attractive magazine-style pullquotes. You can place the pullquote to the left or right of the text, set your own colour schemes, control the line breaks yourself or let the system handle it for you, and select different text for the quote and the main body.

Code: [pullquote left strip scheme=orange]The pullquote tag|makes for|easy and attractive|magazine-style|pullquotes.[/pullquote]

Usage: [pullquote {left|right} {strip} {nobody} {scheme=scheme_name}]

• The quote can be
  placed either left or right
  placed either left or right (the default) of the body text.
• Markup in the body text may cause problems in the pullquote. The strip option removes any markup from the pullquote, leaving it in the body.
• This text appears only in the pullquote.
  When needed, the pullquote text can be different to the body text. To specify that the contents are to appear in the pullquote only, specify the nobody option.
  
• Schemes can be user-defined in your CSS. The standard schemes include
  red, orange, green, blue, and purple
  red, orange, green, blue, and purple. The default scheme (if no scheme is specified) is black and grey.  The CSS code for the blue scheme, for example, is simply:
  

  .pullquote-blue-1,.pullquote-blue-5  { color: #55D; }
  .pullquote-blue-2,.pullquote-blue-4  { color: #339; }
  .pullquote-blue-3  { color: #004; }

• Pullquotes are automatically split into five sections, unless you specify the break points using pipes | as shown in this example.
  

Posted by: Pixy Misa at 02:50 PM | Comments (4) | Add Comment
Post contains 204 words, total size 2 kb.

Include

Quickly Process another template and add the results to the current page.

Usage [include {args}]
[include:once {args}]

Type control tag

Data Fields n/a
more...

Posted by: Pixy Misa at 04:50 PM | Comments (2) | Add Comment
Post contains 148 words, total size 2 kb.

Formatting Options

You can add formatting to any data tag using the format= option. The main formatting commands are described below.

Date and Time

Dates and times use a format string as described below. You can use any combination of formatting options and text in the format string. If the format string contains spaces, you will need to enclose it in either single or double quotes.

Date Formatting Options

Code	Meaning	Examples
%a	Abbreviated weekday name.	Tue, Thu
%A	Full weekday name.	Tuesday, Thursday
%b	Abbreviated month name	Jan, Aug
%B	Full month name.	January, August
%c	Date and time.	Tue Apr 3 14:53:38 2007
%d	Day of month.	3
%j	Day of year.	093
%m	Month.	1, 8
%U	Week of year (weeks starting Sunday).	13
%W	Week of year (weeks starting Monday).	13
%x	Date (mm/dd/yy).	04/03/07
%y	Year.	07
%Y	Year with century.	2007

Time Formatting Options

Code	Meaning	Examples
%H	Hour (24-hour clock).	11, 23
%I	Hour (12-hour clock).	11, 11
%M	Minute.	03, 29
%p	AM or PM.	AM, PM
%S	Second.	15, 59
%X	Time.	14:53:38

Some Examples

Code	Result
%A, %B %d	Monday, April 09
%I:%M %p	08:57 PM
%A, %B %d %Y %I:%M %p	Monday, April 09 2007 08:57 PM
%Y-%m-%d	2007-04-09

Example: [post.date format="%I:%M %p"]

Text

Multiple text formatting options can be applied by separating the commands with commas. The formatting commands are applied in the order they are listed. Example: [post.text format="first=100,underscore,lower"].

Option	Description
left=n	Returns the first n characters of the text.
right=n	Returns the last n characters of the text.
first=n	Returns the first n words of the text.
last=n	Returns the last n words of the text.
trim	Removes any leading and trailing spaces.
trim=s	Removes any leading or trailing instances of string s.
lower	Converts text to lower case.
upper	Converts text to upper case.
words	Returns the number of words in the text.
letters	Returns the number of letters in the text.
nospace	Removes any spaces from the text.
underscore	Convert any spaces in the text to underscores.

Numbers

Number formatting works by placing the formatted value into a string containing both formatting options and text.

Option	Description
%d	Signed integer decimal.
%i	Signed integer decimal.
%o	Unsigned octal.
%u	Unsigned decimal.
%x	Unsigned hexadecimal (lower case).
%X	Unsigned hexadecimal (upper case).
%e	Floating point exponential (lower case).
%E	Floating point exponential (lower case).
%f	Floating point decimal format.
%F	Floating point decimal format.
%g	Variable floating point format.
%G	Variable floating point format.
%s	Default representation.
%%	% symbol.

As an example, you could have [post.words format="There are %d words in this post."]

Each of the numeric formatting options can take a number of flags:

Flag	Description	Example
0	Zero fill the result.	%0d
-	Left-adjust the result	%-d
	(Space) Leave a space before a positive result.	% d
+	Always show a leading + or -.	%+d

Posted by: Pixy Misa at 09:34 AM | No Comments | Add Comment
Post contains 430 words, total size 13 kb.

Some Quick Notes About Caching

The caching module is designed to keep the most frequently requested pages in memory so that they can be served more quickly.  Every time you request a page, the server first checks if it already has a copy in the cache.  If it doesn't, it creates the page from the templates, and then saves a copy in the cache - possibly pushing an older page out of the way to do so.

Pages live in the cache for a limited amount of time, currently 120 seconds.  They are automatically flushed (removed from the cache) after certain events; leaving a comment on a page, for example, will flush that individual page.  And pages are never cached if you are logged in, so you will never see an old copy of a page while you are maintaining your site.

The real benefit of the cache comes in when you get a link from a high-traffic site like Slashdot, Fark, or Instapundit.  The main page of my blog currently takes around 400 milliseconds to generate (it has a lot of comments...) Once in the cache, it takes just 3.5 milliseconds - over 100x faster.  You can imagine the difference that would make to the server if I got 10,000 visitors in the space of an hour.  Typically the performance gain would be somewhat less than that, in the range of 20x to 60x, but still definitely worthwhile.

If you log out and reload a page a couple of times, you'll see that the system actually tells you that it's coming from the cache, so you can keep an eye on this yourself.

Posted by: Pixy Misa at 08:06 AM | No Comments | Add Comment
Post contains 274 words, total size 2 kb.

Working With Custom CSS - Part 2

^{[Part 1]}

There's a second way to work with custom CSS - use the template engine.

There are two steps to this:

First, create a folder. Give it a type of "Style" and a name that you find appropriate - let's say "Default", since this will be your default CSS. Set the path to be something like "css/mystyle.css", or "css/mee.nu.css" if you don't want to change your Header template just yet.

Set the index template and page template both to Style.Default.

Make sure that it's not marked private! If you mark a folder as private, only you can access its contents - which is not a good thing for your CSS files (unless you want to try out a new design, in which case it's ideal).

Save your new folder.



Now create a template. Set the type as Style and the name as Default. Make sure you set the content to "text/css", or you may have problems.

Now, just put your CSS code into the template. Make sure it's marked as active. Save it, and you're done!



The advantage of this method is that you can use template tags, including conditional tags, in generating your CSS. The downside is that because the CSS is generated dynamically, it won't be cached by the browser, so your pages will appear just a little more slowly.

Posted by: Pixy Misa at 02:43 AM | Comments (1) | Add Comment
Post contains 228 words, total size 2 kb.

Posts

[Note: This documentation is for the updated version of the system that is in testing right now.  Some features documented here may not work correctly just yet. The new version is expected to be available by the end of Sunday, April 15th.]

Quickly View posts.

Usage [posts {paged|unpaged} {page=n} {count=n} {skip=n} {show=all|publish|draft|pending|expire|user}  {sticky|unsticky|nosticky|stickyonly} {sort=posted|updated|title|comments} {order=asc|desc}]
[posts:here {template=type.name} {options}]

Type block tag, here tag

Data Fields

Text Fields

title, subject, text, keywords, more, memo, meta, misc, abstract, excerpt, notes, custom, tags, reply, warn, mod
{.raw|.esc|.text|.clean}

Info Fields

data, xml
{.raw|.esc|.text|.clean}

Date Fields

date, time, datetime, shortdate, day, month, year

create.date, update.date, start.date, end.date, comment.date, ping.date
[.date|.time|.datetime|.shortdate|.day|.month|.year]

Status Fields

status, type, category, comments, pings, edits, reads, locked, allow.comments, allow.pings, allow.attach, sticky, hidden, defer, expire, flag, ip, ip.hash, filter, number, even, odd, mod.[3|4|5], bytes, kbytes, words, first, last

Display Fields

show.html, show.bbcode, show.smilies, show.macro, show.dict, show.sig

User Fields

author.name, author.nick, author.mail, author.web, author.aim, author.msn, author.yim, author.icq, author.location, author.occupation, author.interests, author.sig, author.hash

ID Fields

id, tid, pid, fid, etid, cfid

Category Fields

category.name, category.desc, category.path, category.nospace

Sub-tags ^[1]

[post:comments]
[post:pings]
[post:attachments]
[post:links]
[post:images]
[post:stats]
[post:categories]
[post:folders]
[post:sites]
[post:next]
[post:prev]
[post:first]
[post:last]


[1] Sub-tags aren't working yet, but these are the ones that will become available for posts.
more...

Posted by: Pixy Misa at 02:47 PM | Comments (7) | Add Comment
Post contains 134 words, total size 4 kb.

Youtube Videos

Pixy, I hear you cry, how do I post Youtube videos on my mee.nu blog?

Nothing could be easier, because mee.nu has a special [youtube] tag! 

Let's say the video you want is at http://www.youtube.com/watch?v=eWEjvCRPrCo

Just put this in your post:

[youtube=http://www.youtube.com/watch?v=eWEjvCRPrCo]

and the result will be this:



You can also use a shorter form where you just specify the video ID, in this case eWEjvCRPrCo.  So

[youtube=eWEjvCRPrCo]

again produces:

Posted by: Pixy Misa at 08:52 PM | Comments (7) | Add Comment
Post contains 69 words, total size 1 kb.

Working With Custom CSS

By default, your site is set up with a standard CSS file, which you can find here: http://mee.nu/css/mee.css.

You will find the CSS location specified in your Header template.  In the future - probably later this week - I'll add a setting to the Manage Site page to make this easier to change, but for now you can just edit that template.  Find the line that says:

<link rel="stylesheet" href="/css/mee.nu.css" type="text/css" />

And change it to something like:

<link rel="stylesheet" href="/files/my.css" type="text/css" />

Where /files/my.css is the location of your CSS file.

There are a couple of ways you can put your own CSS into action.  The first way is to simply edit it offline, and then upload the file into your files directory.

The second way is more complicated, but more powerful; it lets you use template tags to process the CSS, so that you can (for example) deliver different CSS to different browsers.  I'll cover that tomorrow.

Posted by: Pixy Misa at 12:31 PM | Comments (5) | Add Comment
Post contains 164 words, total size 1 kb.

New Toys

A new set of features has been uploaded to mee.nu, ready for our full-scale beta test.  You'll see new options for managing your posts, files, folders, templates and directories, automatic RSS and Atom feeds, site statistics, and a host of other bells and whistles.

And a much improved file upload screen:



more...

Posted by: Pixy Misa at 09:58 AM | Comments (14) | Add Comment
Post contains 182 words, total size 7 kb.