9 Replies Latest reply on Apr 8, 2009 6:57 AM by SeanMcCormack

    HTML web gallery with 3 sizes?

    rgoer
      Hello all! I'm getting started with the LR SDK and am currently dissecting the default_html.lrwengine gallery template. That gallery supports a grid of thumbnails which link to a detail page for each photo. I'm trying to add a second link on the detail pages which links to a full size copy of each photo (the detail page versions are not full size but instead something like "medium" resolution).

      I have created photoSizes in the model for thumb, medium, and large with all the correct properties, I added a second AddPhotoPages entry to the manifest (for the full size version), and I have edited my thumbs.html (replacing grid.html), medium.html (replacing detail.html), and large.html files to link each other accordingly... however, the medium >> large link never seems to work.

      Is there some trick to adding a third (or more) size to LR web galleries? Do I need to do something beyond just adding more photoSizes and more html files? Is there some funky syntax for including more than one AddPhotoPages entry in the manifest? I assumed that's what the "variant" property was for...
        • 1. Re: HTML web gallery with 3 sizes?
          rgoer Level 1

          Are there any galleries that use 3 (or more) sizes with multiple detail pages available on the web?  I would love to see an example.

          • 2. Re: HTML web gallery with 3 sizes?
            SeanMcCormack Adobe Community Professional

            No idea on examples, but if you post the code that's making the calls to the third variant page, maybe we might solve this?

            • 3. Re: HTML web gallery with 3 sizes?
              rgoer Level 1

              Thanks for checking the thread, here's the code I'm working with right now.

               

              In mainfest.lrweb (in addition to the some of the leftover stuff from the default html gallery's manifest entries) I have:

               

              AddPhotoPages {
                  template='medium.html',
                  variant='_medium',
                  destination="content",
              }
              AddPhotoPages {
                  template='large.html',
                  variant='_large',
                  desitination="content",
              }
              AddGridPages {
                  template='thumbs.html',
                  rows=model.nonCSS.numRows,
                  columns=model.nonCSS.numCols,
              }

               

              Then, in medium.html I have:

               

                <div id="stage2">
                  <div id="previewFull" class="borderTopLeft borderBottomRight">
                    <div id="detailTitle" class="detailText">
                      <a href="http://test.url">$image.metadata.title</a></br> <% --[[ just a test ]] %>
                        <a href="<%= image.exportFilename %>_large.html">will this work?</a> <% --[[ try linking to third size variant ]] %>
                    </div>

               

              However, when I click my "will this work?" link, I am directed back to my thumbs.html page (which is basically identical to grid.html from the default html gallery).

              • 4. Re: HTML web gallery with 3 sizes?
                SeanMcCormack Adobe Community Professional

                I've done a version of this where the large file links to the medium and it works no problem. code is based on tutorial code I've already written..

                 

                I'd need to see more code to see where the issue might be..

                 

                Here's what I have:

                 

                (I opted not to put the files in "content", also ignore margin-top, it's not relevent to this)

                 

                 

                AddGridPages {

                template='grid.html',

                rows=model.nonCSS.numRows,

                columns=model.nonCSS.numCols,

                }

                 

                AddCustomCSS {

                filename='resources/css/custom.css',

                }

                 

                AddResources {

                source='resources',

                destination='resources',

                }

                 

                AddPhotoPages {

                template='detail.html',

                variant='_large',

                destination="",

                }

                 

                AddPhotoPages {

                    template='medium.html',

                    variant='_medium',

                    destination="",

                }

                In medium.html
                <div id="detailContainer">
                <div style="margin-top:<%= margintop %>px;">
                <img src="bin/images/med/<%= image.exportFilename %>.jpg" alt="$image.metadata.description"/></div>
                </div>
                in detail.html
                <div id="detailContainer">
                <div style="margin-top:<%= margintop %>px;">
                <a href="<%= image.exportFilename %>_medium.html"><img src="bin/images/photo/<%= image.exportFilename %>.jpg" alt="$image.metadata.description"/></a></div>
                </div>
                • 5. Re: HTML web gallery with 3 sizes?
                  SeanMcCormack Adobe Community Professional

                  I've also just tried a version where added a link to the index page from the medium image...

                  • 6. Re: HTML web gallery with 3 sizes?
                    rgoer Level 1

                    OK it must be some other problem in my code then.  I'll take a closer look when I get home tonight.  Thanks for the affirmation that it should at least be possible, and that adding multiple AddPhotoPages entries in the manifest is valid

                    • 7. Re: HTML web gallery with 3 sizes?
                      rgoer Level 1

                      "I've also just tried a version where added a link to the index page from the medium image..." I can link to other pages, just not *_large.html

                      • 8. Re: HTML web gallery with 3 sizes?
                        rgoer Level 1

                        Ah!  I found my answer... "it must be some other problem in my code," indeed!  I had a typo in my second AddPhotoPages entry in the manifest.  Look back at what I posted above, "desitination=" instead of "destination="

                         

                        Well don't I feel just stupid.

                        • 9. Re: HTML web gallery with 3 sizes?
                          SeanMcCormack Adobe Community Professional

                          Live and learn. I doubt there's a coder that hasn't done it at some stage.

                           

                          In college, I had a Pascal program that emulated acoustic reflections from any point in a room. No matter what coordinates I put it, it always gave the center point first.. After weeks of going through thousands of lines of code, I eventually found a 2 line function that essentially hardcoded the source point to the centre of the room, overriding user input. Sigh. I put that in to check that the code works and forgot about it...

                          I literally rewrote entire blocks of perfectly functioning code in the meantime. I didn't know whether to laugh or cry at the time as both the thesis deadline and final year exams were approaching. I can laugh about it now though!