Image Gallery


The Image Gallery Element icon in the Dreamweaver object palette

The WebYep Image Gallery Element displays a tabular list of thumbnails that, when clicked on, open the original image/photo. The thumbnails can be rearranged and the user can also add a caption for each uploaded image.

The original image will normally be opened in a separate window, but you can also use Lightbox to open it in the same window (see below).

You can place several Image Gallery Elements on a page, or combine it with the WebYep Loop Element.

This element is represented by the following PHP code:

<?php webyep_gallery("GalleryName", false, 60, 70, 3, 600, 700, 100); // WebYepV1 ?> more...

Arguments for the webyep_gallery() PHP function call:
(see "Attributes of the Image Gallery Element" below for details)
  1. "GalleryName": A string – the field name for this element.
  2. true/false: A boolean – the scope for this element.
    true if the element should have the same content on all pages (global).
    false if it should have different content on each page it appears on.
  3. 60: An integer – the maximum width of the thumbnail.
  4. 70: An integer – the maximum height of the thumbnail.
  5. 3: An integer – the number of columns for listing the gallery image thumbnails.
  6. 600: An integer – the maximum width of the image, or zero if it should not be limited.
  7. 700: An integer – the maximum height of the image, or zero if it should not be limited.
  8. 100: An integer – the width, in pixels, of the thumbnail columns.

Please see "Attributes of the Image Gallery Element" below for details regarding the resizing and thumbnail generation.

Users can upload new images directly with the web browser. Clicking the plus button will add a new image after the one the plus button belongs to. Clicking the "Edit" button lets the user change the image or the caption.


The Image Gallery Element in action.
By clicking the +/- buttons the user can add/remove images.
By clicking the left/right arrow buttons the user can change the order of the images.
By clicking the "Edit" button the user opens the Change Gallery Image Window.


The Change Gallery Image Window

Depending on the web browser used you can upload multiple images at once by holding down the Command key (on Mac OS) or the Ctrl key (on Windows) to select multiple files in the file selection dialog. Firefox 3 and Safari 5 support this feature, Internet Explorer 8 does not.

The description entered will be used for all uploaded images - but you can of course edit the description afterwards.


To Top of Page

Adding a lightbox effect

The WebYep Gallery Element supports opening the detail images with a lightbox effect. Please see the Image Element's reference for details.

Formatting the gallery

WebYep assigns special CSS style classes to the Image Gallery Element's items. By defining styles for these CSS classes in your page's stylesheet, you have detailed control of the look of your WebYep Menu.

List of CSS classes:

CSS Class Name Assigned, to....
WebYepGalleryContainer

the <table> tag containing the whole gallery.

You can style the rows and cells of that table with the CSS selectors:
.WebYepGalleryContainer tr
and
.WebYepGalleryContainer td

WebYepGalleryFirstRow

the first <tr> tag in the gallery.

WebYepGalleryFirstColumn

the first <td> tag in a row.

WebYepGalleryImage the <div> tag surrounding the thumbnail image.

You can style the actual image with the CSS selector:
.WebYepGalleryImage img

WebYepGalleryText the <div> tag surrounding the caption.

 

Attributes of the Image Gallery Element


The Dreamweaver inspector showing the Gallery Element's attributes

Gallery Name

A distinctive name for that element. This name will be displayed in the page in edit mode to give the user a hint on what this elements content stands for and to distinguish the different WebYep Elements in a page.

Content

When set to "for this doc only" the elements content is unique for this page - even if another element on a different page has the same name. If set to "for all documents" the content will be the same on all pages for elements of this kind that use the same name.

Maximum Thumbnail Width/Height

The thumbnails for each image will be generated so that they are not wider/higher than specified here - they are resized according to the image's proportions. The resulting thumbnail will have exactly either the specified width or height.

Maximum Image Width/Height

If specified, the uploaded image will be proportionally resized so that it is not wider than the max. width setting and not higher than the max height setting. If not specified, the uploaded image will be left unchanged.

Note: Resizing can only be done, if the "GD" extension for PHP is installed on the server. If not, the uploaded images and the thumbnails will only be displayed in the specified sizes, but not actually be downsized (and therefore the file size will stay the same). This is especially unfavorable for the thumbnails - the Image Gallery thus should only be used if the GD extension is available.

Number of Cells

The thumbnails of all images will be shown in a table - the number of columns of that table can be specified with the "Number of Cells" attribute.

Cell Width

The thumbnail cells' width in pixels - should usually be wider than the maximum width of the thumbnail and wide enough to hold the typical image caption.


To Top of Page
© 2009, Objective Development