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
- 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.
- 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
- Select the Presentation tab. The second row of tabs should change.
- 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.
- 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.
- 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".
- 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.
- 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
- Select the Content tab. The second row of tabs should change.
- 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).
- Type Common Bluebell into the single-line text box.
This is the article's title.
- Type the text of your article into the large text box (suggestion
-- copy and paste the example text shown below).
- 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.
- 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
- 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.
- Type the word Bluebells into the Title box.
- 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.
- 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".
- Type the word Bluebells into the Description box. You can use
longer descriptions for your links if you wish.
- Click Save (below the Description box). After a brief pause, the
table of links will be updated.
- 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:
- Select the Content tab (first row of tabs).
- Select the Categories tab (second row of tabs). Four types of
category are shown: Article Categories, Link
Categories, Image Categories and File Categories.
- 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).
- Select Content (first row of tabs).
- 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.
- 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.
- Click Upload. When the upload has completed, you should see a
page with a copy of the image.
- Create a thumbnail version of the image:
- Type 50 in the Width text box.
- Type 40 in the Height text box (use different height and width
values to suit
your image).
- Click Create. The page should now have a thumbnail image as
well as the original.
- Click the Category box and select Bluebells.
- 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.
- 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.
- Select Content (first row of tabs) if it isn't already selected.
- Select Images (second row of tabs) if it isn't already selected.
The table shows the images that have been uploaded.
- 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.
- 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.
- Select Articles (second row of tabs). You should see a table
listing the articles.
- Click the title of your article (e.g. Common Bluebell). You
should then see a large text box
with the text of the article.
- Click at the point in the article where you want to insert the
image.
- Paste the tag into your article (hold down the
control key and press the letter V).
- 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
- 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.
- 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).
- After creating the new section, make the following changes:
- 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.
- 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.
- Click
"No" next to "include in site search" otherwise someone doing a search
may easily find this section.
- 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.
- Select the Content tab if it isn't already selected.
- Select Write (in the second row of tabs) if it isn't already
selected.
- Type the title Printshop into the single-line text box.
This is the article's title.
- Type the text of your article into the large text box (suggestion
-- copy and paste the example text shown below).
- Click in the Section box and select przqx57 from the list of
sections.
- 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.
- Select the Content tab (first row of tabs).
- Select the Categories tab (second row of tabs).
- 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.
- Select Content (first row of tabs).
- 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).
- 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.
- 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.
- Click the File Category box and select Printshop.
- Type "Poster artwork" in the description box.
- 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.
- Select Content (first row of tabs) if it isn't already selected.
- Select Files (second row of tabs) if it isn't already selected.
The table shows the files that have been uploaded.
- 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.
- Copy
the contents of the text box to the clipboard. Be careful to include
all of the text in the text box.
- Select Articles (second row of tabs). You should see a table
listing the articles.
- Click the title of the article (Printshop). You should then see a
large text box
with the text of the article.
- 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.
- 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
- Select Content (first row of tabs).
- 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).
- 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.
- 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.
- Click the File Category box and select a suitable category or
leave blank if there isn't one.
- Type "Favourites icon" in the description box.
- Click Save. The file you uploaded should now appear in the table.
Part 2 - Modify
the Page Template
- Select Presentation (first row of tabs).
- Select Pages (second row of tabs) if it isn't already selected.
- 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.
- 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>".
- 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
- End-user
Guide [PDF, 432KB] -
a gentle introduction to creating and editing a web site using
Textpattern.
- Textile Quick
Reference - Textile is how you set the style and format of text on
a Textpattern-based web site using simple codes within your text (e.g.
"h1." at the start of a line to give a heading). The Quick Reference
comes in handy when writing web pages.
- Textile Reference - a
more detailed guide to Textile.
- TextBook
- the community-driven documentation.
- TextGarden - themes and
templates.
- Textpattern Resources -
plugins, tutorials, templates, and other resources.
- Forum - ask
questions, give and get help, etc.
Feedback
and comments to paul 
electronic-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.