Textpattern Examples

Paul Zarucki, Electronic Equipments Ltd.
Last modified 2006.12.01

Contents



Introduction

Textpattern is a system for creating web sites that allows you to administer and edit your site using only a web browser (e.g. Internet Explorer). These step-by-step examples are designed to help you get started with Textpattern whatever your level of experience.

Terminology

In Textpattern, each page on your web site is called a "section". Textpattern also has things called "pages" but these are actually templates which control style and layout and should not be confused with actual pages on your web site.

To add a new page to your web site you add a new "section" and then add one or more "articles" to that section. It's a bit like composing a newspaper, you decide what pages you want and then write articles to go onto the pages. The following examples take you through the basics of adding pages and images to your web site.

See Also...

See the list of resources at the end of this document for further help and information on Textpattern. I highly recommend the End-user Guide which provides a gentle introduction to Textpattern. Another handy resource is the Textile Quick Reference.


Logging In

  1. Go to the home page of your web site and click the Admin or Login link on the left side if you have one (if not then append "textpattern/" to the web site address in your web browser and press return). You should then see the Textpattern login page.
  2. Type your user name and password then click Log in. You should then see a page with two rows of tabs across the top.


Example 1 - Add a new Page

In this example we will add a new page ("section") to our web site. We start by creating a new section, called Bluebells in this example, and then add an article to that section. That is how you add content (text and images) to a page -- you put the content into an article and then specify the section (page) in which the article is to appear. Finally, we add a link to the new section from the home page of the web site.

Part 1 - Create the new Section
  1. Select the Presentation tab. The second row of tabs should change.
  2. Select Sections (in the second row of tabs). You should now see the title Site Sections with a small text box and a Create button just below it.
  3. Type the name of the new section (Bluebells) into the text box and click Create. After a brief pause the list of sections should be updated.
  4. Scroll down until you see the section Bluebells. There are text boxes containing the section name and various other boxes and some circular "radio buttons".
  5. Click the "No" buttons next to "on front page" and "syndicate" then click Save just below these. After a brief pause the list of sections should be updated.
  6. Scroll down again to the Bluebells section and check that the "on front page" and "syndicate" options are indeed set to "No".
Part 2 - Add an Article
  1. Select the Content tab. The second row of tabs should change.
  2. Select Write (in the second row of tabs) if it is not already selected. You should then see a single-line text box near the top-centre of the page with a large text box below and, further down, a medium size text box labelled Excerpt (you might need to scroll down to see this).
  3. Type Common Bluebell into the single-line text box. This is the article's title.
  4. Type the text of your article into the large text box (suggestion -- copy and paste the example text shown below).
  5. To the right of the large text box is a box labelled Section. Click in the box and select Bluebells from the list of sections. This assigns the article to the Bluebells section.
  6. Click the Publish button at the lower right (you might need to scroll down to see it).

Example text which you can copy and paste into your article:

h1. Common Bluebell

_From Wikipedia, the free encyclopedia._

The *Common Bluebell* ( _Hyacinthoides non-scripta_, sometimes _Endymion non-scriptus_ or _Scilla non-scripta_ ) is a spring-flowering bulbous perennial. It is native to the British Isles and western France, being replaced in Iberia by the similar Spanish bluebell ( _H. hispanica_, the only other species in the genus _Hyacinthoides_ ).

The traditional name of "non-script" was intended to distinguish this plant from the classical hyacinth. The classical hyacinth was a flower described in Greek mythology that sprang from the blood of the dying prince Hyacinthus. As a mark of his grief on the death of the prince, Apollo inscribed the letters "AIAI".

The Common Bluebell flowers in April and May. The stems are 10-30 cm long and bend over at the top. The lavender-blue flowers are pendulous, bell-shaped and slightly fragrant. The anthers are yellowish-white.

N.B. Copy the above text exactly as shown. Don't worry if some of it looks strange, this is because Textpattern uses a system called Textile to represent formatting options in the text, e.g. "h1." at the start of a line indicates a class 1 heading while "*" at the start and end of some text means that the text should be shown in bold.

