For administrators - nla-pgh/website GitHub Wiki

Refinery CMS was deliberately chosen to restrict the editing of page layout from the administrative pages. This ensures a consistent layout across the board, and prevent those who are not knowledgeable of web formatting (HTML, JavaScript, CSS) from unintentionally messing up the code. If you are looking to change page layout, please refer to the page, for coders.

About this document

This document is split into two main sections:

  • Frontend: what the visitors of the site see
  • Backend: what administrators see and where to edit the content

Frontend describes the general layout of each page and how unique pages differ from the general pages.

Backend describes where to edit the page content show on the frontend.

Frontend

Above is the layout for the general pages. Every page of the website is broken down into 12 columns, the default for Twitter Bootstrap. The total width can be different depending on the width of the browser window. However, by default, the main body spans 8 columns and the side body spans 4 columns.

This layout works for all the pages except for the Media Gallery. The Media Gallery can either have the 8/4 column split as above or it can be 12 columns.

Backend

This section is most likely the area of interest. It documents how to add content to each page.

This is the layouts of the administrative page. This section will focus on the following tabs:

  • Pages
  • News
  • Portfolio

General Pages

Make sure that the Pages tab is selected, and you'll likely see this page. The pages will differ in name and/or number.

The controls for each page is on the right side:

Mousing over the icons will tell you each's function. Both edit and new will lead you to the following page, where content will be added.

For the general pages, there are only four (4) sections of interest:

  • Title
  • Subtitle (tab)
  • Body (tab)
  • Side Body (tab)

Title

Whatever is typed in the title will be displayed as the Page Title on the frontend.

Translates to:

However, as another note, the title also determines the URL of the page, in this case, the URL is /about.

This means that whenever the Title is changed, the URL of that particular page changes as well. For example, if the title is changed to About Us, the URL of the page will be /about-us. Therefore, after the Title is changed, make sure to visit the Home Page to reflect the change on the frontend.

Subtitle

The subtitle tab isn't present by default. If you would like to add a subtitle to a page, please click on the green + on the right side of the page tabs, and enter the Subtitle in the box.

Whatever content is added to the body of the Subtitle body will be displayed on the frontend next to the title.

Body & Side Body

The Body and Side Body tabs are pretty self-explanatory. Whatever content they contain is translated directly to the frontend body parts. Body is displayed as Main Body and the Side Body is displayed as the Side Body.

Home Page

Home Page is a special page, with different layout than the rest. Here is the layout:

Do NOT edit the home page's Body or Side Body tag. Instead, the tabs that CAN be changed are Documents and Partners. If the tabs are not present, add them using the green + button to the left of the page tabs.

Anything that's added to those tabs show up exactly on the frontend. Therefore, to create a list of documents:

This is displayed as:

Finally, Documents and Partners tabs on other pages do not display!. These tabs are specific to Home Page.

News and Events

News should where news articles be added. Do not edit the 'News' page in Pages.

The Frontend view of the index of articles. Along with the archives.

Add a news article. As of right now, the expiration date has no effect on the article.

And the article is displayed as such on the Frontend.

Overall, News is very self-explanatory, and few minutes of exploration should explain pretty much everything.

Media Gallery

Media Gallery is also known as Portfolio, which is located at the Portfolio tab. Portfolio has a different frontend display.

The page can be partitioned into either 8-column and 4-column or 12-column page. The 12-column is used to either display the gallery indices or to display the images within the gallery when there isn't a child gallery.

On the other hand, if the current gallery has any child galleries, those galleries will be displayed in the 4-column portion, while the gallery's images are displayed within the 8-column portion. Each image displayed will be 8-column wide. The image sizes cannot be changed.

To Add Galleries

Click Add New Gallery ... to add a new gallery.

Adding a title and body are displayed as such, with the first image within the gallery shown (This is the index view of the galleries (where it lists all the galleries)):

Galleries can be nested within another gallery. Select the parent gallery at the end of the page. If the gallery does not show up, save the current gallery and then edit the gallery again.

To Add Images

With the Portfolio tab selected, click Add New Image.

The Two Modes Illustrated

This is the screenshot of 8/4 column page with the gallery images shown on the left and the child galleries on the left.

Notice: Gallery Title, Gallery Body, Image Title, Image Caption and the child's Gallery Title and Gallery Caption.

And this is the screenshot of the 12-column page just showing the gallery images (because there isn't any child galleries).

The Portfolio is one of the more confusing and quirky aspect of the website. It is worthwhile to experiment with its functions to see how components are linked between the frontend and the backend.