1

Really easy-to-useZope-based Content Management

© iuveno AG 2003Joachim Werner

Charleroi, June 27, 2003

2

KONTENTOR: a 30 minute indroduction

● Installing KONTENTOR● Adding a KONTENTOR instance● Adding content● Customizing KONTENTOR● Internationalization● Resources, Downloads

3

Installing KONTENTOR

● Standard tarball installation into the Zope Products directory

● PIL (Python Imaging Library) is needed;install files for Windows are provided in a separate tarball

● Zope 2.6.1/2.6.2● Python 2.1.3 or 2.2.3.

4

Adding a KONTENTOR Instance

● Select Kontentor from the Add menu● Choose an Id

● A configuration wizard is run that helps with configuring the new KONTENTOR instance

5

6

7

8

9

10

11

12

Show/hide the tree viewShow/hide the tree view

13

Edit the current pageEdit the current page

14

SectionSection

15

SectionSection

16

Edit this element(the header)

Edit this element(the header)

17

New elementabove this one

New elementabove this one

18

19

20

21

Edit this elementEdit this element

22

Bavaria State University: University of Bavarian Culture

23

Move the headerto the top

Move the headerto the top

24

Publish the pagePublish the page

25

Add new page below this oneAdd new page below this one

26

Page is not published yet (red icon)Page is not published yet (red icon)

27

The page is edited byanother editor who usesthe WYSIWYG editor

in Internet Explorer 6.0.After editing the editor clicks

to request the review.

28

There is a review request for the page courses.The Reviewer visits the page and reviews it.Everything is o.k., so the reviewer publishes

the page.

There is a review request for the page courses.The Reviewer visits the page and reviews it.Everything is o.k., so the reviewer publishes

the page.

29

Copy, Paste, Symlink

● In KONTENTOR you can– Copy & paste– Cut & paste– Create symbolic links

● When elements are pasted to another page with a different chrome, the layout of the element changes automatically

30

Dynamic Content in KONTENTOR (I)

● Auto-publication with predefined publication and removal dates (per element!)

● Randomizer object (for banner or image rotation, arbitrary quotes etc.)

● News, events, press releases:– Top news– News archive, press releases archive– Top events– Event calendar

31

32

33

Dynamic Content in KONTENTOR (II)

● Quick index● Addresses from database● Full text search● Dynamic image resizing, image manipulation● Dynamically created graphical text buttons

● Fully integrated Newsletter system

34

35

The elements on this slide areall fed by the same addressobjects, but use differenttemplates. If the address

is changed, all occurencesof the address object areautomatically up-to-date.

36

Image Manipulation

Images can be– converted to different

image formats– resized– colorized or converted to

black & white– masked– ...

37

Customize a KONTENTOR instance

● Color scheme● Page layout● Stylesheets

● Element templates

38

Color Schemes

● The colors for a Chrome preset can be easily configured with the Color Scheme object.

● Additional colors can be added to the list.

39

KONTENTOR Page Layout

● The page layout is defined in a ZPT or DTML Method called index.html ...

● CSS 2 stylesheets in four layers allow changing the default styles without loosing upgradability ...

40

Element Templates:Utilizing the Power of Zope Page Templates

<div metal:define-macro="header"> <h1 tal:replace="structure string:${here/beginEdit}<h${here/size}>${here/text}</h${here/size}>${here/endEdit}">Header</h1> </div> <div metal:define-macro="textBlock"> <span tal:replace="here/beginEdit"></span> <div tal:content="structure here/processedText"> </div> <span tal:replace="here/endEdit"></span> </div> <div metal:define-macro="link"> <span tal:replace="here/beginEdit"></span> <p><a href="" tal:attributes="href here/completeLink; target here/target" target="_top"><img tal:replace="structure python:here.getChromeObject(here.typeOfLink(), render=0).tag()" src=""><span tal:replace="here/text">Link</span></a></p> <span tal:replace="here/endEdit"></span> </div>

<div metal:define-macro="separator"> <span tal:replace="here/beginEdit"></span> <hr tal:attributes="width here/width; size here/separatorSize" noshade="noshade"> <span tal:replace="here/endEdit"></span> </div>

41

Internationalization

● KONTENTOR is localized to German and English● Content as well as the user interface are multi-lingual.● Support for UTF 8 is currently being added

● Localizer is used as a message catalog● Support for Zbabel-style markup

42