![]() ![]() ![]() |
![]() |
Image Gallery
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)
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.
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. Adding a lightbox effectThe WebYep Gallery Element supports opening the detail images with a lightbox effect. Please see the Image Element's reference for details. Formatting the galleryWebYep 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:
Attributes of the Image Gallery Element
Gallery NameA 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. ContentWhen 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/HeightThe 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/HeightIf 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 CellsThe 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 WidthThe 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. ![]() |