Content and user types layout
Transcript of Content and user types layout
![Page 1: Content and user types layout](https://reader030.fdocuments.net/reader030/viewer/2022032421/55a7a8cf1a28ab6e638b45d6/html5/thumbnails/1.jpg)
Content layouts12/11/2013
Content and User Types Layout
www.rubedo-project.org
Rubedo 3.x
![Page 2: Content and user types layout](https://reader030.fdocuments.net/reader030/viewer/2022032421/55a7a8cf1a28ab6e638b45d6/html5/thumbnails/2.jpg)
Rubedo CMS : Designing content and user layouts
www.rubedo-project.org
� You can create custom content and user layouts.
� Thanks to these layouts, the detail view of your contents/users can be modified in the front-end display.
– For each of your Content types and User types, you can create your own custom layout by selecting the fields (title, summary, date, image…) you want to be displayed. To go any further, you can decide whether each element will be displayed or not for each device (large desktop, desktop, tablet or smartphone).
![Page 3: Content and user types layout](https://reader030.fdocuments.net/reader030/viewer/2022032421/55a7a8cf1a28ab6e638b45d6/html5/thumbnails/3.jpg)
Different layouts in front-end
www.rubedo-project.org
In this example, the same article isdisplayed with two different layouts.
![Page 4: Content and user types layout](https://reader030.fdocuments.net/reader030/viewer/2022032421/55a7a8cf1a28ab6e638b45d6/html5/thumbnails/4.jpg)
Step 1 : log in the back-end, Example for Content types
1. Open the start menu
2. Studio features
3. Content types
1 - Menu
2 - Studio
3 – Content types
![Page 5: Content and user types layout](https://reader030.fdocuments.net/reader030/viewer/2022032421/55a7a8cf1a28ab6e638b45d6/html5/thumbnails/5.jpg)
Step 2 : Select a content type
� Once a content type is selected, the « Edit » tab is displayed.
Select a content type
![Page 6: Content and user types layout](https://reader030.fdocuments.net/reader030/viewer/2022032421/55a7a8cf1a28ab6e638b45d6/html5/thumbnails/6.jpg)
Step 2 : Select a content type
� Each content has its own fields (title, summary, date, image, ...)
In this example, the « Wiki » content type has the followingfields :• Title• Summary• Text• Image• Location
![Page 7: Content and user types layout](https://reader030.fdocuments.net/reader030/viewer/2022032421/55a7a8cf1a28ab6e638b45d6/html5/thumbnails/7.jpg)
Step 2 : Select on content type
� On the front-end, the different fields of the « wiki » content are displayed :
Title
Location
Image
Text
![Page 8: Content and user types layout](https://reader030.fdocuments.net/reader030/viewer/2022032421/55a7a8cf1a28ab6e638b45d6/html5/thumbnails/8.jpg)
Step 2 : Select a content type
� When you create a new content type, the fields are displayed by default one below another.
� Our new « Wiki » content type does not have a specific layout yet.
![Page 9: Content and user types layout](https://reader030.fdocuments.net/reader030/viewer/2022032421/55a7a8cf1a28ab6e638b45d6/html5/thumbnails/9.jpg)
Step 2 : Select a content type
� In the Content Types application, once the « Wiki » content type is selected, click on the « Layout » tab.
« Layouts » tab lets you create new custom layouts.
![Page 10: Content and user types layout](https://reader030.fdocuments.net/reader030/viewer/2022032421/55a7a8cf1a28ab6e638b45d6/html5/thumbnails/10.jpg)
Step 3 : Create a new layout
1. Click on « Add »
2. Give your new layout a name
1 – Add a new layout
2 – Give it a name and click on « Create new layout »
![Page 11: Content and user types layout](https://reader030.fdocuments.net/reader030/viewer/2022032421/55a7a8cf1a28ab6e638b45d6/html5/thumbnails/11.jpg)
Step 3 : Create a new layout
� Once you have given a name to your layout, the fields of your content type are displayed as a list.
Name of the new layout
List of the fields of your content type
![Page 12: Content and user types layout](https://reader030.fdocuments.net/reader030/viewer/2022032421/55a7a8cf1a28ab6e638b45d6/html5/thumbnails/12.jpg)
Step 3 : Create a new layout
http://www.rubedo-project.org
� Creating a new layout is based on the same principles as creating a new page or a new page mask :
1. You can add rows to define areas of your layout.
2. You can divide rows into columns.
3. You can add fields into columns.
� Properties on rows and columns let you define on which devices (desktop, tablet, smartphone) these elements will be displayed.
� Width of rows are in percentage for responsive web design, based on a 12-column grid (« span »). « Offset » corresponds to a space left blank.
![Page 13: Content and user types layout](https://reader030.fdocuments.net/reader030/viewer/2022032421/55a7a8cf1a28ab6e638b45d6/html5/thumbnails/13.jpg)
Step 3 : Create a new layout
http://www.rubedo-project.org
� Select the main frame
Frame
![Page 14: Content and user types layout](https://reader030.fdocuments.net/reader030/viewer/2022032421/55a7a8cf1a28ab6e638b45d6/html5/thumbnails/14.jpg)
Step 3 : Create a new layout
http://www.rubedo-project.org
� Add new rows, and then new columns inside rows.
Specify span, offset and visibility
Column
![Page 15: Content and user types layout](https://reader030.fdocuments.net/reader030/viewer/2022032421/55a7a8cf1a28ab6e638b45d6/html5/thumbnails/15.jpg)
Step 3 : Create a new layout
� Once you have divided your layout into rows and columns, you can assign one field or more in each column, by selecting it thanks to the combobox.
![Page 16: Content and user types layout](https://reader030.fdocuments.net/reader030/viewer/2022032421/55a7a8cf1a28ab6e638b45d6/html5/thumbnails/16.jpg)
Step 3 : Create a new layout
http://www.rubedo-project.org
� The layout must now be activated and saved.
Activate the layout
Save
![Page 17: Content and user types layout](https://reader030.fdocuments.net/reader030/viewer/2022032421/55a7a8cf1a28ab6e638b45d6/html5/thumbnails/17.jpg)
Step 4 : Check your new layout on the front-end
http://www.rubedo-project.org
� The new layout should now be taken into account :
Title
Summary
Adress
Text
Image
![Page 18: Content and user types layout](https://reader030.fdocuments.net/reader030/viewer/2022032421/55a7a8cf1a28ab6e638b45d6/html5/thumbnails/18.jpg)
Create new content layouts
http://www.rubedo-project.org
� To sum up :
– A custom detail layout can be created for each content type.
– Within multilingual websites, layout applies for all languages.
– Activated layouts are applied in real time in the front-end.
� You can also add a custom template.
� Other tutorials are available on www.rubedo-project.org
![Page 19: Content and user types layout](https://reader030.fdocuments.net/reader030/viewer/2022032421/55a7a8cf1a28ab6e638b45d6/html5/thumbnails/19.jpg)
http://www.rubedo-project.org
Documentation and tutorials :docs.rubedo-project.org
@Rubedo_project