Creating a CSS Photo Gallery

1
Creating a CSS Photo Gallery

• -Shawn Butcher
• butchesh_at_recycle.bin

2
What was my inspiration?
3
(No Transcript)
4
What are we going to do?

• Gallery Code modified from http//www.joushaink.co
  m
• Xhtml
• CSS
• Fullsize images with CSS style
• Pictures
• Thumbnails
• Batch
• Full-size images in html format
• Batch from custom template
• Putting it all together

5
Tools Used

• Microsoft Visual Web Developer 2005 Express
  Edition
• http//msdn.microsoft.com/vstudio/express/vwd/defa
  ult.aspx
• Notepad just as functional
• Irfanview
• http//www.irfanview.com/
• Adobe Photoshop CS2
• Creating uniform sized images with backgrounds

6

• Three code files needed
• Presentation.css
• Fullimage.css
• Presentationgallery.html
• Lets start with the xhtml

7

• Setting up the basic organization of the site
  (divs ahoy!)
• Ex. Is a single column with a header and footer
  above a main content section

8

• Time to add the super secret ingredient!
• Yep, the good old ltulgt
• Done with the xhmtl for a while

9

• Time to add some CSS and give our site form
• Main float left

10

• Heres what it looks like so far

11

• Lets modify that ltulgt to look nicer

12

• Much better
• Play with borders, padding, margins, etc to suit
  your design and tastes

13

• This step is optional but really makes the
  gallery special
• Mouse-over image descriptions

14

• Tying up some loose ends
• Adjusting the pageheader
• Making sure skipnav knows its place
• Adjust img border

15

• Heres what it looks like in Firefox
• The header thing is a firefox glitch
• Add some content and it displays properly

16
What next?

• Xhtml framework is established
• Our CSS is looking pretty good
• Modify to suit your needs and tastes
• Guess we could use some pictures?
• Irfanview Thumbnails
• Full-size images can be left alone as .jpg or
  converted into .html pages if you want your site
  style

17
Irfanview thumbnails

• Navigate to your image directory
• Irfanview shows all the images
• Below are the 6 were going to work with
• Thumbs MUST have uniform size for this layout to
  work properly

18

• Select as many images as you want
• While images are selected,
• hit the B key on your keyboard
• Or
• File-gt Start batch dialog with selected thumbs

19

• Select an output directory for the thumbnails,
  images, and image html pages
• They can be different, for this example Im using
  one directory
• We want batch conversion
• Batch rename and batch conversion rename
  available if needed
• Next, select advanced options
• Resize image allows you to define the thumb based
  on the length, the width, or an absolute size
  (length and width)
• Preserve aspect ratio is very nice, but can have
  some problems on images where the ratio conflicts
  with your specified length or width
• Enlarge smaller images will make pics smaller
  than the thumb size ugly
• Create sub-directories in destination folder
• Used when you select a main image directory and
  you have sub directories
• Ex. Travel folder with image links and specific
  folders of images such as Iceland, Azerbaijan,
  Las Vegas
• Select your image folder in Irfanview and then
  Options -gt Load thumbs from all sub-folders
• Select create sub-directories and the new thumbs
  will maintain the hierarch

20

• For ours, I selected
• Set both sides 200x150
• Dont check preserve aspect ratio
• Check dont enlarge smaller pictures
• In Photoshop I created a 200 x 150 pixel form and
  made a background color rgb(245,245,245) then
  copy/pasted each picture and saved over the
  original so that each image is always 250x150.
• Was not necessary this time.
• But it is when you preserve aspect ratios. You
  will sometimes get a different height, or length.
  And this makes it so that they always are the
  correct size for proper flow

21
(No Transcript)
22

• Now to decide if you want to link to the
  full-size image as a .jpg or .html. If you want
  the standard left-align white backdrop .jpg, you
  can skip this step
• If You want to have your full-size image with a
  background, positioned, etc, then were going to
  turn it into an .html and give it style
• What we need is an .html template page renamed to
  frame.html so that Irfanview can do the work for
  us. It must be frame.html or it wont run
  properly. The standard ifranview template will
  create an .html page with default settings.
• You can only batch run one directory at a time
• When doing a sub-directory, you must specify it
  in Irfanview in order for the IMAGE code to
  work properly with quotations, shown on next slide

Now create a folder and move the created
frame.html page into it -Once you save a
picture as .html you can specify it under Folder
with html templates. Simply navigate to where
you saved yours
23
Heres the original code
24
Heres what it looks like-this wont do
25
Heres our template
26

• Now select all of your full-size images in
  Irfanview and right-click save selected thumbs
  as html
• Or, File -gt save selected as html

27

• Set your destination folder and template folder
• Select one html for each thumbnail(these are what
  we want to keep)
• The thumbnail suffix will help you throw away the
  thumbs since we already made them. Alternatively,
  you could use these thumbs. They will be created
  with settings found in Options, thumbnail
  settings. They are just much more restrictive

• You will now have one thumbnail, and one .html
  page for each image you selected, as well as a
  master thumbnail page.
• I deleted all the thumbs and the master page. Now
  drag all of the new images into the same folder
  as where we placed our originals and our
  thumbnails
• I made a second CSS page for full-size that
  removed header and footer and only deals with a
  centered main column and some background.

28
(No Transcript)
29
Lets put it all together

• Go back to your main .html page and fill in the
  appropriate links
• Notice our lta hrefgt destination is a .htm. This
  is because our batch program made the .htm file
  which specifies ltimg srcgt of our full-size image.

I added one addition thing to the
presentation.css file to remove the default
glaring blue border
30
Results
31
Grats-were done
32
Example of complete gallery