-
- What is DG3
- The different components
- Requirements for running DG3
- Installation of DG3
- Additional installation steps
- Select which web server to use
- Hello World application
- Intro to CMS
- Setting up DG3 as a CMS
- Editing pages
- More about pages and urls
- Structuring a page using the grid
- Adding menu to pages
- Add images to the application
- More formating
- Sending email from contact us
- Adding menu to template
- Deploy the web site
- Storing the pages in database
- Create record
- Auto fill field
- Field validation
- Enable save button validator
- Add new button to template
- View document
- List documents
- Fix selection in menus in template
- CRUD Create Read Update Delete
- Intro to blogs
- Add user authentication
- Bootstrap authentication
- Let user change their passords
- Add reset password
- Login dialog box
- Extending the CMS to a blog
- Extend table for blogging
- Edit blog entry
- View blog entry
- User registration
- User password validation
- User field validation
- User auto login
- User extra registration fields
Add images to the application
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