Images can have different origins. Traditionally they are stored in an images sub directory, but they can also be stored in a database as a blob, or reference. This manual describes the working with images. It also describes the use of the uploader to be able to upload images.


PHsPeed has implemented two different components for working with images. The first one is the ‘image’ component that actually is a reference to a pre-stored images with properties. The second component is dbimage, which is database aware. It also provides two methods of image storage: as a reference to a folder, and as a blob. Using simple images and deployment If you select images in your project, as a background, as part of a carousel, or any other use, PHsPeed will copy those elements into your project folder. If you run your project then the code is generated in your deployment environment, but it does not automatically copy the images. Especially when you have a lot, or big images, that would require a lot of resources, everytime you want to generate your project. Instead, you decide when you deploy the images, after all, in general, it only needs to be done once. To do so, go to deployment->deploy local images to local server.



Selecting simple images

Image properties contain a property editor for selecting images:


The ‘select new image’ will open up the file manager for selecting an image anywhere on your system. After selecting, it will be stored in your project environment. If you need to select a pre-selected image, then select ‘select image from deploy’.

The Image width and height will be used to scale your image, but only when the image is assigned to be non-responsive.

If you do not want to make use of the default image directory, then that is possible, in the current version you need to locatie the files manually then. Another tool that is available is the image 

Image component

The image component can be found on the additional tab. By default the images is set to ‘responsive’ as PHsPeed is based upon booststrap. 

Imortant properties are the picture folder (that contains your image) and the picture (that references your physical picture).

Remark: If you use the image component to assign a font-awesome icon then the sizing properties do not apply. 

By default the _libs/images folder is used as a reference to your images. 

The regular component will put the selected image on the screen. It is possible to resize the image as you can set the Image Width and Image Height in the image property editor. If you want to maintain the aspect ratio, then enter the width and click on the small icon to calculate height or the other way around. 

DBImage

The DBImage component makes it possible to store images or references to the images in the database. There are pro’s and con’s on both methods:

  • Storing images on disk and reference in the database
    • Pro’s
      • Simple
      • Images are regular files that you can maintain
    • Con’s 
      • Less safe, as the images are accessible if you do not make special arrangements
      • Risk of losing binding between image and stored reference in the database
  • Storing image physical in the database
    • Pro’s
      • Safe, images are 
      • Storing for downloading is more complex
    • Con’s
      • Database size
      • Dump of database can be huge, making it difficult to port

The decision is all yours. If you reference the files by location then you require a text field, if you store the images in the database, then you need to use a binary object (blob).


Image uploading

To store images, they need to be moved from the clients workstation to the server. Actuall, there is only one way to do that as storing images is something different then storing text. 

To upload images, you need to use the upload component and bind that to the image component:



In this very simple application clicking on ‘add record’ will open the popup with the uploader. As there is a link with the dbimage, the dbimage component will show the image after upload:



It doesn’t matter if the image is stored as referenc or as blob, the principle remains the same. The storage type is set by the property with the same name.


Properties

To allow the system to work, verify that the upload directory of the upload component matches the image directory of the image component. Even if you store the image in the database, there is a temporary folder where the image is stored before sending it to the database.

Important DBImage properties

  • Datasource and datafield 

Must point to a vailid data source and data base field to store the image (as reference or binary)

  • Imgwidth, imgheight, maxwidth, maxheight, 

properties that describes the display dimensions of the image. These properties do not apply if you have set the image to ‘responsive’ as the image will then behave to the rules of bootstrap. However to support cases where the image must be fixed, you can set responsive to false and use the sizing properties.

  • Imagefolder        

The folder where the images are stored.