Vine Type Content Management with Standards in Mind

24 May 2006

How To Add An Image

Photos, Charts, Icons, Images...folks love 'em. What would a website be without some imagery to enhance the site experience?

To add an image you must first have that file (we'll assume its a JPEG file called orlando.jpg in your "images" subdirectory on your webserver.)

To display that image, begin with a bang!

That's a little geek humor there...sorry. Programmers often refer to the exclamation point "!" as "bang!" Other weird names include "whack" for "/" and "backwhack" for "\". Now, where were we? Oh yes, to show an image, begin with a bang, or exclamation point.

Follow that bang with brackets [ and ] and follow the brackets with parentheses ( and ). Between the brackets put descriptive text. Between the parentheses put the path to the image file. For our example, we would use this...

![Johnny Suzy and Mickey Mouse](./vacation/orlando.jpg)

In this example, the descriptive text for the image is "Johnny Suzy and Mickey Mouse" and the path to the file is "./vacation/orlando.jpg". The "dot" (perhaps the best-known-geek-renamed character by the way) just serves to say "from the directory we're in" and for Vine Type it is the web root directory. Follow the dot with a whack and directory and another whack and the filename and your little darlings appear to the world on your Vine Type website.

Why Descriptive Text?

Glad you asked! What would be the purpose of descriptive text for an image? Two reasons:

  1. First, for browsers with images turned off, they will see the text instead.
  2. Second, for browsers that don't support images, such as browsers for the visually impaired, the text will appear.


Visit the Download Area to test drive the standard in standards compliance.


Add professional features to your Vine Type site by purchasing a Vine Type Pro license.


Discuss Vine Type or pose questions at the official Vine Type Forum hosted by ASP Advice.

about us

Learn more about this site and the features it is demonstrating.

© 2001-2019 vine branches — website powered by vine type