Objective

To learn to web site production techniques by example. To learn how to generate an easy-to-manage slideshow similar to this portfolio web page.

Discussion

Flickr is a free photo sharing service that has advanced photo management tools. One can "link" to these free services by using a clean-looking slideshow generator like Galleria. Galleria is an open-source javascript plugin for websites that is also responsive.  

Lightroom is a photo organizer designed for photographers. Lightroom can help you sequence your slide shows, embed captions in JPEGs and publish them directly to Flickr. Some tips for adding captions:

• cmd+RETURN = line break
• multiple captions can be added by selecting multiple images
• some HTML is allowed in captions

In this exercise, we will be linking to this published Flickr Web Album.

Procedure

Prepping for the exercise

1. download starter files
2. download galleria source files
3. extract zip archives
4. move "galleria" folder into "portfolio/slides" folder
5. launch Dreamweaver
6. open "index.html"
7. file > preview in browser (opt+F12)
8. examine files:
   • slides/galleria/plugins/flickr/flickr-demo.html
   • slides/slides.css
   • slides/classic-map.psd
   • ~assets/780x580.psd
   
9. move/replace files to: slides/galleria/themes/classic
   • slides/classic-map.png
   • slides/galleria-classic.css

Making a Flickr gallery

1. sign up for a new Flickr account (or login using your existing account)
2. launch Lightroom
3. library > new folder: source = ~assets/780x580; import
4. sort by name and/or rearrange sequence (cmd+D to deselect)
5. publish services: go to publishing manager: add via service: Flickr, name = login, authorize
6. create new Flickr album "portfolio1" (RMB)
7. copy images from "780x580" to "portfolio1"
8. edit title/captions
9. click SYNC METADATA; save
10. select all images: click PUBLISH
11. view Flickr album in browser
12. copy album ID from URL (last 17 digits, i.e. 72157676154866783)
13. open "slides/gallery.html"
14. view > code
15. change line 44: flickr: 'set:72157676154866783',
16. save, file > preview in browser (opt+F12)

Fine-tuning the slide show

1. reference galleriajs.github.io/docs
2. search for "flickr plugin", then "options": study notes
3. open "slides/galleria/plugins/flickr/galleria.flickr.min.js"
4. edit code: options={max:100,imageSize:"big",thumbSize:"thumb"

Project 2: web gallery production

1. create a new Flickr gallery with your own portfolio images using Lightroom
2. publish your new Flickr gallery as a link from your process page (required for Project 2)

Grading

1. update the link in "slides/gallery.html"
2. publish the entire site as a link from your personal Process Page for grading