Context Navigation

Implement a Webalbum (Photolibrary)

This HowTo requires basic JSP, HTML, XSL and Corinis know-how. If you have never implemented any function please read Implementation and HowTo/en/Implementation/Cms%20%28from%20scratch%20-%20taglib%29? before going on.

Filestructure

webalbum.jsp/webalbum.xsl - will display an overview of all available photolibraries
webalbum_view.jsp/webalbum_view.xsl - will display the content of one photolibrary (thumbnails of all pictures with a nice border like in the administration)
webalbum_picture.jsp/webalbum_picture.xsl - will display an "almost-full-size" version of the picture

These 3 files work together with following request parameter:

webalbum.jsp -> weblabum_view.jsp?PhotoLibrary_mainId=1234 -> webalbum_picture.jsp?PhotoLibrary_mainId=1234&PhotoLibrary_id=1234

The xsl will be in the xsl root path (normally WEB-INF/xsl).

Before you start you should create a few photolibraries using the administration. You can upload pictures either as single files or multiple files packed in a zip file - Corinis will automatically extract the images and create thumbnails and resize the pictures according to what you entered when creating the photolibrary.

Make sure you set the correct path in your WEB-INF/corinis.xml and that it is writeable by tomcat (otherwise pictures won't be saved).

Remember: if you specify only the width (preview or final) when creating a photolibrary, the pictures (thumbnails) will be resized retaining the correct aspect ratio using the given width as MAXIMUM for either width or height

The overview

In our example the overview page should display all available photolibraries, with the name, the description and one random picture. The jsp is pretty easy:

<%@include file="top.ijsp"%>
<%
  // init the photolibrary
  PhotoLibrary photolibrary = (PhotoLibrary)core.getModule(PhotoLibrary.class);
  // display one random picture of each photolibrary
  photolibrary.photolibraryView.randomPictures = 1;
%>
<%=core.parseDom( photolibrary.getMainEntries(), "webalbum.xsl")%>
<!-- debug: -->
<%=core.parseDom( photolibrary.getMainEntries(), "show.xsl")%>

<%@include file="bottom.ijsp"%>

core is already initialized (in top.ijsp see Cms from Scratch - part 2?)
we initialize the photolibrary object (module) with core.getModule
we set a photolibrary variable that includes random pictures in the return tree with photolibrary.photolibraryView.randomPictures = 1
finally we call getMainEntries() and parse the resulting XML though a xsl (actually two - the second line with show.xsl is just for debugging - remove that once ou are done)

If you want to increase the number of random pictures set randomPictures > 1 - this way you can display more previews on the page.

The xsl

This is an example return xml from getMainEntries (the PHOTOLIBRARY/MAINENTRY node is being repeated for each library):

<PHOTOLIBRARY>
  <MAINENTRY>
    <ID>1155931586195</ID>
    <NAME>Ski Tour 2006</NAME>
    <DESCRIPTION>A great week in the Mountains of Salzburg</DESCRIPTION>
    <PREVIEWWIDTH>100</PREVIEWWIDTH>
    <PREVIEWHEIGHT>-1</PREVIEWHEIGHT>
    <FINALWIDTH>600</FINALWIDTH>
    <FINALHEIGHT>-1</FINALHEIGHT>
    <OWNER>
      <ID>2</ID>
      <NAME>admin</NAME>
    </OWNER>
    <PERSONAL>false</PERSONAL>
    <NUMPHOTOS>12</NUMPHOTOS>
    <CHANGE>
      <DATE>08/18/2006 20:06</DATE>
      <LDATE>1155931586247</LDATE>
      <USER>
        <NAME>admin</NAME>
        <ID>2</ID>
        <IP>81.223.9.190</IP>
      </USER>
    </CHANGE>
    <ENTRY>
      <ID>1155932239117</ID>
      <NAME>177_7796.JPG</NAME>
      <EXT>JPG</EXT>
      <THUMBNAIL>/photos/1155931586195/1155932239117tn.JPG</THUMBNAIL>
      <IMAGE>/photos/1155931586195/1155932239117.JPG</IMAGE>
      <ORIGINAL>/photos/1155931586195/1155932239117orig.JPG</ORIGINAL>
      <FILESIZE>870241</FILESIZE>
      <DESCRIPTION />
      <DATE>08/18/2006 20:19</DATE>
      <LDATE>1155932350655</LDATE>
    </ENTRY>
  </MAINENTRY>
  <ALBUMWEBPATH>/photos/</ALBUMWEBPATH>
</PHOTOLIBRARY>

It is fairly simple, so is the xsl displaying it:

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
  <xsl:template match="/">
        <h3>Photo Album</h3>
        <xsl:for-each select="/PHOTOLIBRARY/MAINENTRY">

                <h4><xsl:value-of select="NAME"/> (<xsl:value-of select="NUMPHOTOS"/> Pictures from <xsl:value-of select="OWNER/NAME"/>)</h4>
                <a>
                        <xsl:attribute name="href">webalbum_view.jsp?PhotoLibrary_mainId=<xsl:value-of select="ID"/>
                        </xsl:attribute>
                        <xsl:for-each select="ENTRY">
                        <img>
                            <xsl:attribute name="src"><xsl:value-of select="THUMBNAIL"/></xsl:attribute>
                        </img>&#160;
                        </xsl:for-each>
                </a>
        </xsl:for-each>
  </xsl:template>
</xsl:stylesheet>

If you put this into the webalbum.xsl you will see a table with a thumbnail and the name of the library - both clickable.

Show all Pictures of an Album

Now we have a page displaying all albums plus a few random pictures from each. The next part (when the user click on one of the webalbums) is to display ALL the pictures of an album (album_view.jsp/album_view.xsl). The jsp, dom and xsl look quite like the one we did already:

<PHOTOLIBRARY>
  <MAINENTRY>
    <ID>1155931586195</ID>
    <NAME>Ski Tour 2006</NAME>
    <DESCRIPTION>A great week in the Mountains of Salzburg</DESCRIPTION>
    <PREVIEWWIDTH>100</PREVIEWWIDTH>
    <PREVIEWHEIGHT>-1</PREVIEWHEIGHT>
    <FINALWIDTH>600</FINALWIDTH>
    <FINALHEIGHT>-1</FINALHEIGHT>
    <OWNER>
      <ID>2</ID>
      <NAME>admin</NAME>
    </OWNER>
    <PERSONAL>false</PERSONAL>
    <NUMPHOTOS>12</NUMPHOTOS>
    <CHANGE>
      <DATE>08/18/2006 20:06</DATE>
      <LDATE>1155931586247</LDATE>
      <USER>
        <NAME>admin</NAME>
        <ID>2</ID>
        <IP>81.223.9.190</IP>
      </USER>
    </CHANGE>
    <ENTRY>
      <ID>1155932239113</ID>
      <NAME>177_7738.JPG</NAME>
      <EXT>JPG</EXT>
      <THUMBNAIL>/photos/1155931586195/1155932239113tn.JPG</THUMBNAIL>
      <IMAGE>/photos/1155931586195/1155932239113.JPG</IMAGE>
      <ORIGINAL>/photos/1155931586195/1155932239113orig.JPG</ORIGINAL>
      <FILESIZE>956077</FILESIZE>
      <DESCRIPTION />
      <DATE>08/18/2006 20:19</DATE>
      <LDATE>1155932348199</LDATE>
    </ENTRY>
    <ENTRY>
        ...
    </ENTRY>
  </MAINENTRY>
  <ALBUMWEBPATH>/photos/</ALBUMWEBPATH>
</PHOTOLIBRARY>

the jsp:

<%@ page language="java" import="java.io.*,corinis.util.*,java.sql.*,java.util.*,corinis.*,corinis.modules.*" %>
<%@include file="top.ijsp"%>
<%
  PhotoLibrary photolibrary = new PhotoLibrary (core);
%>
<%=core.parseDom(photolibrary.getEntries(), "webalbum_view.xsl")%>
<!-- debug -->
<%//=core.parseDom(photolibrary.getEntries(), "show.xsl")%>

<%@include file="bottom.ijsp"%>

and the xsl:

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
  <xsl:template match="/">
        <h3>Photo Album</h3>

        <h4><xsl:value-of select="PHOTOLIBRARY/MAINENTRY/NAME"/> (<xsl:value-of select="PHOTOLIBRARY/MAINENTRY/NUMPHOTOS"/> Pictures from <xsl:value-of select="PHOTOLIBRARY/MAINENTRY/OWNER/NAME"/>)</h4>
        <xsl:for-each select="PHOTOLIBRARY/MAINENTRY/ENTRY">
        <a>
                <xsl:attribute name="href">webalbum_picture.jsp?PhotoLibrary_mainId=<xsl:value-of select="/PHOTOLIBRARY/MAINENTRY/ID"/>&amp;PhotoLibrary_id=<xsl:value-of select="ID"/></xsl:attribute>
                <img border="0">
                    <xsl:attribute name="src"><xsl:value-of select="THUMBNAIL"/></xsl:attribute>
                </img>
        </a>&#160;
        </xsl:for-each>
  </xsl:template>
</xsl:stylesheet>

now each picture has a link to webalbum_view.jsp. You can easily change the code so if you click on a picture it will display the picture (without anything around) in a new page:

...
        <xsl:for-each select="PHOTOLIBRARY/MAINENTRY/ENTRY">
        <a target="_blank">
                <xsl:attribute name="href"><xsl:value-of select="IMAGE"/></xsl:attribute>
...

display the image - with round-trip navigation

This is the last part. We will have a page with the image showing in the middle, and some navigation to go to the next/previous image or back to the album.

The files we work on now are webalbum_picture.jsp and webalbum_picture.xsl. The jsp is being called with the id of the picture (Photolibrary_id) and the (optional) albumid.

If you use show.xsl to display the result of photolibrary.getEnty() you will see this is really simple:

<PHOTOLIBRARY>
  <ID>1155931586195</ID>
  <NAME>Ski Tour 2006</NAME>
  <DESCRIPTION>A great week in the Mountains of Salzburg</DESCRIPTION>
  <PREVIEWWIDTH>100</PREVIEWWIDTH>
  <PREVIEWHEIGHT>-1</PREVIEWHEIGHT>
  <FINALWIDTH>600</FINALWIDTH>
  <FINALHEIGHT>-1</FINALHEIGHT>
  <OWNER>
    <ID>2</ID>
    <NAME>admin</NAME>
  </OWNER>
  <PERSONAL>false</PERSONAL>
  <NUMPHOTOS>12</NUMPHOTOS>
  <CHANGE>
    <DATE>08/18/2006 22:06</DATE>
    <LDATE>1155931586247</LDATE>
    <USER>
      <NAME>admin</NAME>
      <ID>2</ID>
      <IP>81.223.9.190</IP>
    </USER>
  </CHANGE>
  <LASTELEMENT>
    <ID>1155932239114</ID>
    <NAME>177_7739.JPG</NAME>
    <EXT>JPG</EXT>
    <THUMBNAIL>/photos/1155931586195/1155932239114tn.JPG</THUMBNAIL>
    <IMAGE>/photos/1155931586195/1155932239114.JPG</IMAGE>
    <ORIGINAL>/photos/1155931586195/1155932239114orig.JPG</ORIGINAL>
    <FILESIZE>762976</FILESIZE>
    <DESCRIPTION />
    <DATE>08/18/2006 22:19</DATE>
    <LDATE>1155932348909</LDATE>
  </LASTELEMENT>
  <ELEMENT>
    <ID>1155932239115</ID>
    <NAME>177_7750.JPG</NAME>
    <EXT>JPG</EXT>
    <THUMBNAIL>/photos/1155931586195/1155932239115tn.JPG</THUMBNAIL>
    <IMAGE>/photos/1155931586195/1155932239115.JPG</IMAGE>
    <ORIGINAL>/photos/1155931586195/1155932239115orig.JPG</ORIGINAL>
    <FILESIZE>1059384</FILESIZE>
    <DESCRIPTION />
    <DATE>08/18/2006 22:19</DATE>
    <LDATE>1155932349395</LDATE>
  </ELEMENT>
  <NEXTELEMENT>
    <ID>1155932239116</ID>
    <NAME>177_7756_r1.jpg</NAME>
    <EXT>jpg</EXT>
    <THUMBNAIL>/photos/1155931586195/1155932239116tn.jpg</THUMBNAIL>
    <IMAGE>/photos/1155931586195/1155932239116.jpg</IMAGE>
    <ORIGINAL>/photos/1155931586195/1155932239116orig.jpg</ORIGINAL>
    <FILESIZE>1117462</FILESIZE>
    <DESCRIPTION />
    <DATE>08/18/2006 22:19</DATE>
    <LDATE>1155932349917</LDATE>
  </NEXTELEMENT>
  <ALBUMWEBPATH>/photos/</ALBUMWEBPATH>
</PHOTOLIBRARY>

The path for the current, next and previous element are given - all that is needed now, is to create an xsl to display them

The jsp:

<%@ page language="java" import="java.io.*,corinis.util.*,java.sql.*,java.util.*,corinis.*,corinis.modules.*" %>
<%@include file="top.ijsp"%>
<%
  PhotoLibrary photolibrary = new PhotoLibrary (core);
%>
<%=core.parseDom(photolibrary.getEntry(), "webalbum_picture.xsl")%>
<%//=core.parseDom(photolibrary.getEntry(), "show.xsl")%>

<%@include file="bottom.ijsp"%>

and the xsl:

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
  <xsl:template match="/">

        <h3><xsl:value-of select="/PHOTOLIBRARY/NAME"/> - <xsl:value-of select="/PHOTOLIBRARY/ELEMENT/NAME"/></h3>
        <h4>
        <table width="100%" border="0">
                <tr>
                        <td>
    <a title="previous image"><xsl:attribute name="href">?PhotoLibrary_id=<xsl:value-of select="/PHOTOLIBRARY/LASTELEMENT/ID"/></xsl:attribute>previous</a>
                        </td>
                        <td align="center">
    <a title="bck to overview"><xsl:attribute name="href">webalbum_view.jsp?PhotoLibrary_mainId=<xsl:value-of select="/PHOTOLIBRARY/ID"/></xsl:attribute>back to overview</a>
                        </td>
                        <td align="right">
    <a title="next image"><xsl:attribute name="href">?PhotoLibrary_id=<xsl:value-of select="/PHOTOLIBRARY/NEXTELEMENT/ID"/></xsl:attribute>next image</a>
                        </td>
                </tr>
        </table>
    </h4>
    <div style="text-align: center"><img >
        <xsl:attribute name="src"><xsl:value-of select="/PHOTOLIBRARY/ALBUMWEBPATH"/>/<xsl:value-of select="/PHOTOLIBRARY/ID"/>/<xsl:value-of select="/PHOTOLIBRARY/ELEMENT/ID"/>.<xsl:value-of select="/PHOTOLIBRARY/ELEMENT/EXT"/></xsl:attribute>
        </img>
    </div>
  </xsl:template>
</xsl:stylesheet>

Attachments

photolib_create.png (12.2 kB) - added by niko 5 years ago.

Download in other formats:

Plain Text