Adding an image field to a custom module and display it on the website

May 18, 2014 8:49 pm

This tutorial will show you how to output an image field to your website. We will also talk about the and widgets.

This will come in handy if you build a staff directory, for example, and you want to display a picture of each staff member.

  1. Create a custom module with an image field.
  2. Add items, with photos, to the new module in the Blue interface.
  3. Open the Lister lister for the custom module.
  4. Add the photo path to the item section of the lister.
    The path will look something like <img src="clientuploads/directory/[[type]]/[[misc4]]/" />
    clientuploads is the root folder of the Blue Interface. Everything uploaded to the Blue Interface is in the clientuploads folder.
    The folder called "directory" is automatically created when a Custom Module is added to the site.
    The widget will dynamically pull the unique id of the Custom Module being used.
    The unique id is specified when creating the module.
    [[misc4]] is the field used for uploading images.

Here is an example of a staff directory, the image path and the actual source from the live website.:

Example:

Image Path in Freedom (Item section of the staff directory lister):

Actual HTML output:


In the example above, the silhouette image is the image uploaded to each directory item in the blue interface. This field has a unique_id "misc4" which is specified in the Green Interface when building the custom staff directory. The HTML output is "clientuploads (main Blue File Manager folder)/directory (folder automaticcaly created which contains all of the custom modules on the website)/staff (the unique id for the custom module)/woman1.png (name of the file)".