Adobe 65007312 Programming Guide - Page 198

CHAPTER 11: Web Gallery Plug-ins: A Tutorial Example Defining a data model and functionality 198 Add a grid using built-in tags The part of the HTML template that defines the grid itself, and the contents of each cell, makes use of the predefined grid tags contained in the Lightroom built-in tagset. First, we need to import this tagset into the "lr" namespace. 4. In the manifest.lrweb file, add this code at the top: importTags( "lr", "com.adobe.lightroom.default" ) AddCustomCSS { filename = 'content/custom.css', } 5. Now we can define the contents of image grid and its contents. Add this code to grid.html between the header and footer include statements: The logic here retrieves the thumbnail version of an image from the content folder ($others), and makes it the content of a grid cell. The image name is variable, so each cell shows a different image. This data model and template define a page that displays thumbnail versions of your images in the Web Gallery workspace. Next, we will need to allow for more than one page of photos, and add functionality so that clicking on a thumbnail shows the larger version of the image. Add pagination using built-in tags We will use more of the predefined tags to add page-navigation buttons, allowing the example to accommodate more than 16 images. 6. In the grid.html page, add this code after the closing ThumbnailGrid tag: ... 1 then %> $page $page Previous Previous