0
Radiant CMS
Basic walkthrough
Radiant CMS
    Basic walkthrough

1 Radiant in onze workflow
2 Hoe werkt Radiant (basics)
3 Extensions
4 Vragen
5 Vragen a...
Radiant CMS
    Basic walkthrough

1 Radiant in onze workflow
2 Hoe werkt Radiant (basics)
3 Extensions
4 Vragen
5 Vragen a...
Gorilla
Digs ruby
Gorilla
           Digs ruby




Websites               Web-apps
Radiant                  Rails
Gorilla: Benny & Jelle

Benny
• Ruby/Rails/Radiant
• Web-apps met Rails
• Extensions voor
Gorilla: Benny & Jelle

Benny                  Jelle
• Ruby/Rails/Radiant   • Information Architect
• Web-apps met Rails  ...
Gorilla: Benny & Jelle

Benny                  Jelle
• Ruby/Rails/Radiant   • Information Architect
• Web-apps met Rails  ...
‘97
Gorilla: Zo gebruiken wij
Radiant
Benny
• Zet server/
repository op
• Zet Radiant instance
op
Gorilla: Zo gebruiken wij
Radiant
Benny                    Jelle
• Zet server/            • Maakt HTML templates
repositor...
Radiant
Radiant: Meet & Greet

• Open-source CMS (gebouwd in Rails)
Radiant: Meet & Greet

• Open-source CMS (gebouwd in Rails)
• Simpel (opgebouwd uit pages)
Radiant: Meet & Greet