Part 3 - Add a link to the new Section
  1. Select the Links tab (second row of tabs). You should see a series of text boxes (labelled Title, Sort Value, URL, etc.). Also, further down the page, you should see a table with the existing links.
  2. Type the word Bluebells into the Title box.
  3. Type a number, say 30, into the Sort Value box. This sets the position in the list of links on the home page. HINT -- if you use numbers like 10, 20, 30, and so on, you will be able to add new links anywhere in the list. E.g. you can insert a new link between the second and third entries in the list by setting its sort value to 25.
  4. The URL box is where we type the "address" (also called URL or URI) of the section. This tells your web browser where to find the page for this section. Type "<my_home_page>index.php?s=Bluebells" into the URL box (don't type the quotes), where you should replace "<my_home_page>" with the actual address of your web site (as it appears in your web browser when you first access your web site). For example, if your web site is "http://www.kap.org.uk/" then type "http://www.kap.org.uk/index.php?s=Bluebells".
  5. Type the word Bluebells into the Description box. You can use longer descriptions for your links if you wish.
  6. Click Save (below the Description box). After a brief pause, the table of links will be updated.
  7. Look down the table of links and check that your new link appears there.

Part 4 - Viewing the Results

Click the View Site tab (top row of tabs). This will open a "preview" window showing the home page of your web site. If all went well, you should see Bluebells in the list of links on the left side of the page. Clicking the Bluebells link should then take you to the Bluebells page (or "section") with the article that you wrote.

Assuming you used the example text you will notice that the web page contains various typefaces and styles. If you compare this with the example text that you copied and pasted, you can see that the line beginning with "h1." appears as a large coloured heading. Also, text that begins and ends with "*" appears bold while text that begins and ends with "__" appears in italic ("emphasised"). Blank lines in the original text appear as breaks between paragraphs.

When you have finished viewing the results of your changes close the separate preview window.

Logging Out

When you have finished making changes to the web site, scroll down to the bottom of the page and click Logout.


Example 2 - Add an Image

Your articles can include images (photos, graphics, etc.) as well as text. You must first "upload" the images to your web site. Textpattern stores them in the Images area and lets you group them into categories.

Note that each image file may be no larger than 1MB.

Part 1 - Create a new image Category

Let's create a category called Bluebells to hold pictures for the article we wrote in Example 1:
  1. Select the Content tab (first row of tabs).
  2. Select the Categories tab (second row of tabs). Four types of category are shown: Article Categories, Link Categories, Image Categories and File Categories.
  3. Type Bluebells into the Image Categories text box and click the Create button to the right of the text box. The new category should appear in the list below the Image Categories text box.

Part 2 - Upload an Image

Now we are ready to upload an image. Be careful to avoid a large image such as a full size digital photo. It can take a long time to upload and will appear too big on the web page (700 pixels across is about right for an image which is the full width of the page).

  1. Select Content (first row of tabs).
  2. Select Images (second row of tabs). You should see a small text box labelled "Upload image" with Browse and Upload buttons to the right. Below this is a table with a list of existing images.
  3. Click Browse and select an image file on your computer to be uploaded to the web site. After selecting the image, the "Upload file" text box should contain the file name and directory.
  4. Click Upload. When the upload has completed, you should see a page with a copy of the image.
  5. Create a thumbnail version of the image:
    1. Type 50 in the Width text box.
    2. Type 40 in the Height text box (use different height and width values to suit your image).
    3. Click Create. The page should now have a thumbnail image as well as the original.
  6. Click the Category box and select Bluebells.
  7. Type the word Bluebells into the "Alternate text" text box. This provides a brief description of the image which may help people who are using a text-only web browser or are visually impaired.
  8. Click Save (you might need to scroll down to find this). This will save the image and return you to the table of images. You should see a thumbnail version of your original image.

Part 3 - Add an Image to your Article

To add an image to your article, you need to add a special line of text, called the image "tag". Textpattern automatically replaces the tag with the corresponding image when someone views the web page. You can find the tag from the table of Images then copy and paste it into your article as follows.
  1. Select Content (first row of tabs) if it isn't already selected.
  2. Select Images (second row of tabs) if it isn't already selected. The table shows the images that have been uploaded.
  3. Find the image you want in the table and click the word Textpattern on the same line (in the Tags column). A a pop-up window should appear with a text box.
  4. Copy the contents of the text box to the clipboard (click and drag over the text to select it then hold down the control key and press the letter C). Be careful to include all of the text in the text box.
  5. Select Articles (second row of tabs). You should see a table listing the articles.
  6. Click the title of your article (e.g. Common Bluebell). You should then see a large text box with the text of the article.
  7. Click at the point in the article where you want to insert the image.
  8. Paste the tag into your article (hold down the control key and press the letter V).
  9. Click the Save button at the lower right (you might need to scroll down to see it).
Click the View Site tab (top row of tabs) to see the updated version of your web site.


Example 3 - Add a new Client Section

Textpattern lets you create sections of your web site which are accessed by entering a unique code into a special Login box. One use of this is to provide each of your clients with their own area containing items just for them. It is not highly secure and should not be used for confidential material but is suitable for many purposes. If your web site has a Client Login box on the home page then it has been set up for this.

Creating a new client section is just like adding an ordinary page to your web site (see Example 1) but with a few minor differences. In this example we will create a section for a client called Printshop. Then in the following example will add a file which the client can download.

Part 1 - Create the new Section

  1. Make up a "login code" for the new client. Choose something obscure like a string of letters and numbers that would be hard to guess. The code should not contain blank spaces and should not be the name of an existing section. For this example I will use the code przqx57.
  2. Create a new section (see Example 1, Part 1) with a name which is the same as the client's login code (przqx57 in my case).
  3. After creating the new section, make the following changes:
    1. Change the section title to Printshop. Using something meaningful like the client name for the section title will make it easier to keep track of which section belongs to which client.
    2. Click the "Uses page" box and select no_login from the list of page templates. This is the same as the normal page template except that it doesn't have a Client Login box.
    3. Click "No" next to "include in site search" otherwise someone doing a search may easily find this section.
    4. Click Save.

Part 2 - Add an Article

We will now add an article to the Printshop section so that the client will see something more than a blank page when they log in.
  1. Select the Content tab if it isn't already selected.
  2. Select Write (in the second row of tabs) if it isn't already selected.
  3. Type the title Printshop into the single-line text box. This is the article's title.
  4. Type the text of your article into the large text box (suggestion -- copy and paste the example text shown below).
  5. Click in the Section box and select przqx57 from the list of sections.
  6. Click Publish.

Example text:

*Printshop*

h3. Artworks

To download a file to your computer, click its name in the list below.

* File download link will go here (see next example)

N.B. The "*" at the start of a line indicates a bulleted list item.

Part 5 - Viewing the Results

Click View Site (top row of tabs) to open a "preview" window showing the home page of your web site. Type the code przqx57 into the Client Login box then press the return key. You should now see the Printshop page with the above text rendered in a prettier fashion.


Example 4 - Add a File

Your web site can include files which visitors can download. You must first "upload" the files to your web site. Textpattern stores them in the Files area and lets you group them into categories.

In this example we will add a file to the Printshop area we created in the previous example.

Note that there is an upper limit to the size of each file. This is normally 2MB but your hosting service provider may be able to increase this at your request.

Part 1 - Create a new file Category

Let's create a category called Printshop to hold artwork files for printing.
  1. Select the Content tab (first row of tabs).
  2. Select the Categories tab (second row of tabs).
  3. Type Printshop into the File Categories text box and click the Create button to the right of the text box. The new category should appear in the list below the File Categories text box.

Part 2 - Upload a File

While practicing it is a good idea to choose a small file to upload as large files can take a long time.
  1. Select Content (first row of tabs).
  2. Select Files (second row of tabs). You should see a small text box labelled "Upload file" with Browse and Upload buttons to the right. Below this is a table with a list of existing files (if any).
  3. Click Browse and select a file on your computer to be uploaded to the web site. The the "Upload file" text box should now contain the file name and directory.
  4. Click Upload. When the upload has completed, you should see a page showing the File Status, Filename, etc. Check that the File Status is "Ok" and that the filename matches the file you intended to upload.
  5. Click the File Category box and select Printshop.
  6. Type "Poster artwork" in the description box.
  7. Click Save. The file you uploaded should now appear in the table.

Part 3 - Add a File Download link

We will now add a file download link to the Printshop page on the web site. This will enable the client to download the file. To do this we add a special line of text, called the file "tag", to the Printshop article. Textpattern automatically replaces the tag with the corresponding file download link when someone views the web page. You can find the tag from the table of Files then copy and paste it into the article as follows.
  1. Select Content (first row of tabs) if it isn't already selected.
  2. Select Files (second row of tabs) if it isn't already selected. The table shows the files that have been uploaded.
  3. Find the file you want in the table and click the word Textpattern on the same line (in the Tags column). A a pop-up window should appear with a text box.
  4. Copy the contents of the text box to the clipboard. Be careful to include all of the text in the text box.
  5. Select Articles (second row of tabs). You should see a table listing the articles.
  6. Click the title of the article (Printshop). You should then see a large text box with the text of the article.
  7. Click at the point in the article where you want to insert the file download link then paste the tag into your article. If you followed the previous example, then the article text should look like the example text shown below.
  8. Click the Save button at the lower right.
Click the View Site tab (top row of tabs) to see the updated version of your web site. Log in with client code przqx57 to see the Printshop section.

Example text:

*Printshop*

h3. Artworks

To download a file to your computer, click its name in the list below.

* <txp:file_download_link id="2"><txp:file_download_name /></txp:file_download_link>


Example 5 - Add a Favicon to your web site

A favicon (short for "favourites icon") is a small graphic which appears next to the address or title of your web site when viewed in a web browser or list of bookmarks. In this example we will add a favicon to our web site. I assume you already have a suitable favicon graphic file named favicon.ico.

There are two steps involved: first we upload the graphic to the Files area then we add some text to the default page template which tells web browsers where to find the favicon.

Part 1 - Upload the Favicon

  1. Select Content (first row of tabs).
  2. Select Files (second row of tabs). You should see a small text box labelled "Upload file" with Browse and Upload buttons to the right. Below this is a table with a list of existing files (if any).
  3. Click Browse and select the favicon.ico file on your computer. The the "Upload file" text box should now contain the file name and directory.
  4. Click Upload. When the upload has completed, you should see a page showing the File Status, Filename, etc. Check that the File Status is "Ok" and that the filename matches the file you intended to upload.
  5. Click the File Category box and select a suitable category or leave blank if there isn't one.
  6. Type "Favourites icon" in the description box.
  7. Click Save. The file you uploaded should now appear in the table.

Part 2 - Modify the Page Template

  1. Select Presentation (first row of tabs).
  2. Select Pages (second row of tabs) if it isn't already selected.
  3. You should see the message "You are editing page template default" where "default" is the name of your default page template with a large text box below. If your default template isn't selected then you can select it by clicking its name under the heading All Pages on the right side of the page.
  4. Copy and paste the text shown below into the page template (the large text box). The new lines should be inserted after the line containing "<head>" and before the line containing "</head>".
  5. Click Save.
Text to be copied and pasted:

<link rel="icon" href="<txp:site_url />files/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="<txp:site_url />files/favicon.ico" type="image/x-icon">

Click the View Site tab (top row of tabs) to see the updated version of your web site.

Multiple Favicons

You can have different favicons for different areas of your site or, more specifically, for each area that uses a different page template. As before, upload the favicon files to the files area. The file names should all end in ".ico" and, to be safe, should only contain letters, numbers and underscores before the ".ico" (avoid blank spaces in the file names). Then edit each template as above, this time replacing "favicon.ico" with the name of the appropriate favicon file.


Textpattern Resources



Feedback and comments to paul atelectronic-equipments.co.uk are welcome.
Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.2 or any later version published by the Free Software Foundation.