Blog / 2012 / November / 30

Lightroom 4 Web Gallery

November 30, 2012

I've just followed the tutorial for creating a simple Adobe Lightroom web engine. This can be found in the Lightroom SDK guide at http://www.adobe.com/devnet/photoshoplightroom.html.

I had to tweak my files somewhat so that it worked - mainly because the directory that the images were placed in didn't match where the code expected them to be. I wanted to document this simple first version before trying to add more functionality.

I have the following files, all inside a MyWebGallery.lrwebengine folder. This is located at C:/Program Files/Adobe/Adobe Photoshop Lightroom 4.2/Shared/webengines/MyWebGallery.lrwebengine

There are six files as follows.

galleryInfo.lrweb

This is the main config file for the gallery.

return {
  LRSDKVersion = 4.0,
  LrSdkMinimumVersion = 4.0,
  title = "My Web Gallery",
  id = "uk.co.drumcoder.webgallery",
  galleryType = "lua",
  maximumGallerySize = 100,

  model = {
    ["nonDynamic.imageBase"] = "content",

    ["photoSizes.thumb.height"] = 150,
    ["photoSizes.thumb.width"] = 150,
    ["photoSizes.thumb.metadataExportMode"] = "copyright",

    ["photoSizes.large.width"] = 450,
    ["photoSizes.large.height"] = 450,

    ["appearance.thumb.cssID"] = ".thumb",

    ["metadata.siteTitle.value"] = "Gallery Name",
    ["appearance.siteTitle.cssID"] = "#siteTitle",
  },

  views = function(controller, f)
    local LrView = import "LrView"
    local bind = LrView.bind
    local multibind = f.multibind
    return {
      labels = f:panel_content {
        bind_to_object = controller,
        f:subdivided_sections {
          f:labeled_text_input {
            title = "Gallery Name",
            value = bind "metadata.siteTitle.value",
          },
        },
      },
    }
  end;
}

manifest.lrweb

Indicates what is included in the gallery project

importTags("lr","com.adobe.lightroom.default")

AddGridPages {
  template = "grid.html",
  rows = 4,
  columns = 4,
}

AddPhotoPages {
  template = "large.html",
  variant = "_large",
  destination = "content",
}

AddCustomCSS {
  filename = 'content/custom.css',
}

AddResources {
  source="resources",
  destination="resources",
}

header.html

Header HTML for all pages

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="generator" content="Adobe Photoshop Lightroom"/>
  <title>My Photo Gallery</title>
</head>
<body>
<h1 id="metadata.siteTitle.value">$model.metadata.siteTitle.value</h1>

footer.html

Footer of each HTML page

</body>
</html>

grid.html

Used to show the main grid of thumbnail pictures

<%
--[[Define some local variables to make locating other resources easier.]]
  local mysize = "thumb"
  local others = "content"
  local theRoot = "."
%>

<%@ include file="header.html" %>

<lr:ThumbnailGrid>
  <lr:GridPhotoCell>
    <a href="$others/<%= image.exportFilename %>_large.html">
      <img src="bin/images/thumb/<%= image.exportFilename %>.jpg" id="<%= image.imageID %>" class="thumb"/>
    </a>
  </lr:GridPhotoCell>
</lr:ThumbnailGrid>

<% if numGridPages > 1 then %>
  <div class="pagination">
    <ul>
      <lr:Pagination>
        <lr:CurrentPage><li>$page</li></lr:CurrentPage>
        <lr:OtherPages><li><a href="$link">$page</a></lr:OtherPages>
        <lr:PreviousEnabled><li><a href="$link">Previous</a></li></lr:PreviousEnabled>
        <lr:PreviousDisabled><li>Previous</li></lr:PreviousDisabled>
        <lr:NextEnabled><li><a href="$link">Next</a></li></lr:NextEnabled>
        <lr:NextDisabled><li>Next</li></lr:NextDisabled>
      </lr:Pagination>
    </ul>
  </div>
<% end %>

<%@ include file="footer.html" %>

large.html

Finally, a HTML file for showing a single picture

<%
--[[Define some local variables to make locating other resources easier.]]
  local image = getImage(index)
  local mysize = "large"
  local others = "."
  local theRoot = ".."
%>

<%@ include file="header.html" %>

<div class="pagination">
  <ul>
    <lr:Pagination>
      <lr:PreviousEnabled><li><a href="$link">Previous</a></li></lr:PreviousEnabled>
      <lr:PreviousDisabled><li>Previous</li></lr:PreviousDisabled>

      <li><a href="$gridPageLink">Index</a></li>

      <lr:NextEnabled><li><a href="$link">Next</a></li></lr:NextEnabled>
      <lr:NextDisabled><li>Next</li></lr:NextDisabled>
    </lr:Pagination>
  </ul>
</div>

<a href="$gridPageLink">
  <img src="../bin/images/large/<%= image.exportFilename %>.jpg" />
</a>

<%@ include file="footer.html" %>

Tags: lightroom lua