Learn how to create pictures, with borders, captions, etc., on your ECEn XML web pages.
To create pictures in the ECEn Web XML, we're going to use <picture> tags.
These instructions assume that you already have an ECEn XML web page
to edit and know at least a bit about XML. Most content, such as text, links, lists, pictures etc., belongs in the <content> portion of your page; check the instructions below to see if you need to make sure that you
have a page with a <content> portion. If you need a quick tutorial or
just a simple starter web page download, check out the 'Howdy, World' Tutorial where you can get a brief overview of what files you need to set up a basic
ECEn XML web page.
If you need an example, have a look at the Picture Example page. You can view the XML source in your browser by clicking the 'this XML' link at the bottom of the page.
Or, you can download the XML source located in the Common Tasks Downloads to the right. (Right click, Save Link Target As...)
Basic Pictures
Here is some "code" to put a basic picture in your ECEn XML web page:
<picture>
<file>plain_clyde_halfsize.png</file>
</picture>
Here is what the picture would look like on an ECEn XML web page:
To add a picture to your page:
1
Create an opening and closing <picture> tag.
2
Place a <file> tag between the <picture> tags. Inside the <file> specify where your picture is. This is simply the location of your image file. Like links, it can be a relative or absolute path.
Basic pictures appear inline with text. So, if you'd like your picture to sit off to the side or in the center of the page, or have text wrap around the
picture, you'll need to add some style to your picture.
You can change the way a picture looks on your web page by using <style> tags. You can use these style tags to position your pictures left, right, and center, add borders
and more.
Here is some ECEn XML "code" to give a picture a border and center it:
<picture>
<style>visible border</style>
<style>positioned center</style>
<file>plain_clyde_halfsize.png</file>
</picture>
Here is what the picture would look like on a ECEn XML web page:
You can see that the picture is centered and has a light brown border around it.
To create a styled picture:
1
Create an opening and closing <picture> tag.
2
Place a <file> tag between the <picture> tags. Inside the <file> specify where your picture is. This is simply the location of your image file and, like links, can be either relative or absolute.
3
After the file tag, add as many <style> tags as you need. Specify valid picture styles, like 'visible border' or 'positioned center' within
the <style> tags. For all the possible picture styles, check out the ECEn XML Templates Reference.
If your picture is the wrong size, there is no way to resize it using only the ECEn web XML. There are a few reasons for this:
Resizing images in the browser instead of beforehand means the user has to download the original file rather than a smaller, scaled down one. This can cause a significant delay for users with slower internet connections.
Sometimes web browsers do not do a very good job of resizing the picture on the fly. For example, if a large,
high quality picture is resized tiny, the small picture can look grainy or distorted.
Not dealing with resizing images keeps the ECEn web XML much simpler.
Using image manipulation software to make the picture the correct size is
pretty easy. If you feel uncertain about it, email the ECEn Web Team and we'll be glad to help you.
Pictures with Captions
You can add a caption to your picture using a <caption> tag.
Here is some ECEn XML "code" to create a captioned picture:
<picture>
<style>positioned left</style>
<file>plain_clyde_halfsize.png</file>
<caption>
<text>The Clyde Building</text>
</caption>
</picture>
Here is what the captioned picture would look like on an ECEn XML web page:
The Clyde Building
As you might expect, specified caption appears beneath the picture in a small font.
To create a captioned picture:
1
Create an opening and closing <picture> tag.
2
Place a <file> tag between the <picture> tags. Inside the <file> tags specify where your picture is. This is simply the location of your image file and, like links, can be either relative or absolute.
3
After the file tag, add as many <style> tags as you need. Specify picture styles, like 'visible border' or 'positioned center' within
the <style> tags. You must add at least one 'positioned' style
because in ECEn XML pages inline pictures do not have captions. For all the possible picture styles, check out the ECEn XML Templates Reference.
4
Finally, add a <caption> tag with the text of the caption (wrapped in <text> tags) inside it.
![[image]](plain_clyde_halfsize.png)
