The -picturebox hint
Determine where full-sized images
will appear on gallery pages
Applies to: Image Layers
Can be used in same name with: no other hint
Requires: SiteGrinder 2 Pro. Only functions on a -gallery page.

Introduction

The -picturebox hint is part of SiteGrinder Pro's powerful automatic image gallery creation system.

Click here for a complete overview of this system and its many options.

The -picturebox hint tells SiteGrinder Pro to replace the layer using this hint with a jpeg gallery image.

The jpeg image comes from the image folder you set for the galllery pages containing this hint. The image folder is set using the gallery pane of the SiteGrinder window.

The contents of the -picturebox layer in the Photoshop document determnie size and position, and should therefore just be a filled rectangle. The contents of a -picturebox layer are never shown on the final web page. Because of this, other layers positioned behind the -picturebox layer should be used to create background colors and frames for the images.

Image positioning

SiteGrinder always centers images in the -picturebox they are matched with.

If the -picturebox layer is larger in pixels than the image that is to be shown in its place, then no alteration is made to the image. The image file is merely duplicated and copied into a subfolder of the directory SiteGrinder is building the pages to.

If the -picturebox is smaller than any images, those images will have to be scaled. (See below)

Image cropping and sizing

If your images are all smaller than your -picturebox then they will be centered within the area defined by the -picturebox. no scaling will occur.

If any image in a folder is larger than its associated -picturebox, then SiteGrinder will have to scale it down. Pictureboxes have two options in the SiteGrinder gallery pane for fitting images that are too large, "inset" and "fill".

  • Inset causes the image to shrink to fit the -picturebox without cropping. This is similar to watching a wide screen movie on a normal television using "letterbox" mode which doesn't crop the movie but also doesn't use the full area of the square tv screen. You won't notice that kind of gap unless you have placed graphical borders around the -picturebox.
  • Fill causes the images to use the entire area of the -picturebox layer, but not to stick outside of it. This can potentially cause cropping when, for example, SiteGrinder Pro must fill a tall, narrow -picturebox with a wide and short image. The same thing happens when widescreen movies are scaled to fill normal tv screens.

There will be no cropping or gap using either technique if the image's width-to-height ratio exactly matches that of the -picturebox. For that reason it can be very useful to create several pages for the same gallery using pictureboxes that match the various height-to-width ratios of your different images.

Matching custom layouts to accomodate different image orientations

Because you can create any number of gallery layer comps (or page definitions) with identical names, you can create any number of layouts to match your different image sizes or width-to-height ratios. For each image in the directory associated with your gallery, SiteGrinder Pro will automatically select the layout with the -picturebox that most closely matches the image's size and proportions.

Pictureboxes and Thumb/Thumbsheet navigation

Pictureboxes will cause SiteGrinder to generate a unique page for each image in the corresponding image folder. You can create navigation to these individual pages using thumbnail versions of the images in the folder. This is accomplished using the "thumb" and "thumbsheet" hints on image layers that also match the name of the gallery. Thus SiteGrinder will match a gallery page called "Still lifes-gallery" to a layer called "Still lifes-thumb" or "Still lifes-thumbsheet" in order to create thumbnail navigation.

Pictureboxes may appear on separate pages or even on the same page with thumbnails and thumbsheets.

Click here to learn about thumbs

Click here to learn about thumbsheets

Pictureboxes and next/previous navigation

SiteGrinder provides special button names to alloq you to quickly create navigation from the current image to the next image or from the current image and the previous image. On any page with a -picturebox layer simply place text buttons or graphic buttons named next-button and prev-button and SiteGrinder does the rest.

The order of the show depends on the sort setting of the directory containing the images in the Finder (under Mac OS X) or the Windows File Explorer.

Click here for more information about next/prev buttons