» Jease » Blog

How to create an image gallery?

Please note: This article is outdated because Jease features an image gallery since 1.8. But maybe the article is still of some interest for you.

Jease features a very powerful content-type, the so called Composite. Think of a Composite as a container which can hold other contents and allows to render them as a single page. This way you can "compose" a complex page out of a bunch of simple contents.

To demonstrate the possibilities of a Composite, we create a simple image gallery as an example:

  • Create a Composite.
  • Add a Text with some notes about your pictures as first element of the Composite.
  • Then add a Script (with .jsp as extension) as second child to the Composite and put the code below into it.
  • Make the Text and the Script visible.
  • Now upload some pictures.
<%@page import="jease.cms.domain.*"%>
  Content context = (Content) request.getAttribute("Context");
  for (Image image : context.getChildren(Image.class)) { 
  <p style="float:left; margin-right: 10px;">
    <a href="<%=request.getContextPath()%><%=image.getPath()%>">
      <img src="<%=request.getContextPath()%><%=image.getPath()%>" width="100" />
      <br />
<% } %>
<div style="clear:both"></div>

If you want to reuse the gallery-feature at different locations in your site, you can use a Reference:

  • Move the Script which renders the gallery to a central folder (e.g. scripts in the root of your CMS).
  • Place a Reference into the Composite and point it to the Script. Don't forget to make the Reference visible.

That's (j)easy, isn't it?

And here is an example

Here are some sample pictures taken with a mobile phone in Sardinia... so please bear with the quality of the images.

Click on an image to show it in full size and navigate them.

Picture 1

Picture 2

Picture 3

Picture 4

Picture 5

Picture 6

Picture 7

Picture 8

Picture 9

Last modified on 2011-04-24 by Maik Jablonski