Adding Pictures to a Blog

It's time to add pictures to *protoTyping. I'll begin with the Picture Template ideas suggested by M.B.. I'll expand on it in by including pictures for the blurb and for each of the Level 2 note in the "Read More" section. **Revised**
I created a new User Attribute called PictureFile. This will be where I paste the name of the picture, including the jpeg extension (because it's easy to copy the whole thing when I get the name from the source).
- **I also use the system attribute URL, where I paste the link for the picture.*** Revised!
- Because of problems encountered in the sidebar (sidebar template used URL for links) I created a new attribute called PictureURL.**
Added PictureFile and PictureURL attributes to the list of Key Attributes.
Put if-then code, img tag, and link in traintemplate.html as well as in my more complex trainItem.html (more later).
The if-then conditional test to see if PictureFile exists. If so, show the picture with a link, where the values are provided by ^Get
The path is preset to the location where my ImageRodeo document will always automatically put the thumbnails: /protophoto/thumb/
The URL I set by exporting my pictures from ImageRodeo and determining the URL for the display sized picture that I show in the thumbnail. That way, following the img link opens a window on the display page for the image that is created by ImageRodeo.
Here is the code with angle brackets removed and double carets so it will be displayed properly in my TBX document:
^if(PictureFile)
A HREF="^Get(PictureURL)" TARGET="_blank" TITLE="^Get(PictureFile)" IMG SRC="/protophoto/thumb/^Get(PictureFile)" ALIGN="left" ALT="^Get(PictureFile)" /A
^endif
^text(this, trainitem.html)^
I also have pictures that show up in the note items. This is accomplished by including the same code in the trainitem.html template that I constructed for my multilevel notes within notes. It allows me to have a number of pictures in a single story made up of many notes where each note has a single PictureFile and URL along with accompanying text.
For a live example check out *protoTyping at
http://prototyping.home.attbi.com/
Next time I'll detail how I managed to get Notes with many notes to work in a "Read More... break out posting approach" to longer blogging entries.
--- Ryan Holcomb 2005 --
|