There are different options to add pictures in your webhare site. These options are listed below.
When uploading a picture to a website, please make sure you know for sure that you are allowed to use the picture. If some else has copyright on a picture you publish on the internet, they might charge you some money for using their content. Simply adding the name of the photographer is not sufficient, you need to have a confirmation that you are allowed to use the content. That's why you should be very careful with using pictures from Google.
For information about pictures in the header, please see the header/footer section.
To add a picture in your text area, click the picture button above to upload/add a picture. You can also copy/paste a picture in the editor (ctrl C, ctrl V). To edit a picture, use the properties button. The following properties are available:
To make your picture smaller, use the dimensions fields and keep the aspect ratio (to keep the lengh/height ratio the same). Try to fill in the alternative foto text for every picture. This is an important keyword for your picture and your page in search engines like Google, but it also helps blind and other visually handicapped people to understand what's on the picture. Pictures may have a hyperlink (see the second tab on the picture above).
By default, pictures are placed page wide according to the online style of the UT. This will be done for all pictures that are 950 wide and more:
Floating left (not right)
When using smaller pictures (less than 950 pixels wide) your smaller pictures can also be floating left and right. In UT website we usually prefer the floating left option.
The floating right is available in WebHare, but in general not used on UT website.
To add a picture gallery, create a new folder of the type picture gallery. When you upload pictures to that folder a picture gallery will be created automatically. You can also use the index file (rich text document) to add some text above your pictures. People can click a picture to enlarge it and get a download button.
There are gallery widgets available. If may want to use them to link to a gallery. They are also great to create an overview page of all your picture galleries: just add 10 gallery widgets to a page, if you have 10 picture galleries in you overview.
Screenshot of a picture gallery (or open the picture gallery in your browser):
Example of a picture gallery widget (add many of them to create a picture gallery overview):
Widgets are blocks with additional information that can be placed below your webpage. There are different types of widgets that use pictures. For example:
- Media widget: one of more pictures/video's in a slider with some text and optional a link
- Photo widget: just a simple picture
- Contact person widget: a picture of a contact person with additional contact information (phone number, email, titel, etc)
- Gallery widget: a widget that links to a gallery (like the one above)
For information about widgets please see the widget page.
There is a variety of inline components (special elements you can place between your text paragraphs) available that also contains pictures:
- Caroussel (with pictures and video's)
- Contact person (short picture with contact information)
- Quote: quote by someone, including his picture
For information about inline components please see the inline components page.
In some situations there is a picture editor available (for header pictures on content pages and in NEO). When uploading a picture, the picture editor opens. Use the buttons in the right upper corner to add a picture. The required size is mentioned in the left upper corner.
After uploading a picture you get some extra buttons:
To edit the picture, hit the little pen in the right upper corner. You will get these options:
- Undo en redo what you have done
- Crop: select a part of your picture if the uploaded format is not matching the purpose
- Rotate: rotate the picture (90 degrees)
- and 5. Reference point: on some screen sizes the picture is shown is a slightly different format; the head of a person might be cut off. For this picture this was a problem. If you set the reference point to the head that is cut off (the student under 5.), this point will always be a central element, whatever screen you use.
Before setting the reference point:
After setting the reference point on the student's head: