Adobe 65007312 Programming Guide - Page 197

CHAPTER 11: Web Gallery Plug-ins: A Tutorial Example Defining a data model and functionality 197 Defining a data model and functionality The information file defines the data model that your LuaPage code will use to store the information it needs to generate appropriate HTML. In this case, there will be two image sizes on the gallery pages, a small and a large version of each photo, so the model needs to define that basic parameters for each image size. 1. Add a model entry to the table returned by the galleryInfo.lrweb file: return { LrSdkVersion = 3.0, LrSdkMinimumVersion = 2.0, -- minimum SDK version required by this plug-in title = "My Sample Plug-in", id = "com.adobe.wpg.templates.mysample", galleryType = "lua", maximumGallerySize = 50000, model = { ["nonDynamic.imageBase"] = "content", ["photoSizes.thumb.height"] = 150, ["photoSizes.thumb.width"] = 150, ["photoSizes.thumb.metadataExportMode"] = "copyright", ["appearance.thumb.cssID"] = ".thumb", }, } This begins to define the parameters for the smallest photo size, naming it "thumb". The variables define the images size, allowing us to adjust the number of rows and columns the grid will need to display them. 2. The model.appearance parameter associates the "thumb" photos with a style-sheet variable. To make this work, we have to add the style sheet to the project. In the manifest.lrweb file, add this code at the top: AddCustomCSS { filename = 'content/custom.css', } 3. Now we will add some code to the HTML template that makes use of these variables to display thumbnail images in the workspace. In the grid.html file, add this code before the header statement, defining local variables: