Arrrrcamp Radiant Intro

Basic walkthroughRadiant CMS


1 Radiant in onze workflow2 Hoe werkt Radiant (basics)3 Extensions4 Vragen5 Vragen aan de bar


Get wasted! fuck yeaaah!!!

1 Radiant in onze workflow2 Hoe werkt Radiant (basics)3 Extensions4 Vragen5 Vragen aan de bar

GorillaDigs ruby

Gorilla

WebsitesRadiant

Web-appsRails

Digs ruby

Gorilla: Benny & Jelle

Benny• Ruby/Rails/Radiant• Web-apps met Rails• Extensions voor


Benny• Ruby/Rails/Radiant• Web-apps met Rails• Extensions voor

Jelle• Information Architect• Designer & Slicer• Non-programmer


Benny• Ruby/Rails/Radiant• Web-apps met Rails• Extensions voor Radiant

Jelle• Information Architect• Designer & Slicer• Non-programmer

‘97

Gorilla: Zo gebruiken wij RadiantBenny• Zet server/repository op• Zet Radiant instance op

Gorilla: Zo gebruiken wij RadiantBenny• Zet server/repository op• Zet Radiant instance op

Jelle• Maakt HTML templates • Bouwt website op in Radiant• Gebruikt alleen Radiant

Radiant

Radiant: Meet & Greet

• Open-source CMS (gebouwd in Rails)


• Open-source CMS (gebouwd in Rails)• Simpel (opgebouwd uit pages)


• Open-source CMS (gebouwd in Rails)• Simpel (opgebouwd uit pages)• Toch flexibel (Parent/child model, page-parts & radius)


• Open-source CMS (gebouwd in Rails)• Simpel (opgebouwd uit pages)• Toch flexibel (Parent/child model, page-parts & radius)• Modulair (+300 extensions op GitHub)


• Open-source CMS (gebouwd in Rails)• Simpel (opgebouwd uit pages)• Toch flexibel (Parent/child model, page-parts & radius)

pages

Radiant: bouwstenen

pages

page-parts

Radiant: bouwstenen

pages

page-parts

snippets

Radiant: bouwstenen

pages

page-parts

layouts snippets

Radiant: bouwstenen

pages

page-parts

snippets

Radiant: bouwstenen

radius

layouts

pages

page-parts

snippets

Radiant: bouwstenen

radius

layouts

Radiant: Layouts

Radiant: Layouts<html> <head>…</head> <body> <div id=”header”> <p id=”logo”> <a href=”/”>Radiant</a> </p> <ul id=”nav_main”> <li> <a href=”/”>Home</a> </li> … </ul> </div> <div id=”content”> <div id=”content_main”> <h1>Welkom!</h1>

<img src=”g.gif” /> <p>Welkom stranger.</p> </div> <div id=”content_sec”> <ul id=”nav_sec”> <li>…</li> … </ul> <h3>Gorilla’s</h3> <p>Ze zijn de max</p> </div> <div id=”footer”> <p>Contact info</p> </div> </div> </body></html>

Radiant: Layouts<html> <head>…</head> <body> <div id=”header”> <p id=”logo”> <a href=”/”>Radiant</a> </p> <ul id=”nav_main”> <li> <a href=”/”>Home</a> </li> … </ul> </div> <div id=”content”> <div id=”content_main”> <h1>Welkom!</h1>

<img src=”g.gif” /> <p>Welkom stranger.</p> </div> <div id=”content_sec”> <ul id=”nav_sec”> <li>…</li> … </ul> <h3>Gorilla’s</h3> <p>Ze zijn de max</p> </div> <div id=”footer”> <p>Contact info</p> </div> </div> </body></html>

Radiant: Layouts<html> <head>…</head> <body> <div id=”header”> <r:snippet name=”header” /> </div> <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”>

<r:snippet name=”footer” /> </div> </div> </body></html>

Radiant: Snippets

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>

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!)</p>

Radiant: Pages

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>

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-parts<r:if_content part=”nav-sec”> <div><r:content part=”nav-sec” /></div></r:if_content>

Radiant: Radius template language

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

Radiant: Radius template language

<r:find url=”/diensten” />

<r:next by=”title” /><r:previous by=”date” />

<r:site_area /><r:site_sub_area />

<r:nav id=“subnav” />

<r:children:each /><r:children:count />

<r:link /><r:title /><r:slug /><r:breadcrumb />

<r:breadcrumbs />

<r:gallery:lightbox id=”3” />

<r:if_content part=”foo” /><r:unless_content part=”foo” />

Voorbeelden van enkele handige tags

Extensions

Extensions: Extra flexibiliteit

Navigation tags (r:nav)Nested layoutsMailerSettingsWYM Editor Filter

GalleryGmapsBlogArchivePaperclipped

Extensions: Nested layouts

1-col layout 2-col layout


MASTER LAYOUT


MASTER LAYOUT

1-col layout 2-col layout


<html><head>…</head><body>

<div id=”content”><r:content />

</div></body>

</html>


<div id=”content”><div id=”col-1”>

<r:content /></div><div id=”col-2”>

<r:content part=”detail” />

</div></div>

</body></html>

1-col 2-col



<div id=”content”><r:content_for_layout />

</div></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>

1 master layout

2-col

<r:inside_layout name=”master”><r:content />

</r:inside_layout>

1-col

Questions?(be gentle)

That’s itHit the bar!

Arrrrcamp Radiant Intro

Technology