![]() ![]() ![]() |
![]() |
Image
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, "", "some_other_page.php", "contentFrame", 700, 900, true, 70, 90); ?> more... Arguments for the webyep_image() PHP function call:
(see "Attributes of the Image Element" below for details)
Please see "Attributes of the Image Element" below for details regarding the resizing and thumbnail generation. 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.
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 a lightbox effectThe WebYep Image Element (as well as the Gallery Element) supports the third party JavaScript image zooming effects Lightbox (based on Prototype/Scriptaculous) and FancyBox (based on jQuery). If one of these is installed, the detail (zoomed) image of a WebYep Image or Gallery Element will not open in a separate window, but in the page itself as an overlay. These effects are not bundled with WebYep but need to be downloaded from their creator's web sites and installed into WebYep's opt folder. Installation of LightboxAt the time of writing, the Lightbox JavaScript library can be downloaded from: http://www.huddletogether.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. For the configuration of the Lightbox script, please follow the instructions given on the web site where you downloaded Lightbox (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: LightboxOptions = Object.extend({ If your page already uses its own version of the Prototype and/or Scriptaculous library (on which Lightbox is based on), you can tell WebYep to not include it again. To do so, add this to WebYep's configuration file config-inc.php:
Installation of FancyBoxAt the time of writing, the FancyBox JavaScript library can be downloaded from: http://fancybox.net/ After extracting the downloaded archive you will get a folder with some files and subfolders in it. The subfolder named fancybox is the one that needs to be uploaded into the webyep-system/program/opt folder on the server. You will also find a file named jquery-x.x.x.min.js (where x.x.x is the version number) – this is the jQuery library FancyBox is based on. You can install this also into the webyep-system/program/opt folder on the server, but do not have to. If you don't, the jQuery library will be fetched from the Google code archive. If your page already uses its own version of the jQuery library (on which FancyBox is based on), you can tell WebYep to not include it again. To do so, add this to WebYep's configuration file config-inc.php:
Attributes of the Image Element
Image 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. Width / HeightThe width and/or height of the image. Leave blank, if the uploaded image should not be changed. If you specify one of them, WebYep will make sure that the image 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). ThumbnailIf this is checked, the image will be displayed in the page as a thumbnail with a size specified by the thumbnail width and/or height parameters (see below). Clicking the thumbnail will display a popup window with the original image. If it is not checked, the image will just 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. Thumbnail width / heightThe width and/or height of the thumbnail image. 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 framesIf 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. ![]() |