Photo Gallery - Documentation topics on: deprecated,macros,photo gallery,.

Photo Gallery
Deprecated

** This macro has been deprecated **

The Photo Gallery "macro" pulls and displays all the photos (jpgs and gifs files) of a given folder, it also pulls and displays sub folders if they contain photos.

Macro Overview:

Syntax:

#photoGallery("/thefolder")

Arguments:

  • thefolder
    Path to the folder that contains the photos and/or sub photo galleries.

Optional Parameters:

  • showPhotoTitle
    Set to false if you want to hide the photo names from the listing. Default: true.
  • showSubgalleryTitle
    Set to false if you want to hide the sub galleries names from the listing. Default: true.
  • photoWidth
    Width used to display the full image. Default: 600.
  • photoHeight
    Height used to display the full image. Default: 450.
  • thumbnailWidth
    Width used to display the thumbnails. Default: 90.
  • thumbnailHeight
    Height used to display the thumbnails. Default: 90.

  • Usage:

    Let say you have a folder organization similar to the following:
    /photo_galleries -> folder where resides photos and sub galleries
    /photo_galleries/photo1.jpg -> image of this top level gallery
    /photo_galleries/photo2.jpg -> image of this top level gallery
    /photo_galleries/gallery_1 -> folder where the first gallery resides
    /photo_galleries/gallery_1/index.jpg -> main image of this gallery
    /photo_galleries/gallery_1/XXX.jpg -> any other image of this gallery
    /photo_galleries/gallery_2 -> folder where the second gallery resides
    /photo_galleries/gallery_2/index.jpg -> main image of this gallery
    /photo_galleries/gallery_2/XXX.jpg -> any other image of this gallery

    Will display photo1 and photo2 as photos located in the /photo_galleries folder and then will list gallery1 and gallery2 as sub photo galleries of the /photo_galleries folder, the index.jpg (or index.gif) images are used as the main images when sub photo galleries thumbnails are shown, if the subfolder doesn't contain an index image then the first image found in the folder will be used as the index image.

    Overiding the dotCMS photo Gallery source code:

    The photo gallery source code is stored in your dotCMS here: /static/photo_gallery/photo_gallery.html

    The following variable can be set to override the photo gallery source code:

    #set($photoGallerySourceCode = "/application/velocity/photo_gallery.vtl")

    This will override the source code we're using to display the photo gallery.


    Examples:

    Example 1: A simple example using the required fields

    #photoGallery("/photo_galleries")

    Example 2: An example showing how to include one or more of the optional parameters

    #set($showPhotoTitle = false)
    #photoGallery("/photo_galleries")

    Example 3: To specify a folder without listing parent folder:

      #set($folder = $render.eval("/alumni/galleries/folderName/"))
      #photoGallery("")
      

    Example 4:To pull the most current folder according to year or use another variable:

      #set($dateYear = $date.get("yyyy"))
      #set($folder = $render.eval("/alumni/galleries/$dateYear/"))
      #photoGallery("")
      

    Example 5:Create PhotoGallery from image fields in the Content Type: Import this javascript inside into the widget or page:

        <script type="text/javascript" src="/html/js/lightbox/js/prototype.js"></script>
        <script type="text/javascript" src="/html/js/lightbox/js/scriptaculous.js?load=effects"></script>
        <script type="text/javascript" src="/html/js/lightbox/js/lightbox.js"></script>
        <link rel="stylesheet" href="/html/js/lightbox/css/lightbox.css" type="text/css" media="screen" />
      
    Now check for each image fields individually: Eg:checking image field 7, need to specify the server or ip adress
        #if($UtilMethods.isSet($content.picture7ImageInode) && (!$content.picture7ImageInode.trim().equals("0")) )
            <a href="http://216.37.198.3${content.picture7ImageURI}" rel="lightbox[group]"><img src="/resize_image?inode=${content.picture7ImageInode}&w=110" alt="$!{content.Client_Name} Picture 7" class="orange" /></a>
        #end