Top Banner
Basic walkthrough Radiant CMS
49

Arrrrcamp Radiant Intro

Nov 29, 2014

Download

Technology

ArrrrCamp

 
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Arrrrcamp Radiant Intro

Basic walkthroughRadiant CMS

Page 2: Arrrrcamp Radiant Intro

Basic walkthroughRadiant CMS

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

Page 3: Arrrrcamp Radiant Intro

Basic walkthroughRadiant CMS

Get wasted! fuck yeaaah!!!

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

Page 4: Arrrrcamp Radiant Intro

GorillaDigs ruby

Page 5: Arrrrcamp Radiant Intro

Gorilla

WebsitesRadiant

Web-appsRails

Digs ruby

Page 6: Arrrrcamp Radiant Intro

Gorilla: Benny & Jelle

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

Page 7: Arrrrcamp Radiant Intro

Gorilla: Benny & Jelle

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

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

Page 8: Arrrrcamp Radiant Intro

Gorilla: Benny & Jelle

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

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

Page 9: Arrrrcamp Radiant Intro
Page 10: Arrrrcamp Radiant Intro

‘97

Page 11: Arrrrcamp Radiant Intro

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

Page 12: Arrrrcamp Radiant Intro

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

Page 13: Arrrrcamp Radiant Intro

Radiant

Page 14: Arrrrcamp Radiant Intro

Radiant: Meet & Greet

• Open-source CMS (gebouwd in Rails)

Page 15: Arrrrcamp Radiant Intro

Radiant: Meet & Greet

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

Page 16: Arrrrcamp Radiant Intro

Radiant: Meet & Greet

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

Page 17: Arrrrcamp Radiant Intro

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)

Page 18: Arrrrcamp Radiant Intro

Radiant: Meet & Greet

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

Page 19: Arrrrcamp Radiant Intro

pages

Radiant: bouwstenen

Page 20: Arrrrcamp Radiant Intro

pages

page-parts

Radiant: bouwstenen

Page 21: Arrrrcamp Radiant Intro

pages

page-parts

snippets

Radiant: bouwstenen

Page 22: Arrrrcamp Radiant Intro

pages

page-parts

layouts snippets

Radiant: bouwstenen

Page 23: Arrrrcamp Radiant Intro

pages

page-parts

snippets

Radiant: bouwstenen

radius

layouts

Page 24: Arrrrcamp Radiant Intro

pages

page-parts

snippets

Radiant: bouwstenen

radius

layouts

Page 25: Arrrrcamp Radiant Intro

Radiant: Layouts

Page 26: Arrrrcamp Radiant Intro

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>

Page 27: Arrrrcamp Radiant Intro

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>

Page 28: Arrrrcamp Radiant Intro

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>

Page 29: Arrrrcamp Radiant Intro

Radiant: Snippets

Page 30: Arrrrcamp Radiant Intro

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>

Page 31: Arrrrcamp Radiant Intro

Radiant: Snippets (Header)

<p id=”logo”><a>GorillaCMS</a></p><r:nav id=”nav_main” root=”/” include_root=”true” depth=”1” />

Page 32: Arrrrcamp Radiant Intro

Radiant: Snippets (Footer)

<p id=”contact”> Ladies contact me on 0484 42 97 62<br /> (will get naked for Rum - Arrrrr!)</p>

Page 33: Arrrrcamp Radiant Intro

Radiant: Pages

Page 34: Arrrrcamp Radiant Intro

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>

Page 35: Arrrrcamp Radiant Intro

Radiant: Page-parts

Page 36: Arrrrcamp Radiant Intro

Radiant: Page-parts

“overerving” van page-parts<r:content part=”nav-sec” inherit=”true” />

Page 37: Arrrrcamp Radiant Intro

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>

Page 38: Arrrrcamp Radiant Intro

Radiant: Radius template language

Page 39: Arrrrcamp Radiant Intro

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

Page 40: Arrrrcamp Radiant Intro

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

Page 41: Arrrrcamp Radiant Intro

Extensions

Page 42: Arrrrcamp Radiant Intro

Extensions: Extra flexibiliteit

Navigation tags (r:nav)Nested layoutsMailerSettingsWYM Editor Filter

GalleryGmapsBlogArchivePaperclipped

Page 43: Arrrrcamp Radiant Intro

Extensions: Nested layouts

1-col layout 2-col layout

Page 44: Arrrrcamp Radiant Intro

Extensions: Nested layouts

MASTER LAYOUT

Page 45: Arrrrcamp Radiant Intro

Extensions: Nested layouts

MASTER LAYOUT

1-col layout 2-col layout

Page 46: Arrrrcamp Radiant Intro

Extensions: Nested layouts

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

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

</div></body>

</html>

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

<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

Page 47: Arrrrcamp Radiant Intro

Extensions: Nested layouts

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

<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

Page 48: Arrrrcamp Radiant Intro

Questions?(be gentle)

Page 49: Arrrrcamp Radiant Intro

That’s itHit the bar!