Image

The Image Element icon in the Dreamweaver object palette

By placing a WebYep Image Element instead of a normal image into your page, you enable the users to change this image by uploading some other GIF/JPG via their web browser.

This element is represented by the following PHP code:

<?php webyep_image("Fieldname", false, 'vspace="100"', "some_other_page.php", "contentFrame", 70, 90, true); ?> more...

Users can upload new images directly with the web browser with a simple click on the "Edit" button beside a WebYep Image Element in a web page. Clicking the "Edit" button opens the Change Image Window which lets users upload a new image file or delete the current one.

The Image Element in action - by clicking the "Edit" button the user opens the Change Image Window

The Change Image Window

Users can also specify the URL of a page to be opened, if a visitor clicks on the image (if the image is not set to be a thumbnail and the designer as not already set a URL– see blow). Also the "alt" text (the value for the <img>-tag's "alt" attribute) can be specified, to increase accessibility.

---

Adding the "Lightbox" effect

The WebYep Image Element supports the popular JavaScript effect library "Lightbox". If you download this library and install it into WebYep's "opt" folder, WebYep will automatically use it. Instead of opening a popup window when clicking a thumbnail image, it will then show the zoomed image inside the page, using the Lightbox effect.

At the time of writing, the Lightbox JavaScript library can be downloaded from: http://www.lokeshdhakar.com/projects/lightbox2/

Download the ZIP file, unpack it, rename the resulting folder (that usually has the version number as part of its name) to "lightbox" and upload that folder into the webyep-system/program/opt folder on the server.

From that point on, WebYep will make use of Lightbox.

For the configuration of the Lightbox script, please follow the instructions given on its web site - see the link above.

You might for example want to edit the file webyep-system/program/opt/lightbox/js/lightbox.js to adapt the paths to the image files used by Lightbox for the "close" and "loading" images to:

var fileLoadingImage = "/webyep-system/program/opt/lightbox/images/loading.gif";
var fileBottomNavCloseImage = "/webyep-system/program/opt/lightbox/images/close.gif";

Attributes of the Image Element

The Dreamweaver inspector showing the Image Element's attributes

Image 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.

Thumbnail

If this is checked, the image will be displayed in the page as a thumbnail with a size specified by the width and/or height parameters. Clicking the thumbnail will display a popup window with the original image.

If it is not checked, the image just should be downsized to the dimensions specified by the width and/or height parameters and then displayed in the page – clicking the image will then not open a popup window.

Width / Height

The width and/or height of the image or it's thumbnail. Leave blank, if the uploaded image should not be changed and WebYep should not create a thumbnail for it.

If you specify one of them, WebYep will make sure that the image or thumbnail (depending on the "Thumbnail" parameter) will not exceed the width or height given.

If you specify both, WebYep will make sure that neither the width nor the height of the resulting image will exceed the given dimensions.

Resizing is always done proportional (the aspect ration is kept the same).

Note: Resizing can only be done, if the "GD" extension for PHP is installed on the server. If not, the Change Image Window in the browser will display a warning and images will only be displayed in the specified sizes, but not actually be downsized (and therefore the file size will stay the same).

HTML attributes

Here you can enter all HTML attributes suitable for an HTML <img> tag. These attributes will then be applied to the <img> tag the Image Element generates to place the image inside the page.

Example: align="left" hspace="20"

This would make all following text flow around the left aligned image and the horizontal padding between the image and the text would be 20 pixels.

Page (URL)

The URL (or filename) of a page to be shown when a visitor clicks the image. By setting this attribute you promote this Image Element into a link.

If the Image Element is positioned inside a Loop Element (see WebYep Loop Element) and you assign a URL to it, the Image Elements behaves much like a WebYep Menu Element's item: The page shown when clicking the image can have different WebYep content depending on which image (in which loop row) the visitor clicked on.

So one could for example create a loop (WebYep Loop Element) of brief product descriptions with a product title (Short Text Element), a short description (Long Text Element) and a thumbnail image (Image Element) in the looped block. By assigning the URL of a detail page to the thumbnails Image Element visitors can click on the thumbnail to see the detail page for that product.

Target frame - when using frames

If the page which URL you entered in the "Page" attribute should be opened in another HTML frame you can enter this frame's name here.

---