logo

MMBase tips

Add an image to an article

tip #14 / Tue 1 Jun 2010 / André / 0 comments

MMBase has powerful image features, especially with the aid of ImageMagick. In this example I'll show an article with a related image.

MMBase depends on external software to size and modify images, most often ImageMagick but JAI (Java Advanced Imaging) can also be used. ImageMagick is default, take a look at the comments in the images builder if you like to use JAI.

Images are converted and displayed using the <mm:image /> tag. It can "template" the image for example to a certain width and height, and it can convert an image to other formats. Users can upload an image as a jpeg, but you can configure mmbase to convert them all to png to be displayed on the frontend. Images are only generated once and saved in cache, in a 'icaches' node.

One of the new nodes in the MyNews example has an alias 'a.news.article'. Let's retreive it to use as an example.

<mm:node number="a.news.article">
<h2><mm:field name="title" /></h2>
<h3><mm:field name="date"><mm:time format="dd-MM-yyyy" /></mm:field></h3>
<p><mm:field name="intro" /></p>
</mm:node>

Now we need an image.

Upload and relate an image

An images node related to a news node in my_editors A related image

Upload an image in one of mmbase's generic editors. Relate it to the news article.

<mm:images />

I think the most common and easy way to use the tag is like:

<mm:image mode="img" template="s(200)" />

With just two attributes: 'mode' produces either an url to our image, the height and width or the html image tag, 'template' contains command altering the image. In this is example the image is resized to a width of 200 pixels, the height is adjusted accordingly.

<img width="200" height="133" 
title="Dirt" alt="Dirt"
src="/mmbase/images/613/02dirt650.5.jpg" />

It contains its heigth, width, and both a title and an alt attribute. The url points to the mmbase images servlet serving the image resized by ImageMagick or JAI.

Add <mm:images /> to the article

Integrate it with a <mm:relatednodes /> tag in the article.

<mm:node number="a.news.article">
<h2><mm:field name="title" /></h2>
<h3><mm:field name="date"><mm:time format="dd-MM-yyyy" /></mm:field></h3>

<!-- related image -->
<mm:relatednodes type="images">
<mm:image mode="img" template="s(200)" />
</mm:relatednodes>

<p><mm:field name="intro" /></p>
</mm:node>

Next you can do all kinds of fancy stuff with ImageMagick commands, like:

<mm:image mode="img" template="s(200)+swirl(100)" />

Me twisted Me twisted

It generates a new image based on the original uploaded image, but with a twist. The taglib documentation of <mm:images /> has more examples.

0 comments

RSS feed

Tweet this article

Most mentioned links:

MMBase documentation
MMBase API
MMBase SVN
Bugtracker
MMBase Taglib reference
The reference for all tags mm