Instant Gallery with SiteGrinder

Are you ready to start looking at the mechanics of building a gallery in SiteGrinder? I’m going to step up from the most basic gallery, to those with more complex features. So today we’ll be starting with the 1-layer gallery.

Working in Photoshop

There can be a lot of other stuff on this page, because a gallery can be part of any web page you design in Photoshop and build with SiteGrinder. But there’s only one layer we will be concerning ourselves with right now: the gallery-picturebox layer. This is a graphical rectangle that is very easy to draw in Photoshop:

  1. Create a new layer in Photoshop.
  2. Select a rectangular area on the page to contain the gallery.

  3. Use the paint bucket to fill the area with an arbitrary color.
  4. Name this layer gallery-picturebox.
    name the layer

That’s all you need to do in Photoshop.

Working in the Design Manager

From the File->Automate menu, select SiteGrinder 3 and build your page.

When the page finished building, look at it in the Design Manager. You’ll see what your gallery will look like, with some sample placeholder photos that SiteGrinder supplies. (You’ll choose your own images for the gallery later, in the SiteGrinder Content Manager.) See where your rectangle was? That’s where the pictures will show up.

gallery in design manager

The default type of gallery is SiteGrinder CSS. If you don’t change anything, when you click on the photo in the gallery area, the image changes and the next picture displays. To change the default settings for the gallery, click the blue link for your gallery layer in the Gallery Appearance panel.

select gallery

A window will open with the options for your gallery. With the standard SiteGrinder CSS gallery, you can change four settings:

  1. Fit non-proportional images. This tells SiteGrinder what to do if your image is smaller than your gallery rectangle. The options are fill (the image is zoomed so it fills the whole picturebox) or inset (the image is not scaled, but shows up at its actual size, within the boundaries of the picturebox. In the example below, you see that the picture with the yellow cake is zommed in to fill the area.
  2. What to do when clicked. The options are advance (go to the next picture), bigbox (display a pop-up window of the full-size image), URL (go to another web page), and stop. In this simple gallery, you may want to include some text near the gallery rectangle with instructions such as “click image to proceed to the next slide.”
  3. You can set the slide-show or gallery to begin with a random image.
  4. You can disable the browser download feature so users can’t right-click to save your file on their computer.

Play with the settings to see what they do. Whenever you click Apply, the browser will refresh the preview of your site to display using the new settings.

Here’s what the page looks like with inset selected, and the yellow cake image is not scaled to fill the picturebox.

inset

Here’s the same page with the non-proportional images set to fill the picturebox.

For more control over your gallery, we suggest using the SiteGrinder Animated CSS styling for your gallery. (Flash pictureboxes can even auto-advance and can have their own embedded animated navigation controls for next/previous/etc. but these can’t be viewed on iOS devices.)

Select the desired option at the top of the dialog, from the Type: list.

Select SiteGrinder animated CSS

With Animated SiteGrinder CSS, you have more control over the positioning of images that are smaller than the picturebox rectangle, as well as several other options:

animaged css settings

For a detailed list of gallery types and available settings, see the SiteGrinder 3 Feature Reference.

When you’re finished in the Design Manager, go back to SiteGrinder and deploy your page.

Working in the Content Manager

After you deploy your site, the browser will open again this time with your page and the Content Manager. Here’s where you’ll upload the actual images to be displayed in your gallery.

I’ve covered this in a previous tutorial which you can read here.

That’s it for today. Next, we’ll look at adding some navigation controls to our gallery.

One comment on “Instant Gallery with SiteGrinder

  1. Pingback: Media Lab Blog » Adding Thumbnails to a Gallery

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>