• Open-source CMS (gebouwd in Rails)
• Simpel (opgebouwd uit pages)
• Toch flexibel (Parent/child mo...
Radiant: Meet & Greet

• Open-source CMS (gebouwd in Rails)
• Simpel (opgebouwd uit pages)
• Toch flexibel (Parent/child mo...
Radiant: Meet & Greet

• Open-source CMS (gebouwd in Rails)
• Simpel (opgebouwd uit pages)
• Toch flexibel (Parent/child mo...
Radiant: bouwstenen




   pages
Radiant: bouwstenen




   pages



 page-parts
Radiant: bouwstenen




   pages              snippets



 page-parts
Radiant: bouwstenen




   pages       layouts   snippets



 page-parts
Radiant: bouwstenen




   pages       layouts   snippets



 page-parts

               radius
Radiant: bouwstenen




   pages       layouts   snippets



 page-parts

               radius
Radiant: Layouts
Radiant: Layouts
<html>                            <img src=”g.gif” />
<head>…</head>                    <p>Welkom strange...
Radiant: Layouts
<html>                            <img src=”g.gif” />
<head>…</head>                    <p>Welkom strange...
Radiant:
Layouts
<html>                              <r:snippet
 <head>…</head>                     name=”footer” />
 <bod...
Radiant: Snippets
Radiant: Snippets (Header)
<p id=”logo”><a>GorillaCMS</a></p>
<ul id=”nav_main”>
 <li><a href=”/”>Home</a></li>
 <li><a hr...
Radiant: Snippets (Header)
<p id=”logo”><a>GorillaCMS</a></p>
<r:nav id=”nav_main” root=”/”
include_root=”true” depth=”1” ...
Radiant: Snippets (Footer)
<p id=”contact”>
 Ladies contact me on 0484 42 97 62<br />
 (will get naked for Rum - Arrrrr!)
...
Radiant: Pages
Radiant: Pages
Overzicht genereren van child pages

<ul id=”gorilla_soorten”>
 <r:children:each>
  <li>
    <h3><r:link />...
Radiant: Page-parts
Radiant: Page-parts
“overerving” van page-parts
<r:content part=”nav-sec” inherit=”true” />
Radiant: Page-parts
“overerving” van page-parts
<r:content part=”nav-sec” inherit=”true” />

Check op bestaan van page-par...
Radiant: Radius template language
Radiant: Radius template
language
• Tag-based template language developed for
Ruby
• Bindmiddel dat Radiant samen houdt
• ...
Radiant: Radius template
language
Voorbeelden van enkele handige tags

<r:find url=”/diensten” />   <r:link />
            ...
Extensions
Extensions: Extra flexibiliteit

Navigation tags (r:nav)   Gallery
Nested layouts            Gmaps
Mailer                  ...
Extensions: Nested layouts




      1-col layout     2-col layout
Extensions: Nested layouts




             MASTER LAYOUT
Extensions: Nested layouts




              MASTER LAYOUT




      1-col layout     2-col layout
Extensions: Nested layouts
1-col                    2-col
<html>                   <html>
  <head>…</head>           <head...
Extensions: Nested layouts
1 master layout                  1-col
<html>                           <r:inside_layout name=”...
Questions?
 (be gentle)
That’s it
Hit the bar!
Arrrrcamp Radiant Intro
Upcoming SlideShare
Loading in...5
×

Arrrrcamp Radiant Intro

877

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
877
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Arrrrcamp Radiant Intro"

  1. 1. Radiant CMS Basic walkthrough
  2. 2. Radiant CMS Basic walkthrough 1 Radiant in onze workflow 2 Hoe werkt Radiant (basics) 3 Extensions 4 Vragen 5 Vragen aan de bar
  3. 3. Radiant CMS Basic walkthrough 1 Radiant in onze workflow 2 Hoe werkt Radiant (basics) 3 Extensions 4 Vragen 5 Vragen aan de bar Get wasted! fuck yeaaah!!!
  4. 4. Gorilla Digs ruby
  5. 5. Gorilla Digs ruby Websites Web-apps Radiant Rails
  6. 6. Gorilla: Benny & Jelle Benny • Ruby/Rails/Radiant • Web-apps met Rails • Extensions voor
  7. 7. Gorilla: Benny & Jelle Benny Jelle • Ruby/Rails/Radiant • Information Architect • Web-apps met Rails • Designer & Slicer • Extensions voor • Non-programmer
  8. 8. Gorilla: Benny & Jelle Benny Jelle • Ruby/Rails/Radiant • Information Architect • Web-apps met Rails • Designer & Slicer • Extensions voor • Non-programmer Radiant
  9. 9. ‘97
  10. 10. Gorilla: Zo gebruiken wij Radiant Benny • Zet server/ repository op • Zet Radiant instance op
  11. 11. Gorilla: Zo gebruiken wij Radiant Benny Jelle • Zet server/ • Maakt HTML templates repository op • Bouwt website op in • Zet Radiant instance Radiant op • Gebruikt alleen Radiant
  12. 12. Radiant
  13. 13. Radiant: Meet & Greet • Open-source CMS (gebouwd in Rails)
  14. 14. Radiant: Meet & Greet • Open-source CMS (gebouwd in Rails) • Simpel (opgebouwd uit pages)
  15. 15. Radiant: Meet & Greet • Open-source CMS (gebouwd in Rails) • Simpel (opgebouwd uit pages) • Toch flexibel (Parent/child model, page-parts & radius)
  16. 16. Radiant: Meet & Greet • Open-source CMS (gebouwd in Rails) • Simpel (opgebouwd uit pages) • Toch flexibel (Parent/child model, page-parts & radius) • Modulair (+300 extensions op GitHub)
  17. 17. Radiant: Meet & Greet • Open-source CMS (gebouwd in Rails) • Simpel (opgebouwd uit pages) • Toch flexibel (Parent/child model, page-parts & radius)
  18. 18. Radiant: bouwstenen pages
  19. 19. Radiant: bouwstenen pages page-parts
  20. 20. Radiant: bouwstenen pages snippets page-parts
  21. 21. Radiant: bouwstenen pages layouts snippets page-parts
  22. 22. Radiant: bouwstenen pages layouts snippets page-parts radius
  23. 23. Radiant: bouwstenen pages layouts snippets page-parts radius
  24. 24. Radiant: Layouts
  25. 25. Radiant: Layouts <html> <img src=”g.gif” /> <head>…</head> <p>Welkom stranger.</p> <body> </div> <div id=”header”> <div id=”content_sec”> <p id=”logo”> <ul id=”nav_sec”> <a href=”/”>Radiant</a> <li>…</li> </p> … <ul id=”nav_main”> </ul> <li> <h3>Gorilla’s</h3> <a href=”/”>Home</a> <p>Ze zijn de max</p> </li> </div> … <div id=”footer”> </ul> <p>Contact info</p> </div> </div> <div id=”content”> </div> <div id=”content_main”> </body> <h1>Welkom!</h1> </html>
  26. 26. Radiant: Layouts <html> <img src=”g.gif” /> <head>…</head> <p>Welkom stranger.</p> <body> </div> <div id=”header”> <div id=”content_sec”> <p id=”logo”> <ul id=”nav_sec”> <a href=”/”>Radiant</a> <li>…</li> </p> … <ul id=”nav_main”> </ul> <li> <h3>Gorilla’s</h3> <a href=”/”>Home</a> <p>Ze zijn de max</p> </li> </div> … <div id=”footer”> </ul> <p>Contact info</p> </div> </div> <div id=”content”> </div> <div id=”content_main”> </body> <h1>Welkom!</h1> </html>
  27. 27. Radiant: Layouts <html> <r:snippet <head>…</head> name=”footer” /> <body> </div> <div id=”header”> </div> <r:snippet name=”header” /> </body> </div> </html> <div id=”content”> <div id=”content_main”> <r:content /> </div> <div id=”content_sec”> <r:content part=”nav_sec” /> <r:content part=”content_sec /> </div> <div id=”footer”>
  28. 28. Radiant: Snippets
  29. 29. Radiant: Snippets (Header) <p id=”logo”><a>GorillaCMS</a></p> <ul id=”nav_main”> <li><a href=”/”>Home</a></li> <li><a href=”/soorten”>Soorten</a></li> … </ul>
  30. 30. Radiant: Snippets (Header) <p id=”logo”><a>GorillaCMS</a></p> <r:nav id=”nav_main” root=”/” include_root=”true” depth=”1” />
  31. 31. Radiant: Snippets (Footer) <p id=”contact”> Ladies contact me on 0484 42 97 62<br /> (will get naked for Rum - Arrrrr!) </p>
  32. 32. Radiant: Pages
  33. 33. Radiant: Pages Overzicht genereren van child pages <ul id=”gorilla_soorten”> <r:children:each> <li> <h3><r:link /></h3> <p><r:content /></p> </li> </r:children:each> </ul>
  34. 34. Radiant: Page-parts
  35. 35. Radiant: Page-parts “overerving” van page-parts <r:content part=”nav-sec” inherit=”true” />
  36. 36. Radiant: Page-parts “overerving” van page-parts <r:content part=”nav-sec” inherit=”true” /> Check op bestaan van page-parts <r:if_content part=”nav-sec”> <div><r:content part=”nav-sec” /></div> </r:if_content>
  37. 37. Radiant: Radius template language
  38. 38. Radiant: Radius template language • Tag-based template language developed for Ruby • Bindmiddel dat Radiant samen houdt • Heel simpel, heel flexibel • Speelt goed in op Parent/child model van
  39. 39. Radiant: Radius template language Voorbeelden van enkele handige tags <r:find url=”/diensten” /> <r:link /> <r:title /> <r:next by=”title” /> <r:slug /> <r:previous by=”date” /> <r:breadcrumb /> <r:site_area /> <r:breadcrumbs /> <r:site_sub_area /> <r:gallery:lightbox id=”3” /> <r:nav id=“subnav” /> <r:if_content part=”foo” /> <r:children:each /> <r:unless_content part=”foo” /> <r:children:count />
  40. 40. Extensions
  41. 41. Extensions: Extra flexibiliteit Navigation tags (r:nav) Gallery Nested layouts Gmaps Mailer Blog Settings Archive WYM Editor Filter Paperclipped
  42. 42. Extensions: Nested layouts 1-col layout 2-col layout
  43. 43. Extensions: Nested layouts MASTER LAYOUT
  44. 44. Extensions: Nested layouts MASTER LAYOUT 1-col layout 2-col layout
  45. 45. Extensions: Nested layouts 1-col 2-col <html> <html> <head>…</head> <head>…</head> <body> <body> <div id=”content”> <div id=”content”> <r:content /> <div id=”col-1”> </div> <r:content /> </body> </div> </html> <div id=”col-2”> <r:content part=”detail” /> </div> </div> </body> </html>
  46. 46. Extensions: Nested layouts 1 master layout 1-col <html> <r:inside_layout name=”master”> <head>…</head> <r:content /> <body> </r:inside_layout> <div id=”content”> <r:content_for_layout /> </div> 2-col </body> </html> <r:inside_layout name=”master”> <div id=”col-1”> <r:content /> </div> <div id=”col-2”> <r:content part=”detail” /> </div> </r:inside_layout>
  47. 47. Questions? (be gentle)
  48. 48. That’s it Hit the bar!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×