Section 3.2 - Embedding images into pages

If you have file uploads enabled on your site, you can seamlessly embed images into pages using wiki formatting code. You can make images nearly any size you want, control alignment, and add captions.

Preparing your site

Before images can be uploaded, file uploads must be enabled and working on your site. Most webhosts require you to CHMOD the /files and /cache directories to 777 (or 0777) before you can upload files and images. If you plan to allow the public to upload files, the default set of allowed file extensions is typically safe, but you might want to restrict it more depending on your needs.

If at all possible, you should enable ImageMagick and the cache - it will dramatically speed up image processing. The 1.1.x series of Enano also includes support for scaling images with the GD library. If neither ImageMagick nor GD is supported, Enano will rely on the user's browser to scale images, which is often inefficient and can cause a lot of unnecessary bandwidth usage.

If for some reason the ImageMagick paths aren't working out for you, contact your hosting service and they'll sort it out for you. Often times this is because the system() function is disabled in PHP.

Upload the image

The first thing you should always do is upload your image using the Upload File button on the left sidebar under Tools. If your server has ImageMagick installed, you can upload your image at full resolution, and the image will be scaled to the size you specify (though it will only be scaled down - never up.) Beware that the filename for your image is determined by the URL string. So if your URL string is File:MyPic.png, your filename will be MyPic.png.

Embed the wikitext

Images are embedded in the same format as internal links, except with a colon (":") in front of the URL string. The most basic way to embed an image is: [[:File:MyPic.png]].

You can also specify several options (parameters) in an image tag. These parameters are broken up using pipe characters.

Parameters on image tags

All parameters are optional, but must be in the correct order:

  • Raw
  • Size
  • Alignment
  • Caption

Raw flag

If you're using an image as part of an internal link, you should specify this flag to prevent Enano from wrapping a link to the image's
"File:" page around the image. This option will cause all other options on the image tag to be ignored.

Size

You can specify a maximum width and height, in pixels, for an image as the second parameter. The size can be either "thumb" (225px wide) or in the format of [width]x[height].

Examples: [[:File:MyPic.png|thumb]] [[:File:MyPic.png|320x240]]

Alignment

An image can be set to "float" on the left or right of a paragraph. This should be either "left" or "right."

Example: [[:File:MyPic.png|right]]

Caption

An image's caption will show below the image, with a small magnification icon on the right. Captions may contain internal links.

Example: [[:File:MyPic.png|A picture of [[User:Dan|me]]. Who knew I was so ugly?]]

Advanced examples

Image in an internal link: [[Download|[[:File:Download.png|raw]] Download now!]]
Image in an external link: [http://enanocms.org/bin/distrib/1.0.1/enano-1.0.1.zip [[:File:zip.png|raw]]]
Image with all options in use: [[:File:MyPic.png|thumb|right|It's me!]]

Previous Section 3.2 - Embedding images into pages Next
Linking to other pages Up one level Building a fancy portal