Formatting Help
On the bottom of the edit page there is a list of common codes you can use for formatting.
![](https://courses.cs.ut.ee/2024/cg/fall/Main/HomePage?action=download&upname=ProjectPageHelpImage-1.png)
You can also click on the documentation index button to search for some specific formatting you can not find from the common list.
Here are some extra tips you can do when creating your project pages.
Images
Images are very important on your project pages. These convey your project more efficiently than words. Images of your project, your architecture models, brainstorming results etc. are all good. However, the images need to be balanced out in the text. They should not be too big or small compared to the rest of the page content. Also, embed your images on the page instead of only linking to them in the text!
Before uploading and embedding an image, be sure that your image is not unnecessarily huge. First make sure that the resolution is at maximum about 900px for the longest edge. If your image has bigger resolution, then it likely takes up too much unnecessary bandwidth. Everyone has to wait until your big image (which is actually resampled by the browser anyway) loads. Secondly, be sure you know your file formats:
format | description | usage |
---|---|---|
PNG | Small and medium size pictures with a small color palette. Transparency. Keeps straight edges. | Use for small images or if you have a game with sprites and little or no shading. Also if you have sharp detail you want to preserve (incl graphs and plots). |
JPEG | Medium and large size pictures with a large color palette. Usually photos. Use compression with quality at least 85-90%. | Use if your game has shading and the screenshot has a large amount of different pixel colors. Or if you have a photograph. |
GIF | Short animations with a small color palette. Be sure to optimize the GIF-s color map to save space and not lose any of your colors. | The only reason to use that is if you have an animated GIF. In any other case PNG is better. And even then, if the animation is long and includes many colors, then a video would be better. |
Generally, any image you embed should not exceed 1 MB. If you need a high-res image, then have a link to it and embed only a low-res version of it.
![](https://courses.cs.ut.ee/2024/cg/fall/Main/HomePage?action=download&upname=ProjectPageHelpImage-2.png)
You can also put images next to your text. This is useful if your images are vertical. Usually you should try to avoid too vertical images as the project page is also vertical an thus the images takes up a lot of room on the page. However, sometimes the object on the image is actually vertical and then it might be a good idea to make the image smaller and put it next to the paragraph talking about that image.
The above is achieved with the following:
%rfloat width=100% Attach:Main/ProjectPageHelpImage-2.png You can also put images next to your text. This is useful if your images are vertical. Usually you should try to avoid too vertical images as the project page is also vertical an thus the images takes up a lot of room on the page. However, sometimes the object on the image is actually vertical and then it might be a good idea to make the image smaller and put it next to the paragraph talking about that image. [[<<]]
The percent sign after the width=100 indicates the end of a definition. The image is resized to have a width of 100 pixels.
Also be sure your image embeds are always on their own separate text row. If you put an image embed to the same line as your content text, then the result will be ugly.
Of course you can also put many images in one row.
![](https://courses.cs.ut.ee/2024/cg/fall/Main/HomePage?action=download&upname=ProjectPageHelpImage-2.png)
![](https://courses.cs.ut.ee/2024/cg/fall/Main/HomePage?action=download&upname=ProjectPageHelpImage-2.png)
![](https://courses.cs.ut.ee/2024/cg/fall/Main/HomePage?action=download&upname=ProjectPageHelpImage-2.png)
![](https://courses.cs.ut.ee/2024/cg/fall/Main/HomePage?action=download&upname=ProjectPageHelpImage-2.png)
Of course you can also put many images in one row. %lfloat width=100% Attach:Main/ProjectPageHelpImage-2.png %lfloat width=100% Attach:Main/ProjectPageHelpImage-2.png %lfloat width=100% Attach:Main/ProjectPageHelpImage-2.png %lfloat width=100% Attach:Main/ProjectPageHelpImage-2.png [[<<]]
And make your image a link to a bigger version of the image.
%width=100% [[Attach:ProjectPageHelpImage-2.png|Attach:Main/ProjectPageHelpImage-2.png]]
Videos
Equally important to images are videos of your project progress. A very easy way to include videos to your page is to upload them to YouTube. You can make your videos unlisted there, so that they will not show up on your profile if you do not want that. Then to put a video here, just paste a link to the video into a new line:
https://www.youtube.com/watch?v=Pd3jRBF-tY4?height=360&width=614
Toggle
When you are writing sections of your page, then you might want to include a toggle buttons to collapse the sections and allow the user open them if they want to.
Click Me
Flounder halosaur thorny catfish lookdown catfish; spiderfish, emperor angelfish gombessa pearleye European perch. Basslet bristlemouth spiny dogfish temperate bass; European perch sharksucker; deep sea bonefish Ratfish tommy ruff gurnard elasmobranch. Butterfly ray eelpout sergeant major, stickleback common tunny. Mahi-mahi madtom Atlantic silverside lanternfish bichir, Modoc sucker sea chub loach catfish. Halibut dab European eel Redhorse sucker orbicular velvetfish swordfish walu priapumfish zebra danio.
Sheepshead minnow mojarra elephantnose fish, mosshead warbonnet sauger tubeblenny jewfish blue danio codling. Oilfish, grouper walu houndshark Old World knifefish kelpfish thornyhead, perch swallower; wobbegong Blenny pikehead jewfish lyretail spearfish rough sculpin bull shark. Halosaur oceanic flyingfish Bengal danio anchovy northern lampfish; springfish mosquitofish southern smelt goldspotted killifish. Dorado scabbard fish shortnose chimaera goldeye, "trumpeter fusilier fish," salmon shark sturgeon sand eel? Elephant fish elver, "pigfish Steve fish brook lamprey ocean sunfish." Wrasse scabbard fish yellow bass leaffish nurse shark redtooth triggerfish paradise fish wallago cutlassfish.
Razorfish, whale catfish Canthigaster rostrata madtom longfin escolar Pacific herring springfish. Sailback scorpionfish flying characin Peter's elephantnose fish barb danio trout-perch shortnose sucker beardfish prickleback Atlantic herring goatfish deepwater flathead tope longnose sucker slender mola.
!!(:toggle hide show="Click Me" hide="Click Me Again" mySection1:) >>id=mySection1 margin-left=20pt margin-right=20pt text-align=justify<< Flounder halosaur thorny catfish lookdown catfish; spiderfish, emperor angelfish gombessa pearleye European perch. Basslet bristlemouth spiny dogfish temperate bass; European perch sharksucker; deep sea bonefish Ratfish tommy ruff gurnard elasmobranch. Butterfly ray eelpout sergeant major... Text from: https://tunaipsum.com >><<