DOCS Make links relative so they work nicely on github and docs site.

This commit is contained in:
Cam Findlay 2014-12-18 12:11:57 +13:00
parent 453e12d1a7
commit 606d5667cf
16 changed files with 65 additions and 65 deletions

View File

@ -154,7 +154,7 @@ Two other important folders to set the permissions on are `assets` and `silverst
You will need to give **Modify** permission to **IUSR** user. To do it right click the folder and choose **Properties**. Then open the security tab, press **Edit** and add the **IUSR** user to the list by clicking the **Add** button. Afterwards tick **Modify** under **Allow** for that user. Repeat these steps for each folder.
![](/_images/iis7-iusr-permissions.jpg)
![](../../../_images/iis7-iusr-permissions.jpg)
## Install SilverStripe

View File

@ -40,11 +40,11 @@ a beta version of the software)
## Screenshots
![](/_images/webpi-2-a-silverstripe-choice.jpg)
![](/_images/webpi-2-b-dependencies.jpg)
![](/_images/webpi-2-c-downloading-and-installaing.jpg)
![](/_images/webpi-2-d-installer-questions-step1.jpg)
![](/_images/webpi-2-e-installer-questions-step2.jpg)
![](/_images/webpi-2-f-success-message.jpg)
![](/_images/webpi-2-g-silverstripe-homepage.jpg)
![](/_images/webpi-2-h-cms-interface-working.jpg)
![](../../../_images/webpi-2-a-silverstripe-choice.jpg)
![](../../../_images/webpi-2-b-dependencies.jpg)
![](../../../_images/webpi-2-c-downloading-and-installaing.jpg)
![](../../../_images/webpi-2-d-installer-questions-step1.jpg)
![](../../../_images/webpi-2-e-installer-questions-step2.jpg)
![](../../../_images/webpi-2-f-success-message.jpg)
![](../../../_images/webpi-2-g-silverstripe-homepage.jpg)
![](../../../_images/webpi-2-h-cms-interface-working.jpg)

View File

@ -50,7 +50,7 @@ Example Forum:
| `forum/code` | PHP code for model and controller (subdirectories are optional) |
| ... | ... |
![](/_images/modules_folder.jpg)
![](../_images/modules_folder.jpg)
### Module documentation

View File

@ -46,13 +46,13 @@ When designing your site you should only need to modify the *mysite*, *themes* a
### User Interface Basics
![](/_images/tutorial1_cms-basic.jpg)
![](../_images/tutorial1_cms-basic.jpg)
The CMS is the area in which you can manage your site content. You can access the cms at http://localhost/your_site_name/admin (or http://yourdomain.com/admin if you are using your own domain name). You
will be presented with a login screen. Login using the details you provided at installation. After logging in you
should see the CMS interface with a list of the pages currently on your website (the site tree). Here you can add, delete and reorganize pages. If you need to delete, publish, or unpublish a page, first check "multi-selection" at the top. You will then be able to perform actions on any checked files using the "Actions" dropdown. Clicking on a page will open it in the page editing interface pictured below (we've entered some test content).
![](/_images/tutorial1_cms-numbered.jpg)
![](../_images/tutorial1_cms-numbered.jpg)
1. This menu allows you to move between different sections of the CMS. There are four core sections - "Pages", "Files", "Users" and "Settings". If you have modules installed, they may have their own sections here. In this tutorial we will be focusing on the "Pages" section.
2. The breadcrumbs on the left will show you a direct path to the page you are currently looking at. You can use this path to navigate up through a page's hierarchy. On the left there are tabs you may use to flick between different aspects of a page. By default, you should be shown three tabs: "Content", "Settings", and "History".
@ -60,11 +60,11 @@ should see the CMS interface with a list of the pages currently on your website
* Settings - Here you set the type of page behavior, parent page, show in search, show in menu, and who can view or edit the page.
* History - This allows you to view previous version of your page, compare, change, and revert to previous version if need be.
3. Within the "Pages" section (provided you are in the "Content" or "Settings" tab) you can quickly move between pages in the CMS using the site tree. To collapse and expand this sidebar, click the arrow at the bottom. If you are in the history tab, you will notice the site tree has been replaced by a list of the alterations to the current page.
![](/_images/tutorial1_cms-numbered-3.jpg)
![](../_images/tutorial1_cms-numbered-3.jpg)
4. This section allows you to edit the content for the currently selected page, as well as changing other properties of the page such as the page name and URL. The content editor has full [WYSIWYG](http://en.wikipedia.org/wiki/WYSIWYG) capabilities, allowing you to change formatting and insert links, images, and tables.
5. These buttons allow you to save your changes to the draft copy, publish your draft copy, unpublish from the live website, or remove a page from the draft website. The SilverStripe CMS workflow stores two copies of a page, a draft and a published copy. By having separate draft and published copies, we can preview draft changes on the site before publishing them to the live website. You can quickly preview your draft pages without leaving the CMS by clicking the "Preview" button.
![](/_images/tutorial1_cms-numbered-5.jpg)
![](../_images/tutorial1_cms-numbered-5.jpg)
### Try it
@ -77,7 +77,7 @@ To create a new page, click the "Add New" button above the site tree.
When you create a new page, you are given the option of setting the structure of the page ("Top level" or "Under another page") and the page type.
The page type specifies the templates used to render the page, the fields that are able to be edited in the CMS, and page specific behavior. We will explain page types in more depth as we progress; for now, make all pages of the type "Page".
![](/_images/tutorial1_addpage.jpg)
![](../_images/tutorial1_addpage.jpg)
**SilverStripe's friendly URLs**
@ -87,7 +87,7 @@ page in the database.
Note that if you have sub-pages, changing the Top level URL field for a page will affect the URL for all sub-pages. For example, if we changed the URL field "/about-us/" to "/about-silverstripe/" then the sub-pages URLs would now be "/about-silverstripe/URL-of-subpage/" rather than "/about-us/URL-of-subpage/".
![](/_images/tutorial1_url.jpg)
![](../_images/tutorial1_url.jpg)
When you create a new page, SilverStripe automatically creates an appropriate URL for it. For example, *About Us* will
become *about-us*. You are able to change it yourself so that you can make long titles more usable or descriptive. For
@ -182,7 +182,7 @@ Then, using a loop over the page control *Menu(1)*, we add a link to the list fo
This creates the navigation at the top of the page:
![](/_images/tutorial1_menu.jpg)
![](../_images/tutorial1_menu.jpg)
@ -219,7 +219,7 @@ You can also create the pages elsewhere on the site tree, and drag and drop the
Either way, your site tree should now look something like this:
![](/_images/tutorial1_2nd_level-cut.jpg)
![](../_images/tutorial1_2nd_level-cut.jpg)
Great, we now have a hierarchical site structure! Let's look at how this is created and displayed in our template.
@ -289,7 +289,7 @@ to get the top level page title. In this case, we merely use it to check the exi
Both the top menu, and the sidebar menu should be updating and highlighting as you move from page to page. They will also mirror changes done in the SilverStripe CMS, such as renaming pages or moving them around.
![](/_images/tutorial1_menu-two-level.jpg)
![](../_images/tutorial1_menu-two-level.jpg)
Feel free to experiment with the if and loop statements. For example, you could create a drop down style menu from the top navigation using a combination of if statements, loops, and some CSS to style it.
@ -358,7 +358,7 @@ After building the database, we can change the page type of the homepage in the
In the CMS, navigate to the "Home" page and switch to the "Settings" tab. Change "Page type" to *Home Page*, and click "Save & Publish".
![](/_images/tutorial1_homepage-type.jpg)
![](../_images/tutorial1_homepage-type.jpg)
Our homepage is now of the page type *HomePage*. Regardless, it is still
rendered with the *Page* template. SilverStripe does this as our homepage inherits its type from *Page*,
@ -390,14 +390,14 @@ We'll also replace the title text with an image. Find this line:
Your Home page should now look like this:
![](/_images/tutorial1_home-template.jpg)
![](../_images/tutorial1_home-template.jpg)
SilverStripe first searches for a template in the *themes/simple/templates* folder. Since there is no *HomePage.ss*,
it will use the *Page.ss* for both *Page* and *HomePage* page types. When it comes across the *$Layout* tag, it will
then descend into the *themes/simple/templates/Layout* folder, and will use *Page.ss* for the *Page* page type, and
*HomePage.ss* for the *HomePage* page type. So while you could create a HomePage.ss in the *themes/simple/templates/* it is better to reuse the navigation and footer common to both our Home page and the rest of the pages on our website.
![](/_images/tutorial1_subtemplates-diagram.jpg)
![](../_images/tutorial1_subtemplates-diagram.jpg)
## Summary

View File

@ -14,12 +14,12 @@ We are going to work on adding two new sections to the site we built in the firs
The first of these new sections will be *News*, with a recent news listing on the homepage and an RSS feed:
![](/_images/tutorial2_newslist.jpg)
![](../_images/tutorial2_newslist.jpg)
The second will be a *Staff* section, to demonstrate more complex database structures (such as associating an image with each staff member):
![](/_images/tutorial2_einstein.jpg)
![](../_images/tutorial2_einstein.jpg)
@ -53,7 +53,7 @@ Creating a new page type requires creating each of these three elements. We will
A more in-depth introduction of Model-View-Controller can be found
[here](http://www.slash7.com/articles/2005/02/22/mvc-the-most-vexing-conundrum).
![](/_images/tutorial2_pagetype-inheritance.jpg)
![](../_images/tutorial2_pagetype-inheritance.jpg)
## Creating the news section page types
@ -184,7 +184,7 @@ Finally, we return the fields to the CMS. If we flush the cache (by adding ?flus
Now that we have created our page types, let's add some content. Go into the CMS and create an *ArticleHolder* page named "News", then create a few *ArticlePage*'s within it.
![](/_images/tutorial2_news-cms.jpg)
![](../_images/tutorial2_news-cms.jpg)
## Modifing the date field
@ -269,13 +269,13 @@ To access the new fields, we use *$Date* and *$Author*. In fact, all template va
spread across several tables in the database matched by id - e.g. *Content* is in the *SiteTree* table, and *Date* and
*Author* are in the *ArticlePage* table. SilverStripe matches this data, and collates it into a single data object.
![](/_images/tutorial2_data-collation.jpg)
![](../_images/tutorial2_data-collation.jpg)
Rather than using *$Date* directly, we use *$Date.Nice*. If we look in the `[api:Date]` documentation, we can see
that the *Nice* function returns the date in *dd/mm/yyyy* format, rather than the *yyyy-mm-dd* format stored in the
database.
![](/_images/tutorial2_news.jpg)
![](../_images/tutorial2_news.jpg)
###ArticleHolder Template
We'll now create a template for the article holder. We want our news section to show a list of news items, each with a summary and a link to the main article (our Article Page).
@ -303,12 +303,12 @@ We'll now create a template for the article holder. We want our news section to
Here we use the page control *Children*. As the name suggests, this control allows you to iterate over the children of a page. In this case, the children are our news articles. The *$Link* variable will give the address of the article which we can use to create a link, and the *FirstParagraph* function of the `[api:HTMLText]` field gives us a nice summary of the article. The function strips all tags from the paragraph extracted.
![](/_images/tutorial2_articleholder.jpg)
![](../_images/tutorial2_articleholder.jpg)
### Using include files in templates
We can make our templates more modular and easier to maintain by separating commonly-used components in to *include files*. We are already familiar with the `<% include Sidebar %>` line from looking at the menu in the [first tutorial (Building a basic site)](/tutorials/building_a_basic_site).
We can make our templates more modular and easier to maintain by separating commonly-used components in to *include files*. We are already familiar with the `<% include Sidebar %>` line from looking at the menu in the [first tutorial (Building a basic site)](../tutorials/building_a_basic_site).
We'll separate the display of linked articles as we want to reuse this code later on.
@ -351,7 +351,7 @@ And this one to the *HomePage* class:
This will change the icons for the pages in the CMS.
![](/_images/tutorial2_icons2.jpg)
![](../_images/tutorial2_icons2.jpg)
<div class="hint" markdown="1">
Note: The `news-file` icon may not exist in a default SilverStripe installation. Try adding your own image or choosing a different one from the `treeicons` collection.
@ -388,7 +388,7 @@ When SilverStripe comes across a variable or page control it doesn't recognize,
The controller for a page is only created when page is actually visited, while the data object is available when the page is referenced in other pages, e.g. by page controls. A good rule of thumb is to put all functions specific to the page currently being viewed in the controller; only if a function needs to be used in another page should you put it in the data object.
![](/_images/tutorial2_homepage-news.jpg)
![](../_images/tutorial2_homepage-news.jpg)
@ -413,7 +413,7 @@ This function creates an RSS feed of all the news articles, and outputs it to th
Depending on your browser, you should see something like the picture below. If your browser doesn't support RSS, you will most likely see the XML output instead. For more on RSS, see `[api:RSSFeed]`
![](/_images/tutorial2_rss-feed.jpg)
![](../_images/tutorial2_rss-feed.jpg)
Now all we need is to let the user know that our RSS feed exists. Add this function to *ArticleHolder_Controller*:
@ -480,12 +480,12 @@ We then add an `[api:UploadField]` in the *getCMSFields* function to the tab "Ro
the *addFieldToTab* function will create it for us. The *UploadField* allows us to select an image or upload a new one in
the CMS.
![](/_images/tutorial2_photo.jpg)
![](../_images/tutorial2_photo.jpg)
Rebuild the database ([http://localhost/your_site_name/dev/build](http://localhost/your_site_name/dev/build)) and open the CMS. Create
a new *StaffHolder* called "Staff", and create some *StaffPage*s in it.
![](/_images/tutorial2_create-staff.jpg)
![](../_images/tutorial2_create-staff.jpg)
### Creating the staff section templates
@ -518,7 +518,7 @@ This template is very similar to the *ArticleHolder* template. The *SetWidth* me
will resize the image before sending it to the browser. The resized image is cached, so the server doesn't have to
resize the image every time the page is viewed.
![](/_images/tutorial2_staff-section.jpg)
![](../_images/tutorial2_staff-section.jpg)
The *StaffPage* template is also very straight forward.
@ -539,7 +539,7 @@ The *StaffPage* template is also very straight forward.
Here we use the *SetWidth* method to get a different sized image from the same source image. You should now have
a complete staff section.
![](/_images/tutorial2_einstein.jpg)
![](../_images/tutorial2_einstein.jpg)
## Summary

View File

@ -13,7 +13,7 @@ Instead of using a custom coded form, we could use the [userforms module](http:/
We will create a poll on the home page that asks the user their favourite web browser, and displays a bar graph of the results.
![tutorial:tutorial3_pollresults.png](/_images/tutorial3_pollresults.jpg)
![tutorial:tutorial3_pollresults.png](../_images/tutorial3_pollresults.jpg)
## Creating the form
@ -171,7 +171,7 @@ Add the following code to the existing `form.css` file:
All going according to plan, if you visit [http://localhost/your_site_name/home/?flush=1](http://localhost/your_site_name/home/?flush=1) it should look something like this:
![](/_images/tutorial3_pollform.jpg)
![](../_images/tutorial3_pollform.jpg)
## Processing the form
@ -232,7 +232,7 @@ Change the end of the 'BrowserPollForm' function so it looks like this:
If we then open the homepage and attempt to submit the form without filling in the required fields errors should appear.
![](/_images/tutorial3_validation.jpg)
![](../_images/tutorial3_validation.jpg)
## Showing the poll results
@ -356,7 +356,7 @@ and the poll results need to be displayed.
We use the normal tactic of putting the data into an unordered list and using CSS to style it, except here we use inline styles to display a bar that is sized proportionate to the number of votes the browser has received. You should now have a complete poll.
![](/_images/tutorial3_pollresults.jpg)
![](../_images/tutorial3_pollresults.jpg)
## Summary

View File

@ -11,7 +11,7 @@ This is a short tutorial demonstrating how to add search functionality to a Silv
We are going to add a search box on the top of the page. When a user types something in the box, they are taken to a results page.
![](/_images/tutorial4_search.jpg)
![](../_images/tutorial4_search.jpg)
## Creating the search form
@ -46,7 +46,7 @@ To add the search form, we can add `$SearchForm` anywhere in our templates. In t
This displays as:
![](/_images/tutorial4_searchbox.jpg)
![](../_images/tutorial4_searchbox.jpg)
## Showing the results
@ -152,7 +152,7 @@ class.
Then finally add ?flush=1 to the URL and you should see the new template.
![](/_images/tutorial4_search.jpg)
![](../_images/tutorial4_search.jpg)
## Summary

View File

@ -170,17 +170,17 @@ We call `setDisplayFields()` directly on the component responsible for their ren
using the `[ModelAdmin](reference/modeladmin)` interface instead.
</div>
![tutorial:tutorial5_project_creation.jpg](/_images/tutorial5_project_creation.jpg)
![tutorial:tutorial5_project_creation.jpg](../_images/tutorial5_project_creation.jpg)
Select each `Project` page you have created before,
go in the tab panel called "Students", and add all students as required,
by clicking on the link **Add Student** of your *GridField* table.
![tutorial:tutorial5_addNew.jpg](/_images/tutorial5_addNew.jpg)
![tutorial:tutorial5_addNew.jpg](../_images/tutorial5_addNew.jpg)
Once you have added all the students, and selected their projects, it should look a little like this:
![tutorial:tutorial5_students.jpg](/_images/tutorial5_students.jpg)
![tutorial:tutorial5_students.jpg](../_images/tutorial5_students.jpg)
### Many-many relationships: Mentor
@ -250,13 +250,13 @@ In the CMS, open one of your `Project` pages and select the "Mentors" tab.
Add all the mentors listed [above](#what-are-we-working-towards)
by clicking on the **Add Mentor** button.
![tutorial:tutorial5_module_creation.jpg](/_images/tutorial5_module_creation.jpg)
![tutorial:tutorial5_module_creation.jpg](../_images/tutorial5_module_creation.jpg)
To associate the mentor with a project, select one of the mentors, and click on the projects tab. Add all the projects a mentor is associated with (see the [list](/tutorials/dataobject_relationship_management#What_are_we_working_towards?)), by typing the name in "Find Projects by Page name" and clicking the "Link Existing" button.
You will notice that you are able to select the same `Project` for multiple mentors.
This is the definition of a **many-to-many** relation.
![tutorial:tutorial5_module_selection.jpg](/_images/tutorial5_module_selection.jpg)
![tutorial:tutorial5_module_selection.jpg](../_images/tutorial5_module_selection.jpg)
## Website Display
@ -276,7 +276,7 @@ accessing a "has-many" and "many-many" relationship
in the template loops: to the template, it's just
a named list of object.
![tutorial:tutorial5_projects_table.jpg](/_images/tutorial5_projects_table.jpg)
![tutorial:tutorial5_projects_table.jpg](../_images/tutorial5_projects_table.jpg)
**themes/simple/templates/Layout/ProjectsHolder.ss**
@ -334,7 +334,7 @@ Creating the detail view for each `Project` page works in a very similar way.
Given that we're in the context of a single project,
we can access the "Students" and "Mentors" relationships directly in the template.
![tutorial:tutorial5_project.jpg](/_images/tutorial5_project.jpg)
![tutorial:tutorial5_project.jpg](../_images/tutorial5_project.jpg)
**themes/simple/templates/Layout/Project.ss**

View File

@ -45,7 +45,7 @@ the Site Configuration panel (http://yoursite.com/admin/settings)
A `theme` within SilverStripe is simply a collection of templates and other front end assets such as javascript and css.
located within the `themes` directory.
![themes:basicfiles.gif](//_images/basicfiles.gif)
![themes:basicfiles.gif](../../_images/basicfiles.gif)
## Submitting your theme to SilverStripe

View File

@ -55,7 +55,7 @@ The reason it's standard practice to name the form function 'Form' is so that we
If you now create a ContactPage in the CMS (making sure you have rebuilt the database and flushed the templates /dev/build?flush=all) and visit the page, you will now see a contact form.
![](..//_images/howto_contactForm.jpg)
![](../../../_images/howto_contactForm.jpg)
Now that we have a contact form, we need some way of collecting the data submitted. We do this by creating a function on the controller with the same name as the form action. In this case, we create the function 'submit' on the ContactPage_Controller class.

View File

@ -21,19 +21,19 @@ All files, images and folders in the 'assets' directory are stored in the databa
If you have the CMS module installed, you can manage files, folders and images in the "Files" section of the CMS. Inside this section, you will see a list of files and folders like below:
![](//_images/assets.png)
![](../../_images/assets.png)
You can click on any file to edit it, or click on any folder to open it. To delete a file or a folder, simply click the red 'X' symbol next to it. If you click to open a folder, you can go back up one level by clicking the 'up' arrow above the folder name (highlighted below):
![](//_images/assets_up.png)
![](../../_images/assets_up.png)
Once you click to edit a file, you will see a form similar to the one below, in which you can edit the file's title, filename, owner, or even change which folder the file is located in:
![](//_images/assets_editform.png)
![](../../_images/assets_editform.png)
You may also notice the 'Sync files' button (highlighted below). This button allows CMS users to 'synchronise' the database (remember, all files/folders are stored as database records) with the filesystem. This is particularly useful if someone has uploaded or removed files/folders via FTP, for example.
![](//_images/assets_sync.png)
![](../../_images/assets_sync.png)
## Upload

View File

@ -39,7 +39,7 @@ example, the tab panels have be applied in the CMS form before the form itself i
avoid incorrect dimensions.
</div>
![Layout variations](/_images/cms-architecture.png)
![Layout variations](../../_images/cms-architecture.png)
## Layout API

View File

@ -41,7 +41,7 @@ code like this:
...
By applying the proper style sheet, the snippet html above could produce the look of:
![Page Node Screenshot](..//_images/tree_node.png "Page Node")
![Page Node Screenshot](../../../_images/tree_node.png "Page Node")
SiteTree is a `[api:DataObject]` which is versioned by `[api:Versioned]` extension.
Each node can optionally have publication status flags, e.g. "Removed from draft".
@ -76,6 +76,6 @@ __Example: using a subclass__
The above subclass of `[api:SiteTree]` will add a new flag for indicating its
__'Scheduled To Publish'__ status. The look of the page node will be changed
from ![Normal Page Node](..//_images/page_node_normal.png) to ![Scheduled Page Node](..//_images/page_node_scheduled.png). The getStatusFlags has an `updateStatusFlags()`
from ![Normal Page Node](../../../_images/page_node_normal.png) to ![Scheduled Page Node](../../../_images/page_node_scheduled.png). The getStatusFlags has an `updateStatusFlags()`
extension point, so the flags can be modified through `DataExtension` rather than
inheritance as well. Deleting existing flags works by simply unsetting the array key.

View File

@ -6,7 +6,7 @@ summary: Creating your own custom data or content reports.
Reports are a useful feature in the CMS designed to provide a view of your data or content. You can access
the site reports by clicking *Reports* in the left hand side bar and selecting the report you wish to view.
![](/_images/sitereport.png)
![](../../../_images/sitereport.png)
## Default reports

View File

@ -48,7 +48,7 @@ Special attention will need to be given to custom sections on a case-by-case bas
As we have changed the design of the CMS, the top bar for your custom sections is no longer needed. We've moved the
buttons that it once held down to the bottom.
![](/_images/cms22screenie.jpg)
![](_images/cms22screenie.jpg)
### Classes added to 2.2 that may conflict

View File

@ -403,8 +403,8 @@ We have also moved all fields from the "Metadata" tab into the "Main Content" ta
$fields->addFieldToTab('Root.Main', $myField);
$fields->addFieldToTab('Root.Main', $myOtherField);
![Tab paths in 2.4](/_images/tab-paths-before.png)
![Tab paths in 3.0](/_images/tab-paths-after.png)
![Tab paths in 2.4](_images/tab-paths-before.png)
![Tab paths in 3.0](_images/tab-paths-after.png)
The old paths are rewritten automatically, but will be deprecated in the next point release.
If you are working with tab objects directly in your `FieldSet`, you'll need to update
@ -421,7 +421,7 @@ to reduce UI clutter. You still need to address it through the usual tabset meth
as the underlying object structure doesn't change. Once you add more tabs,
e.g. to the "Root.Main" tab in `SiteTree`, the tab bar automatically shows.
![Tab paths in 3.0 with a custom tab](/_images/tab-paths-customtab.png)
![Tab paths in 3.0 with a custom tab](_images/tab-paths-customtab.png)
### New `SiteTree::$description` field to describe purpose of a page type [sitetree-description]###