3. OpenMind 2009 – Magnolia Conference – September 10-11, 2009 – Basel, Switzerland 3
About Openmind
►Italian company -based in Monza-, partner of Magnolia
International and working with Magnolia CMS since its
first open source release
►We contribute to the development of Magnolia CMS itself
and we have a lot of experience in complex Magnolia
projects...
►We are currently working on various industries:
automotive, energy & utilities, financial services,
manufacturing, retail & consumer products, services,
technology & communications
4. OpenMind 2009 – Magnolia Conference – September 10-11, 2009 – Basel, Switzerland 4
Openmind Opensource
►Openmind projects are mostly based on open source
software (of course Magnolia!)
►Our love for open source is not limited to this: we want to
help open source by collaborating to projects and by
making them grow
►Across years we used hundreds of tools in our projects
and we often had to improve them and to make them
grow, driving us to participate with the role of contributors
or main developers to open source communities. We also
developed a lot of “useful things” we'd like to share.
5. OpenMind 2009 – Magnolia Conference – September 10-11, 2009 – Basel, Switzerland 5
OpenmindLAB: our new initiative
►OpenmindLAB ties together several open source projects
we have developed and still maintaining
►With the OpenmindLAB we want to highlight this important
activity and make our software more useful to other
people
►On OpenmindLAB you can find Magnolia modules and
tools (as well as some useful non-magnolia related j2ee
tools)
6. OpenMind 2009 – Magnolia Conference – September 10-11, 2009 – Basel, Switzerland 6
► SimpleMedia is a module for
Magnolia CMS that allows a
centralized management of all
medias to be used in a website
(images, YouTube movies, flvs,
mp3s)
► Editors can now upload medias
and use them in many pages
across the site without
struggling with image formats or
image resizing
► SimpleMedia is already running
on the web applications of:
7. OpenMind 2009 – Magnolia Conference – September 10-11, 2009 – Basel, Switzerland 7
► Magnolia Stripes Module is a
custom Magnolia module which
integrates the Stripes MVC
framework into Magnolia
► After installed into Magnolia, this
module will allow you to use any
available Stripes action as a
Magnolia paragraph
► Any magically-converted Stripes
action will still be able to use
any standard Stripes feature,
plus it will enjoy the automatic
injection of any paragraph
property
► Magnolia Stripes Module is
already running on the web
applications of:
8. OpenMind 2009 – Magnolia Conference – September 10-11, 2009 – Basel, Switzerland 8
► The Magnolia Struts Module is a
custom Magnolia module which
integrates the Struts 1.1
framework into Magnolia-
powered websites
► After installed into Magnolia, this
module will allow you to use any
available Struts action/forward
as a Magnolia paragraph
► Magnolia Struts Module is
already running on the web
applications of:
9. OpenMind 2009 – Magnolia Conference – September 10-11, 2009 – Basel, Switzerland 9
► Magnolia BootstrapSync Module
allows you to automatically
export to filesystem your
changes in Magnolia
repositories
► The module is intended to be
used during development only
► It's mostly useful when
developing in team, in order to
assure that any configuration
change is exported
► Magnolia BootstrapSync Module
is already running on the web
applications of:
10. OpenMind 2009 – Magnolia Conference – September 10-11, 2009 – Basel, Switzerland 10
► Magnolia Controls Module adds
useful controls that can be used
in Magnolia dialogs
► Magnolia Controls Module is
already running on the web
applications of:
11. OpenMind 2009 – Magnolia Conference – September 10-11, 2009 – Basel, Switzerland 11
► Magnolia Criteria (openutils-
mgnlcriteria) is a simplified API for
retrieving JCR Nodes by composing
Criterion objects.
► This is a very convenient approach
for functionality like "search"
screens where there is a variable
number of conditions to be placed
upon the result set
► openutils-mgnlcriteria API was
inspired by Hibernate's Criteria API:
if you are already familiar with
Hibernate's Criteria, you will find
almost no difference (type names
and methods have been kept the
same on purpose, wherever
possible)
► Magnolia Criteria API is already
running on the web applications of:
12. OpenMind 2009 – Magnolia Conference – September 10-11, 2009 – Basel, Switzerland 12
► Magnolia Groovy Shell is a
custom Magnolia module which
adds a console for running
groovy scripts inside the
Magnolia admin interface
► This module allows to leverage
all the power of Groovy+Java
within Magnolia for all kinds of
administrative tasks, without the
need for precompiling and
deploying any Java class
► Magnolia Groovy Shell is
already running on the web
applications of:
13. OpenMind 2009 – Magnolia Conference – September 10-11, 2009 – Basel, Switzerland 13
► Magnolia Messages is a custom
Magnolia module which adds a
GUI for translating messages
inside the magnolia admin
interface
► Magnolia Massages Module is
already running on the web
applications of:
15. OpenMind 2009 – Magnolia Conference – September 10-11, 2009 – Basel, Switzerland 15
The SimpleMedia module
16. OpenMind 2009 – Magnolia Conference – September 10-11, 2009 – Basel, Switzerland 16
Why a Media Module?
► From a business point of
view, adoption of
SimpleMedia is as useful
as...
►Centralized management of
multimedia assets
►Tracking of media usage
►Handle resize, crop and
effects on images
►Link and view remote flv
videos (i.e. youtube)
► From a developer point of
view, integrating
SimpleMedia is as simple
as...
►Add a control to your dialog
in order to allow users to
select media
►Use the tag media or the
simplemedia el functions to
render assets in your
paragraphs
17. OpenMind 2009 – Magnolia Conference – September 10-11, 2009 – Basel, Switzerland 17
Maserati's choice
► SimpleMedia is Maserati's choice for organizing,
storing and sharing, all together in a single
repository, 1.500 images, telling its own vehicles'
history and evolution: the brand's own luxury
espressed by:
► detailed images in their own original size
► featuring titles
► captions
► descriptions and tags
► With Simple Media editors from the 8 designed
websites become completely independent in
updating visual contents, with neither the need of
image manipulation tools nor having to manage
technical skills in web-editing:
► image resizing
► content insertion
► gallery and slide show creation
► www.maserati.com
18. OpenMind 2009 – Magnolia Conference – September 10-11, 2009 – Basel, Switzerland 18
Main features
Global features
► Centralized media management
► Filesystem-like media organization (by nested folders)
► Support uploading zip files for one-shot medias loading (replicates folders structure)
► Show pages where a media is used
► Copy / move / delete / publish a media
► Preview medias
► Extensible by adding new media types
Images
► Work with jpeg, gif, png image formats
► Preserve transparency
► Handle CMYK images and Adobe Photoshop color profiles (YCCK)
► Automatic image scaling
► Fit-in modality: image is scaled to fit a defined area
► Fill modality: image is scaled and then cropped (centered) to fill a defined area
► Cache trasformed images
Movies, swfs and mp3s
► Supports YouTube (by movie page url) and flv movies
► Playback by JW Player
19. OpenMind 2009 – Magnolia Conference – September 10-11, 2009 – Basel, Switzerland 19
Browsing media repository
20. OpenMind 2009 – Magnolia Conference – September 10-11, 2009 – Basel, Switzerland 20
Select an image
to use in a paragraph
21. OpenMind 2009 – Magnolia Conference – September 10-11, 2009 – Basel, Switzerland 21
Show where a media is used
22. OpenMind 2009 – Magnolia Conference – September 10-11, 2009 – Basel, Switzerland 22
Working on media
23. OpenMind 2009 – Magnolia Conference – September 10-11, 2009 – Basel, Switzerland 23
Preview of an image
24. OpenMind 2009 – Magnolia Conference – September 10-11, 2009 – Basel, Switzerland 24
Preview of Youtube video
25. OpenMind 2009 – Magnolia Conference – September 10-11, 2009 – Basel, Switzerland 25
It's demo time !
26. OpenMind 2009 – Magnolia Conference – September 10-11, 2009 – Basel, Switzerland 26
How to use it from a developer point
of view?
27. OpenMind 2009 – Magnolia Conference – September 10-11, 2009 – Basel, Switzerland 27
How to add the media selection
control to a dialog
28. OpenMind 2009 – Magnolia Conference – September 10-11, 2009 – Basel, Switzerland 28
Ho to display a media in page?
All can be done using the <media> tag library, which contains tag
and EL functions
The basic tag/functions are:
<media:media>
can be used to embed images, videos, ...
${media:url(medianode)}
can be used to get the url for the image from the UUID
${media:urlres(medianode, '100x100')}
generates the image at the requested resolution, cache it, and
return the urls
29. OpenMind 2009 – Magnolia Conference – September 10-11, 2009 – Basel, Switzerland 29
<media:media>
media:media tag will help you by rendering according to media
type
<media:media item=”${content.mediaUUID}” width=”640”
height=”480” autoplay=”true” />
If media type is audio, video or youtube tag media will render an
instance of JW Player (see http://www.longtailvideo.com)
30. OpenMind 2009 – Magnolia Conference – September 10-11, 2009 – Basel, Switzerland 30
Media tag attributes
id false
item
false
false
alt
false
false
false
false
false
false
loop false loopvideoor audio
false
false
Property Required Description
html element id
true mediauuidor mediacontent node
width imageor player width
height imageor player height
alt / titleonimages. If not specified, thetitleof themedia(if present) will be
used
cssClass cssClasstobeappliedonhtml element
style styletobeappliedonhtml element
resize 'false validvaluesare
fit:makesthenewimagetofit intorequiredres
nocrop:makesthenewimagetocontaintherequiredres
crop:makesthenewimagetocontaintherequiredresandthecropthe
simmetricbandsthat outfit res
fitbands:makesthenewimagetofit intorequiredresandfillsemptyareas
withbackgroundcolor youpasstoin"parameter" attributeashexvalueof
"background" parameter (i.e. paramters='background=FF67A5')
parameters parameterstopasstoimageprocessor ascoupleskey=valuejoinedby
commas
ignoreDim if truetheimgelement will berenderedwithout widthandheight attributes
autoPlay autostartstheplayer without waitingfor user playcommand
noPlayIcon hideplayer icons
skin set player skin
Property Required Description
id false htmlelementid
item true mediauuidormediacontentnode
width false imageorplayerwidth
height false imageorplayerheight
alt
false
cssClass false cssClasstobeappliedonhtmlelement
style false styletobeappliedonhtmlelement
alt/titleonimages.Ifnotspecified,thetitleofthemedia(ifpresent)w
used
resize 'false validvaluesare
fit:makesthenewimagetofitintorequiredres
nocrop:makesthenewimagetocontaintherequiredres
crop:makesthenewimagetocontaintherequiredresandthecropth
simmetricbandsthatoutfitres
fitbands:makesthenewimagetofitintorequiredresandfillsemptya
32. OpenMind 2009 – Magnolia Conference – September 10-11, 2009 – Basel, Switzerland 32
How to render image format
CODE DESCRIPTION
n
l
o
no
control
char
${media:urlres(mediaNode, '100x100' )} 100x100:resizeimageinorderto
containrequiredresolution(100x100)
andcropoutfittingsimmetricbands.
Resultingimagehastherequired
resolution.
${media:urlres(mediaNode, 'n100x100' )} resizeimageinordertocontainthe
requiredresolution.Resultingimage
shouldhaveonesidebiggerthan
requiredresolution
${ media:urlres(mediaNode, 'l100x100' )} Resizeimageinordertofitinto
requiredresolution.Resultingimage
shouldhaveonesidesmallerthan
requiredresolution.
${ media:urlres(mediaNode, 'o100x100' )}
${ media:urlres(mediaNode, 'o100x100;background=FF0000' )}
Resizeimageinordertofitinto
requiredresolution;emptyareasare
filledbyabackgroundcolor(optional
parameter“background”,default
#FFFFFF).Resultingimagehasthe
requiredresolution.
Original image format: ${media:url(mediaNode)}
Resolution syntax to use with urlres el function is:
[control char]WIDTHxHEIGHT[;param1=value1;param2=value2;...]
In optional parameters, add “bw=true” to render the image in grayscale.
i.e. “320x180;bw=true”:
the image resolution processor resize and crop the image to fit 320x180, and then
an image post processor will transform it to grayscale
33. OpenMind 2009 – Magnolia Conference – September 10-11, 2009 – Basel, Switzerland 33
Other resolutions
34. OpenMind 2009 – Magnolia Conference – September 10-11, 2009 – Basel, Switzerland 34
Configurable media types
35. OpenMind 2009 – Magnolia Conference – September 10-11, 2009 – Basel, Switzerland 35
It's demo time !
36. OpenMind 2009 – Magnolia Conference – September 10-11, 2009 – Basel, Switzerland 36
More info
►About OpenMind, what we do, how we do it, our
projects and customers, on:
www.openmindonline.it
►About OpenmindLAB and our opensource
modules on:
http://lab.openmindonline.it
►Modules are free and open source (GPL), but you
can have our commercial support when you need
it!
37. OpenMind 2009 – Magnolia Conference – September 10-11, 2009 – Basel, Switzerland 37
It's Q&A time !
