By default, all images for the application are added directly to the web application. We do not try to link to images already on the computer. If you use the add image tool, we simply copy the images into the web application. You can either use the build in tool or do this by the file explorer. The images should be added to the path APPPATH\web\static\images and the folders below. If you use the import image tools, this folder is the one selected as the target, so you can use the tool to find the directory as well. To use the image tools in DG3, simply locate the images in the page browser. Here you will have the choice of import, create folder, rename images, delete images, refresh the images from disk and open the image into the build in image tool.

 

Add images to a page in DG3

Images on a web page is added with either a background css style or an <img> tag. To do the css route, you need to know how to find the right url. In DG3 we try to keep all the static elements like images and files in the APPPATH\web\static folder structure. Here all files that can be served directly by a web server is put. 

The technical reason for this is to let the real web server serve them directly without using the dynamic part of the application. This makes the web application able to serve many more users than when run through the dynamic part of the application.

All files added to the APPPATH\web\static folder structure can be reached by the url: /static/folder(s)/filename. This means that all images you add to the appication by using the import tool or by manually copy them to the APPPATH\web\static\images path will get the url /static/images/folder(s)/filename in your application.

The easiest way to add an image is to use the image snippet. So open you web page element to edit in the html designer, locate where in the code you want the image and press the image snippet icon. Give the image a recognizable name or just keep the default. Use the image picker button to build the url or write it in your self. Set other information like style or extra tags and press ok.

Image snippet icon

 Empty new image dialog

Select image from image look-up dialog

Fill in extra styles, name and alternative text for the ones not able to see image

[! image storybehind !]

This is the code for the snippet shown in the editor

<img class="img-thumbnail pull-right" src="/static/images/articleimages/storybehind_de8.png" alt="story behind">

This is the same code written in html