7 Replies Latest reply on Apr 16, 2010 11:29 AM by Daylilybud

    Can I use CSS with PS Web Gallery Preset?

    Daylilybud Level 1

      Using DW CS4. I wanted to create a web gallery with captions under the thumbnail images. I could not get captions to show up using the workspace output tool in Bridge, so I used the web gallery plug-in and preset in Photoshop. The doc title and description from the metadata shows up with each thumbnail and large photo, which is what I wanted. I added an Iframe to make the gallery show up in my web page layout with all the links I wanted, and I re-wrote part of the preset html to eliminate some of the extra preset gallery text at the top of the gallery pages. I am using a transitional doc type.


      It all worked out just fine and the pages are working as planned.


      However, when I used DW to validate the gallery pages, the report showed errors because the font attributes for the gallery pages are controlled by html and not by CSS. There are two problems cited in the report:


      The tag "center" is not allowed within: <p>


      In HTML 4.0, FONT is deprecated... consider using style sheets instead.


      Questions: On the gallery pages generated by the PS plug-in and pre-set, is there a way to control font attributes with a style sheet instead of using the pre-existing html styling? Do I need to be concerned about the attributes being deprecated?


      If you need to look at the web gallery, you can see it at http://www.LoonSongGardens.com/webgallery/galleryab.html


      If you look, you can see why I am daylilybud!

        • 1. Re: Can I use CSS with PS Web Gallery Preset?
          pziecina Level 6



          First the use of frames is not recommended, but that is your decisions.


          The only way to do what you wish is to edit the code and give each item that you wish to use css for an class name, (you can use the same class name for all items that are the same) then remove any inline style code and stye using css


          However, have you considered using a lightbox for this effect, it would also eliminate the need to use frames?

          See the examples here - http://leandrovieira.com/projects/jquery/lightbox/.




          • 2. Re: Can I use CSS with PS Web Gallery Preset?
            John Waller Adobe Community Professional & MVP

            To be fair, frames are hard coded into Photoshop Web Galleries. If that's how the OP wants to produce web galleries, I would not bother trying to get them to validate. Just live with the deprecated HTML tags created by Photoshop's outdated web code.


            I agree that Lightbox, or any of the many wonderful modern galleries and slideshows out there these days, would be a far better option.

            • 3. Re: Can I use CSS with PS Web Gallery Preset?
              pziecina Level 6

              Thank for the info John, I did not know that -

              frames are hard coded into Photoshop Web Galleries.



              • 4. Re: Can I use CSS with PS Web Gallery Preset?
                Daylilybud Level 1

                I used an iframe (as opposed to a frame) as suggested in an article by David Powers about embedding a gallery into a web page. He says the iframe is acceptable in html, and no problem with the iframe itself was indicated during validation, just the FONT attributes from the PS preset I used. You can read the article here: http://foundationphp.com/tutorials/gallery/embed1.php


                In my current gallery, thumbnail captions appear from the metadata for each photograph. For each large image, both the title and the description come from the photo's metadata.  This works well for my purpose, and I want to avoid re-entering each title and description. I guess my question could be better stated by asking if CSS can be added to the preset to apply to captions coming from the metadata of each photo.


                Regarding the lightbox approach you suggest, I looked at the example and do not see captions under the thumbnails. Can captions be added to the thumbnail images? (It is essential that my thumbnails have captions.)


                Customers need to see the name of each plant when they browse thumbnails in order to select items (daylily plants) of interest.


                Because I am dealing with hundreds of photos and will need to update frequently, I am looking for a solution that is efficient and fairly easy to maintain. So far, the PS web gallery preset meets my needs better than anything else I have found, but I thought I'd try to find out if I should and can fix the FONT attribute validation problem.

                • 5. Re: Can I use CSS with PS Web Gallery Preset?
                  pziecina Level 6



                  The lightbox does allow the insertion of captions, but if the ps web gallery does what you wish and it is not a requirement that your page validates, (most web pages do not) then I personally would recommend using the ps web gallery.



                  • 6. Re: Can I use CSS with PS Web Gallery Preset?
                    John Waller Adobe Community Professional & MVP

                    FWIW, I agree with PZ. I don't think the invalidation of <font> tags is anything to worry about here. Even if you do convert all font tags to CSS styling, you're not gaining anything in terms of how the gallery looks or functions. The power of CSS is in changing entire websites with a single tweak to one rule in one tiny text file e.g. font colors. Since you're using PS automation for that, there's no benefit in using CSS here.


                    The automated use of each photo's metadata is worth its weight in gold in terms of productivity with so many photos involved. You're unlikely to get that feature with any other solution.

                    1 person found this helpful
                    • 7. Re: Can I use CSS with PS Web Gallery Preset?
                      Daylilybud Level 1

                      I'll stick with what I've done with the PS web gallery and keep my eyes open for a more up-to-date and workable solution. Having purchased CS4 Premium Design, I expected plug-ins and presets that were shipped with the suite would use up-to-date code. I would not want to give up the caption option, though (as in the Bridge gallery options), so I'm glad it still works! I suppose I should look at Aperture, but I am trying to use apps I already own.


                      Thanks for the replies.